Question

我正在学习抖动，希望在运行时将特定的小部件与不同的图像一起使用。

如何实现这一目标给我带来了困难，我想知道如何实现这一目标。

我正在编写代码，请提出正确的方法

       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 *************/

我正在做一个功能，当我调用函数'showOptions（'assets / image1'）'时，我正在传递需要显示的图像。

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

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

Answer 1

创建自定义小部件，

创建无状态或有状态的类
声明必需品
返回您的自定义小部件

下面是带有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),)),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }


}

使用：

CustomButtonSmall(buttonText: "Direction",onPressed: (){})

Answer 2

Here 很好地解释了如何轻松实现这一目标。

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

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,
        ),

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

如何在Flutter中重用窗口小部件

2 个答案: