Question

我是Flutter的新手，我注意到它提供了很多小部件供您选择。但是我的问题是：我们可以自己制造吗？敌人的例子，我可以制作自己尚未提供的按钮吗？

Answer 1

是的，即使使用Flare

进行动画制作，也可以创建自己的小部件

请参阅本教程：

https://medium.com/flutter-community/how-to-create-button-animation-with-flare-in-flutter-part3-implement-animation-in-flutter-project-f335f88311c8

Answer 2

是的，您可以在flutter中创建自定义窗口小部件。以下代码将自定义按钮创建为：

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

class CustomButton extends StatelessWidget {
  CustomButton({@required this.onPressed});
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const <Widget>[
            Icon(
              Icons.face,
              color: Colors.amber,
            ),
            SizedBox(
              width: 10.0,
            ),
            Text(
              "Tap Me",
              maxLines: 1,
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
      onPressed: onPressed,
      shape: const StadiumBorder(),
    );
  }
}

您可以像这样使用CustomButton：

class _CustomWidgetDemoState extends State<CustomWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text("here is a custom button in FLutter"),
            CustomButton(
              onPressed: () {
                print("Tapped Me");
              },
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

是的，您可以创建自己的窗口小部件。例如，如上所述，您可以使用以下代码创建自定义按钮。

您在OutlineButton构造函数中看到的属性将使用红色背景色，32px的圆形边框半径和文本来构建按钮。它也是其中的onPressed函数，当您按下按钮时会执行该函数；在下面的示例中，按下按钮后，您将向控制台打印语句I pressed it。

Widget _buildButton(BuildContext context){
    return OutlineButton(
      onPressed: (){
        print('I pressed it');
      },
      color: Colors.red,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32.0)),
      child: Text('CUSTOM BUTTON'),
    );
  }

您还可以将按钮包装在ButtonTheme小部件中，该小部件可为您提供多种功能，其中之一是根据所需大小缩放按钮。

Widget _buildButton(BuildContext context){
    return ButtonTheme(
      height: 100,
      minWidth: 100,

      child: OutlineButton(
        onPressed: (){},
        color: Colors.red,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32.0)),
        child: Text('CUSTOM BUTTON'),
      ),
    );
  }

我们可以在Flutter中创建一个新的小部件吗？

3 个答案: