Flutter 如何在flatter中重用小部件

我正在学习flatter，我希望在运行时将一个特定的小部件与不同的图像一起重用

如何做到这一点给了我困难，我想知道如何做到这一点

我正在写代码，请建议正确的方法

       scaffold: CupertinoPageScaffold(
         navigationBar: CupertinoNavigationBar(
          trailing: Image.asset('assets/Menu_Button.png'),
          automaticallyImplyLeading: false,
          backgroundColor: Colors.blueAccent,
        ),
          child: SafeArea(
            child: Material(
              child: Container(
                child: Column(
                  children: [
                    Column(
                      children: <Widget>[
                       new Stack(children: <Widget>[
                       new Container(
                          child: background.Row1
                       ),
                      Container(
                          color: Colors.blueAccent,
                          child: Image.asset('assets/card_bg.png')
                      ),
                    ]
                    ),

                    Container(
                        color: Colors.blueAccent,
                     child: Row(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
                     ShowingOptions('assets/image1.png').Options,//*****calling function with parameter so that it can put widget**********//
                     ShowingOptions('assets/image2.png').Options,
                     ShowingOptions('assets/image3.png').Options,
                     ShowingOptions('assets/image4.png').Options,


              ],
              ),

                  background.Row2,
                  background.Row3
                ],
              ),
            ),
          ))
            ),
      );
      }
     }

     /**********function defination starts *************/
    ShowingOptions(image) {

     Widget Options =  padding: EdgeInsets.only(bottom: 5, left: 7, 
              right: 7, top: 5),
         child: Container(
         height: 55.0,
          width: 55.0,

            child: Padding(
             padding: EdgeInsets.all(1),
               child: CircleAvatar(
                backgroundColor: Colors.transparent,

                radius: 10,
                  child: new Image.asset(image, height: 150, width: 
               150),
              )),
             decoration: new BoxDecoration(
           shape: BoxShape.circle,
           color: Colors.white,
           border: new Border.all(
             color: Colors.orange,
            width: 5.0,
           ),
        )
        ),  

    );
  }
     }
               /**********function defination ends *************/

scaffold:CupertinoPageScaffold(
导航栏：CupertinoNavigationBar(
尾随：Image.asset（'assets/Menu_Button.png'），
自动嵌入：false，
背景颜色：Colors.blueAccent，
),
儿童：安全区(
儿童：材料(
子：容器(
子：列(
儿童：[
纵队(
儿童：[
新堆栈（子项：[
新容器(
child:background.Row1
),
容器(
颜色：Colors.blueAccent，
子项：Image.asset（'assets/card_bg.png'））
),
]
),
容器(
颜色：Colors.blueAccent，
孩子：排(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
ShowingOptions（'assets/image1.png'）.Options，///****使用参数调用函数，以便它可以放置小部件**********//
显示选项（'assets/image2.png'）。选项，
显示选项（'assets/image3.png'）。选项，
显示选项（'assets/image4.png'）。选项，
],
),
background.Row2，
背景资料第3行
],
),
),
))
),
);
}
}
/**********函数定义开始*************/
显示选项（图像）{
Widget Options=padding:EdgeInsets.only（底部：5，左侧：7，
右：7，顶部：5），
子：容器(
身高：55.0，
宽度：55.0，
孩子：填充(
填充：边缘设置。全部（1），
孩子：圆环星(
背景颜色：颜色。透明，
半径：10，
子项：新图像。资源（图像，高度：150，宽度：
150),
)),
装饰：新盒子装饰(
形状：BoxShape.circle，
颜色：颜色，白色，
边界：新边界(
颜色：颜色。橙色，
宽度：5.0，
),
)
),  
);
}
}
/**********函数定义结束*************/

我所做的是创建一个函数，当我调用函数“showOptions（'assets/image1'）时，我传递需要显示的图像

在函数定义中，我正在编写一个小部件，当我调用该函数时，我想通过显示我传递的图像来放置它

---

我实现这个整体的方式不起作用，我需要一个解决方案。我知道这不是正确的方式，因为我是新手，我想得到一些指导。

创建一个自定义小部件

创建无状态或有状态类

声明所需的VAIRABLE

返回您的自定义小部件

下面是带有onPressed事件的CustomButton示例

  //Create a Stateless or Stateful Class
  class CustomButton extends StatelessWidget {

  //declare Required Vairables
  final String buttonText;
  final VoidCallback onPressed;
  final bool loading;

  //constructor 
  CustomButton({this.buttonText,this.onPressed,this.loading});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(left: 30,right: 30),
            child: Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(100)),
              color: Colors.red),
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  splashColor: Colors.green,
                  onTap: onPressed,
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Center(child:
                    loading==true?
                        CircularProgressIndicator(backgroundColor: Colors.white,)
                        :
                    Text(buttonText,style: TextStyle(fontSize: 30,color: Colors.white),)),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }


}

这是一个很好地解释了如何轻松实现这一点的示例

我只是从那里复制代码。基本上，您必须为您想到的小部件创建一个单独的类：

import 'package:flutter/material.dart';

class AppTextFormField extends StatelessWidget {
  //
  AppTextFormField({
    this.controller,
    this.hintText,
    this.helpText,
    this.prefixIcon,
    this.suffixIcon,
    this.isPassword,
    this.enabled,
    this.readOnly,
    this.borderColor,
  });

  final TextEditingController controller;
  final String hintText;
  final String helpText;
  final IconData prefixIcon;
  final IconData suffixIcon;
  final bool isPassword;
  final bool enabled;
  final bool readOnly;
  final Color borderColor;@override

  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: controller,
        readOnly: null == readOnly ? false : true,
        obscureText: null == isPassword ? false : true,
        decoration: InputDecoration(
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.greenAccent,
              width: 1.0,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.greenAccent,
              width: 1.0,
            ),
          ),
          border: OutlineInputBorder(
            borderSide: BorderSide(
              color: null == borderColor ? Colors.teal : borderColor,
              width: 1.0,
            ),
          ),
          hintText: null == hintText ? '' : hintText,
          helperText: null == helpText ? '' : helpText,
          prefixIcon: null == prefixIcon ? null : Icon(prefixIcon),
          suffix: null == suffixIcon ? null : Icon(suffixIcon),
          enabled: null == enabled ? true : false,
        ),
      ),
    );
  }
}

然后在你想使用小部件的类中，你像这样调用它：

Container(
    child: Column(
        children: [
        AppTextFormField(
            controller: _emailController,
            helpText: 'Email',
            hintText: 'Email',
            prefixIcon: Icons.email,
        ),
        AppTextFormField(
            controller: _passwordController,
            helpText: 'Password',
            hintText: 'Password',
            isPassword: true,
            prefixIcon: Icons.lock_open,
        ),

---

您不必使用所有的方法，只需使用您需要的方法。

您的目标是使用该小部件/功能显示图像吗？

Container(
    child: Column(
        children: [
        AppTextFormField(
            controller: _emailController,
            helpText: 'Email',
            hintText: 'Email',
            prefixIcon: Icons.email,
        ),
        AppTextFormField(
            controller: _passwordController,
            helpText: 'Password',
            hintText: 'Password',
            isPassword: true,
            prefixIcon: Icons.lock_open,
        ),