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

Question

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.

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

Theft

so, show us what you tried so far – Hauptmann

I used FlatButton.icon. but here that image comes to the right side only. – Theft

show text after icon: FlatButton.icon( icon: Icon(Icons.call), label: Text( 'Call Me', style: Theme.of(context).textTheme.headline3, ), onPressed: () {}, ), – Conjunctiva

Answer 1

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

Hauptmann

When using Row as a FlatButton's child, the button always tries to expand horizonally, which can be annoying. As per FlatButton.icon source code, you can use mainAxisSize: MainAxisSize.min inside Row to prevent it from expanding. – Slipstream

Answer 2

Just flip them. (lable<->icon) since they both accept any Widget.

child: TextButton.icon(
        style: TextButton.styleFrom(
          backgroundColor: Color(0xFF226597),
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
            side: BorderSide(
                style: BorderStyle.solid, width: 1.0, color: Colors.black),
          ),
        ),
        icon: Text(
          "Add Note",
          style: TextStyle(fontSize: 11.0, fontFamily: "Raleway"),
        ),
        label: Image.asset(
          "images/notesicon.png",
          width: 20.0,
          height: 20.0,
        ),
        onPressed: () {},
      ),

-- Edit:

For the new Flutter versions (after May 2021)

FlatButton got deprecated, so it is better to use TextButton or ElevatedButton instead.

Hopple

Wow, thank you, swapping the direction of icon and text really works... – Mosa

Upvoted for thinking outside the box! – Tanatanach

This solution works, but note that the text may no longer wrap properly. (I was testing my app with a very large accessibility font size, and the text was truncated, rather than wrapping. Putting the text back in label made the text wrap properly again.) – Turnkey

good idea. good think, good approach. – Collbaith

Answer 3

Try below code:

FlatButton(
   padding: EdgeInsets.all(10.0),
   child: Row(
   children: < Widget > [
     Text("Make a Note"),
     Icon(Icons.note),
   ],
 ),
)

Perrotta

Answer 4

child: FlatButton.icon(
 icon:  Text("Add Note",
    style: TextStyle(
       fontSize: 11.0,
       fontFamily: "Raleway"
    ),
 ),
 label: Image.asset("images/notesicon.png", width: 20.0,height: 20.0,),
 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)
  ),
),

Calondra

Answer 5

You can do something like this

 Container(
                width: 150,
                height: 100,
                    padding: EdgeInsets.all(10),
                    decoration: new BoxDecoration(
                      color: Colors.blue[400],
                      border: Border.all(color: Colors.blue[800], width: 4.0),
                      borderRadius:
                      new BorderRadius.all(Radius.circular(40.0)),
                    ),
                    child:Center(child: FlatButton(
                      onPressed: () => {},
                      padding: EdgeInsets.all(5.0),
                      child:Center(child:  Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Text("Make A Note"),
                          Icon(Icons.note_add),
                        ],
                      ),),),)),

Helvetian

Answer 6

Just wrap your OutlinedButton.icon with a Directionality widget like this: This will make the icon to be at the right.

Directionality(
  textDirection: TextDirection.rtl,
  child: OutlinedButton.icon(
  onPressed: () {},
  
 label: Text(Testing),
 icon: const Icon(Icons.cancel,color:Colors.green,))),

   

Nettie

Answer 7

You can use this widget to create an independent button with action. and some necessary UI changes.

      Widget btnChooseFromDevice() {
        return Container(
          height: 56.0,
          width: MediaQuery.of(context).size.width,
          child: FlatButton(
            child: Row(
              children: <Widget>[
                SizedBox(width: 20.0,),
                Text(
                  'Choose from Device',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Righteous',
                    fontWeight: FontWeight.bold,
                  ),
                 Container(
                  width: 36,
                  height: 36,
                  child: Image.asset("assets/images/file.png"),
                ),
                ),

              ],
            ),
            textColor: Colors.white,
            shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {
              print('button pressed');
    //          getImage();
            },
          ),
        );
      }

Shrinkage

Answer 8

Container(
        decoration: new BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.blue, width: 1.0),
          borderRadius: new BorderRadius.all(Radius.circular(3.0)),
        ),
        width: double.infinity,
        child: FlatButton(
          padding: EdgeInsets.all(8.0),
          onPressed: () {},
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text("Add a Note"),
              Icon(
                Icons.note_add,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),[If you want Flatbutton like this you can use this following code][1]

Chronic

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Vassaux

Answer 9

Example with text and icon on right side and custom size space between icon and text. Also added possibility to add border radius, border size and change padding.

TextButton(
  onPressed: () => _myOnPressTestMethod(),
  child: Row(
    children: <Widget>[
      Expanded(child: Text("Test"),),
      SizedBox(width: 16),
      Icon(Icons.arrow_drop_down, size: 40,)
    ],
  ),
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.only(left: 16, top: 10, bottom: 10),
    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(8.0)),
    side: BorderSide(width: 1.0,),
  ),
),

Runck

Answer 10

Just wrap your button in the Directionality Widget.

Directionality(
  textDirection: TextDirection.ltr,
  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"
    ),
  ),
)

It will move the image to the right side in your button.

Overissue

Answer 11

Now you can add this property to the button (ElevatedButton for example, because FlatButton has been deprecated), which places the icon at the end of the button:

iconAlignment: IconAlignment.end,

Transilluminate

Answer 12

You can try this one out.

FlatButton(
    padding: EdgeInsets.fromLRTB(8.0, 8.0, 8.0, 8.0),
        child: Row(
            children: < Widget > [
            Text("Add a Note"),
            Icon(Icons.note_add),
         ],
    ),
)

Marbut