在Flutter中创建自定义小部件

Question

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

int _weight =60;

class RoundIconData extends StatefulWidget {

@override
_RoundIconDataState createState() => _RoundIconDataState();
}
class _RoundIconDataState extends State<RoundIconData> {

RoundIconData({@required this.icon,@required this.pressme});
final IconData icon;
final int pressme;

@override
Widget build(BuildContext context) {
 return RawMaterialButton(
   child: Icon(icon),
   onPressed: (){
    setState(() {
      if(icon == FontAwesomeIcons.minus){
        _weight--;
      }
      else{
        _weight++
      }
    });
  },
  elevation: 6.0,
  constraints: BoxConstraints.tightFor(
    width: 56.0,
    height: 56.0,
  ),
  shape: CircleBorder(),
  fillColor: Color(0xFF4C4F5E),
);
}
}

我在创建这个过程中遇到了错误。

我的需求

自定义小部件，通过RawmaterialButton添加图标。如果我添加icon.minus，那么我的给定私有权重将被减少，否则给定的私有权重将增加。

- user8522293

---

嗨，Asbah！请编辑你的问题并添加你在创建过程中遇到的错误以及何时发生错误，这样我们才能了解你的问题并帮助你。最好的问候！ - George

Answer 1

您可以复制下面的完整代码并运行。您需要将以下代码移动到 RoundIconData 中。

RoundIconData({@required this.icon,@required this.pressme});
final IconData icon;
final int pressme;

并传递刷新回调函数

演示效果

完整代码

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

int weight = 60;

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  refresh() {
    setState(() {});
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RoundIconData(
              icon: Icon(FontAwesomeIcons.minus),
              notifyParent: refresh,
            ),
            RoundIconData(
              icon: Icon(Icons.add),
              notifyParent: refresh,
            ),
            Text(
              '${weight}',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class RoundIconData extends StatefulWidget {
  final Icon icon;
  final int pressme;
  final Function() notifyParent;

  RoundIconData(
      {@required this.icon,
      @required this.pressme,
      @required this.notifyParent});
  @override
  _RoundIconDataState createState() => _RoundIconDataState();
}

class _RoundIconDataState extends State<RoundIconData> {
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: widget.icon,
      onPressed: () {
        print(widget.icon.toString());
        print(Icon(FontAwesomeIcons.minus).toString());
        if (widget.icon.toString() == Icon(FontAwesomeIcons.minus).toString()) {
          weight--;
          widget.notifyParent();
          print(weight);
        } else {
          weight++;
          widget.notifyParent();
          print(weight);
        }
      },
      elevation: 6.0,
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    );
  }
}

- chunhunghan

Answer 2

Creating a Custom widget in Flutter

 import 'package:flutter/material.dart';
    
    
    class WelcomePage extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Auth',
          theme: ThemeData(
            primaryColor: Colors.purple,
            scaffoldBackgroundColor: Colors.white,
          ),
          home:Scaffold(
            body: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "WELCOME TO XYZ",
                      style: TextStyle(fontWeight: FontWeight.bold,color: Colors.purple,fontSize: 25),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(right: 40),
                      child: Image.asset(
                        "assets/images/food_order.png",
                        height: 200,
                      ),
                    ),
                    SizedBox(height: 10 ),
                    loginMethod(),
                    signUpMethod(),
                  ],
              ),
            ),
            ),
          ),
        );
      }
    
      // Login Button Method Widget
      Widget loginMethod(){
        return Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          width: 200,
          height: 50,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(29),
            child: FlatButton(
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
              color: Colors.blue,
              onPressed: (){},
              child: Text(
                'Login',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        );
      }
    
      // Signup button method widget
      Widget signUpMethod (){
        return Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          width: 200,
          height: 50,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(29),
            child: FlatButton(
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
              color: Colors.blue,
              onPressed: (){},
              child: Text(
                'Sign up',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        );
      }
    
    }

- Md.Atikul Islam Asad