如何减少颤动中按钮的重复代码？答案

【问题标题】：How to reduce repetitive code for buttons in flutter?如何减少颤动中按钮的重复代码？
【发布时间】：2021-10-03 00:18:01
【问题描述】：

我有超过 10 个按钮需要在我的颤振中显示。这是我的 2 个重复按钮的示例代码：

 Padding(
          padding: const EdgeInsets.all(8.0),
          child: Material(
            clipBehavior: Clip.antiAlias,
            shape: const StadiumBorder(),
            child: Ink(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.grey,
                    Colors.white,
                  ],
                ),
              ),
              width: double.infinity,
              height: 60,
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => PrivacyRoute()),
                  );
                },
                child: ListTile(
                  leading: Icon(
                    Icons.menu_book,
                    color: Colors.white,
                  ),
                  title: Text('Bahasa Melayu',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      )),
                ),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Material(
            clipBehavior: Clip.antiAlias,
            shape: const StadiumBorder(),
            child: Ink(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black,
                    Colors.grey,
                    Colors.white,
                  ],
                ),
              ),
              width: double.infinity,
              height: 60,
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => PrivacyRoute()),
                  );
                },
                child: ListTile(
                  leading: Icon(
                    Icons.menu_book,
                    color: Colors.white,
                  ),
                  title: Text('English',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      )),
                ),
              ),
            ),
          ),
        ),

不重复的只有linear-gradient、onTap、icon和文字的颜色。知道怎么做吗？我尝试使用 void 功能，但无法实现可用功能。希望能得到你们的一些见解。

【问题讨论】：

标签： flutter dart

【解决方案1】：

将其设为StatelessWidget 类

class MyButton extends StatelessWidget {
  final VoidCallback onTap;
  final List<Color> colors;
  final Widget icon;
  final String text;

  const MyButton({
    Key? key,
    required this.onTap,
    required this.colors,
    required this.icon,
    required this.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Material(
        clipBehavior: Clip.antiAlias,
        shape: const StadiumBorder(),
        child: Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: colors,
            ),
          ),
          width: double.infinity,
          height: 60,
          child: InkWell(
            onTap: onTap,
            child: ListTile(
              leading: icon,
              title: Text(text,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

现在取决于您是否需要这些参数，或者您将有一些默认值以防它们为空等。（例如，如果您不传递颜色，则可能有一个用于使用的颜色的成本列表案例）

【讨论】：