Question

我创建了一个 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 时，我可以根据需要更改每个按钮的属性值，我也想更改按钮的图标，所以我的问题是我没有访问 {{1} 上的 icon 变量}.

请帮助如何做到这一点。

Answer 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)
          // ),
          ),
    );
  }
}

Answer 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)
        // ),
      ),
    );
  }
}

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

2 个答案: