CODEWITHSUNDEEP
flutterflutter-layoutflutter-widget
Deshani Ranasingha
Deshani Ranasingha

Reputation: 508

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

Upvotes: 12

Views: 23309

Answers (14)

prakhar tomar
prakhar tomar

Reputation: 1125

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

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

-- Edit:

For the new Flutter versions (after May 2021)

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

Upvotes: 57

Kalpesh Khandla
Kalpesh Khandla

Reputation: 746

You can make use of Directionality widget. Make the direction rtl.

Directionality(
  textDirection: TextDirection.rtl,
  child: ElevatedButton.icon(
    onPressed: () {},
    icon: Icon(
     Icons.note,
    ),
    label: Text("Make a Note"),
    ...
  ))

Upvotes: -1

Penny Liu
Penny Liu

Reputation: 17408

This sample demonstrates how to use iconAlignment to align the button icon to the end of the button.

IconAlignment

FilledButton.icon(
  onPressed: () {},
  icon: const Icon(
    Icons.note_add,
    size: 30,
  ),
  label: const Padding(
    padding: EdgeInsets.all(14),
    child: Text(
      'Add Note',
      style: TextStyle(
        fontSize: 18,
      ),
    ),
  ),
  // Align the icon to the end (right side) of the button's content
  iconAlignment: IconAlignment.end,
  style: FilledButton.styleFrom(
    side: const BorderSide(
      color: Color.fromARGB(255, 7, 56, 78),
      width: 2.0,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
    ),
    backgroundColor: const Color(0xFF226597),
    foregroundColor: Colors.white,
  ),
),

Upvotes: 1

Giulia Santoiemma
Giulia Santoiemma

Reputation: 312

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,

Upvotes: 0

Hamza Kamal
Hamza Kamal

Reputation: 9

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.

Upvotes: -1

Andris
Andris

Reputation: 4193

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

Upvotes: 0

Miriam
Miriam

Reputation: 367

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

Upvotes: 1

Anandh Krishnan
Anandh Krishnan

Reputation: 5984

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]

Upvotes: 0

Praize
Praize

Reputation: 1

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

Upvotes: -1

Ahmed Raafat
Ahmed Raafat

Reputation: 197

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

Upvotes: 2

MALIKK HABIB UR REHMAN
MALIKK HABIB UR REHMAN

Reputation: 880

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();
            },
          ),
        );
      }

Upvotes: 0

Farhana Naaz Ansari
Farhana Naaz Ansari

Reputation: 7944

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

enter image description here

Upvotes: 1

Narkhede Tushar
Narkhede Tushar

Reputation: 683

Try below code:

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

Upvotes: 8

diegoveloper
diegoveloper

Reputation: 103421

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

Upvotes: 25

Related Questions