简体   繁体   中英

How to make a text fit inside a rounded button with icon

I'm trying to create a simple rounded button with icon (on left) and text right to it.

I've followed https://stackoverflow.com/a/63124491/13684332 , which proposes that we can make the Text inside a FittedBox with fit:BoxFit.cover . I also tried fit:BoxFit.scaleDown and fit:BoxFit.fitWidth . All of them result in some pixels overflowing the text widget.

class RoundedButtonWithIcon extends StatelessWidget {
  RoundedButtonWithIcon(
      {@required this.text,
      @required this.onPress,
      this.icon,
      this.color,
      this.image});
  final String text;
  final Function onPress;
  Icon icon;
  Image image;
  Color color;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: double.infinity,
        child: FlatButton(
          child: Row(children: [
            Container(
                margin: const EdgeInsets.only(right: 3),
                child: image != null ? image : (icon != null ? icon : null)),
            FittedBox(
                fit:BoxFit.cover,
                child:
            Text(
              text,
              style: TextStyle(
                  //fontSize: 13,
                  fontWeight: FontWeight.w400,
                  fontFamily: 'Roboto',
                  color: color != null ? color : Colors.white),
            )
            )]),
          onPressed: () {
            onPress();
          },
          textColor: Colors.white,
          color: Colors.gray,
          shape: RoundedRectangleBorder(
              side: BorderSide(
                  color: Colors.red, width: 1.3),
              borderRadius: BorderRadius.circular(5)),
        ));
  }
}

在此处输入图片说明

在此处输入图片说明

class RoundedButtonWithIcon extends StatelessWidget {
  RoundedButtonWithIcon(
      {@required this.text,
      @required this.onPress,
      this.icon,
      this.color,
      this.image});
  final String text;
  final Function onPress;
  final Icon icon;
  final Image image;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Row(children: [
        Expanded(
          child: Row(
            children: [
              Container(
                  margin: const EdgeInsets.only(right: 3),
                  child: image != null ? image : (icon != null ? icon : null)),
              Flexible(
                child: FittedBox(
                    alignment: Alignment.centerLeft,
                    fit: BoxFit.scaleDown,
                    child: Text(
                      text,
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontFamily: 'Roboto',
                          color: color != null ? color : Colors.white),
                    )),
              )
            ],
          ),
        ),
      ]),
      onPressed: () {
        onPress();
      },
      textColor: Colors.white,
      color: Colors.grey,
      shape: RoundedRectangleBorder(
          side: BorderSide(color: Colors.red, width: 1.3),
          borderRadius: BorderRadius.circular(5)),
    );
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM