Как добавить изображение / значок для правой стороны кнопки?

Question

В эти дни я занимаюсь разработкой мобильного приложения для платформы Android. Я хочу добавить кнопку с текстом значок / изображение. Это изображение должно быть справа от текста кнопки. Я уже прикрепил изображение здесь. h ttps:https://stackru.com/images/2e927d3be78d30db42435bc8c61bf2635de1879d.png

Это мой код

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 1

Здесь у вас есть исправленный код, не используйте FlatButton.icon просто используйте FlatButton конструктор и добавить собственный дочерний элемент, Row в этом случае.

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

Answer 2

Просто переверните их. (значок <->), поскольку оба они принимают любой виджет.

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

Answer 3

Попробуйте код ниже:

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

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

Answer 5

Вы можете сделать что-то вроде этого

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

Answer 6

Просто оберните OutlinedButton.icon виджетом Directionality следующим образом: Это сделает значок справа.

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

   

Answer 7

Вы можете использовать этот виджет для создания независимой кнопки с действием. и некоторые необходимые изменения пользовательского интерфейса.

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

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]

Answer 9

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