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

Deshani Ranasingha picture Deshani Ranasingha · May 31, 2019 · Viewed 7.6k times · Source

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)
      ),
    ),

Answer

diegoveloper picture diegoveloper · May 31, 2019

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)),
            ),
          ),