Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
      ),
    ),
like image 329
Deshani Ranasingha Avatar asked May 31 '19 05:05

Deshani Ranasingha


2 Answers

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)
  ),
),
like image 90
prakhar tomar Avatar answered Oct 22 '22 14:10

prakhar tomar


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)),
            ),
          ), 
like image 22
diegoveloper Avatar answered Oct 22 '22 14:10

diegoveloper