this is my button component code :

Widget build(BuildContext context) {
    return MaterialButton(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(40)),
        side: BorderSide(color: kPrimaryColor)
      ),
      padding: padding,
      color: color,
      minWidth: 280,
      onPressed: press,
      child: Text(
        text,
        style: TextStyle(
          color: Colors.grey[900],
          fontSize: 15,
        ),
      ),
    );

  }

CodePudding user response：

Wrap your child with a Row and add the icon as the second element of your Row's children. It will turn out something like below:

      child: Row(
        children: [
          Text(
            text,
            style: TextStyle(
              color: Colors.grey[900],
              fontSize: 15,
            ),
          ),
          Image.asset('assets/icons/my_icon.png'),
        ],
      ),

CodePudding user response：

You can use a TextButton.icon widget

And flip the label and icon (both accept a widget)

TextButton.icon(
                          icon: Text("MyText",
                            style: TextStyle(
                                fontSize: 11.0,
                                fontFamily: "Raleway"
                            ),
                          ),
                          label: Image.asset('assets/myImage.png', width: 20.0,height: 20.0,),
                          style: ButtonStyle(
                                    // backgroundColor:
                                    //     MaterialStateProperty.all(Colors.green.shade200),
                                    overlayColor: MaterialStateProperty.all(Colors.green),
                                    side: MaterialStateProperty.resolveWith((states) {
                                      return BorderSide(color: Colors.grey, width: 1);
                                    })),
                        )

CodePudding user response：

Inside the TextButton, I manage to add a row that contains icon and text

TextButton(
        onPressed: (){},
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Icon(
              Icons.arrow_back_ios,
              color: Themes.primaryColor,
            ),
            Text(
              'Back',
              style: TextStyle(
                fontSize: 17,
                color: Themes.primaryColor,
              ),
            ),
          ],
        ),
      ),