Search code examples
flutterflutter-layoutflutter-widget

How to add image/icon for right side of a button?


These days I am developing flutter mobile application for the Android platform. I want to add a button with text an icon/image. That image must be the right side of the button text.

I have already attached the image here.

enter image description here

This is my code.

child: FlatButton.icon(
     icon: Image.asset("images/notesicon.png", width: 20.0,height: 20.0,),
     label: Text("Add Note",
        style: TextStyle(
           fontSize: 11.0,
           fontFamily: "Raleway"
        ),
     ),
     textColor: Colors.white,
     color: Color(0xFF226597),
     shape: OutlineInputBorder(borderSide: BorderSide(
               style: BorderStyle.solid,
               width: 1.0,
               color: Colors.black),
            borderRadius: new BorderRadius.circular(20.0)
      ),
    ),

Solution

  • Here you have your code fixed , don't use FlatButton.icon just use the FlatButton constructor and add a custom child , Row in this case.

        SizedBox(
                width: 150,
                child: FlatButton(
                  child: Row(
                    children: [
                      Text(
                        "Add Note",
                        style: TextStyle(fontSize: 11.0, fontFamily: "Raleway"),
                      ),
                      Image.asset(
                        "images/notesicon.png",
                        width: 20.0,
                        height: 20.0,
                      )
                    ],
                  ),
                  onPressed: () {},
                  textColor: Colors.white,
                  color: Color(0xFF226597),
                  shape: OutlineInputBorder(
                      borderSide: BorderSide(
                          style: BorderStyle.solid, width: 1.0, color: Colors.black),
                      borderRadius: new BorderRadius.circular(20.0)),
                ),
              ),