如何使用颤振中的类在按钮小部件中添加图标属性答案

【问题标题】：How to add icon property in button widget using class in flutter如何使用颤振中的类在按钮小部件中添加图标属性
【发布时间】：2021-08-16 15:43:46
【问题描述】：

我创建了一个 RoundedButton 类，并在我想要一个按钮的地方调用该类。我为按钮添加了所有必需的属性。这是我的课

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;
  final Icons icon;
  const RoundedButton({
    Key key,
    this.text,
    this.press,
    this.color = Colors.grey,
    this.icon,
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);  
   
        return Material(
          elevation: 5.0,
          borderRadius: BorderRadius.circular(30.0),
          color: Color(0xff01A0C7),
          
          child: MaterialButton(
            minWidth: MediaQuery.of(context).size.width,
            padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            onPressed: press,
            child:Row(
              children: <Widget>[
              Icon(Icons.icon)),
              Text(text,
              textAlign: TextAlign.left,
              style: style.copyWith(
                  color: Colors.white, fontWeight: FontWeight.bold)
        ),
          ],
        )
        // child: Text(text,
        //     textAlign: TextAlign.left,
            
        //     style: style.copyWith(
        //         color: Colors.white, fontWeight: FontWeight.bold)
        // ),
      ),
    );
  }
}

这里调用的样子

RoundedButton(text: "Time out",color: Colors.white,),),

因此，当我调用此 RoundedButton 时，我可以根据需要更改每个按钮的属性值，我也想更改按钮的图标，所以我的问题是我没有访问 Icon(Icons.icon) 上的 icon 变量。

请帮助如何做到这一点。

【问题讨论】：

标签： flutter button icons

【解决方案1】：

只需将final Icons icon 更改为final Icon icon

并将Icon(Icons.icon) 替换为icon

变成这样：

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;
  final Icon icon;
  const RoundedButton({
    Key key,
    this.text,
    this.press,
    this.color = Colors.grey,
    this.icon = const Icon(Icons.ac_unit),
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);

    return Material(
      elevation: 5.0,
      borderRadius: BorderRadius.circular(30.0),
      color: Color(0xff01A0C7),
      child: MaterialButton(
          minWidth: MediaQuery.of(context).size.width,
          padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          onPressed: press,
          child: Row(
            children: <Widget>[
              icon,
              Text(text,
                  textAlign: TextAlign.left,
                  style: style.copyWith(
                      color: Colors.white, fontWeight: FontWeight.bold)),
            ],
          )
          // child: Text(text,
          //     textAlign: TextAlign.left,

          //     style: style.copyWith(
          //         color: Colors.white, fontWeight: FontWeight.bold)
          // ),
          ),
    );
  }
}

【讨论】：

它打印此错误，行的子项不得包含任何空值，但在索引 0 处发现空值，当我调用 RoundedButton 像这样 RoundedButton(icon: Icon(Icons.timer_off),text : "超时",color: Colors.white,)),
您可以检查 Icon 是否为 null 放置一个像这样的空容器 icon == null ？容器（）：图标，

【解决方案2】：

解决方案

刚刚在 Amin Al-jebbeh 解决方案上添加了此声明 icon == null ? Container() : icon,

import 'package:flutter/material.dart';
//import 'package:attendance_system_app/new.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;
  final Icon icon;
  const RoundedButton({
    Key key,
    this.text,
    this.press,
    this.color = Colors.grey,
    this.icon,
    this.textColor = Colors.white,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);  
   
        return Material(
          elevation: 5.0,
          borderRadius: BorderRadius.circular(30.0),
          color: Color(0xff01A0C7),
          
          child: MaterialButton(
            minWidth: MediaQuery.of(context).size.width,
            padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            onPressed: press,
            child:Row(
              children: <Widget>[
                 icon == null ? Container() : 
             icon,
              Text(text,
              textAlign: TextAlign.left,
              style: style.copyWith(
                  color: Colors.white, fontWeight: FontWeight.bold)
        ),
          ],
        )
        // child: Text(text,
        //     textAlign: TextAlign.left,
            
        //     style: style.copyWith(
        //         color: Colors.white, fontWeight: FontWeight.bold)
        // ),
      ),
    );
  }
}

【讨论】：