如何在按钮右侧添加图像/图标？

Question

这些天我正在开发Android平台的flutter移动应用程序。我想添加一个带有文本和图标/图像的按钮。该图像必须位于按钮文本的右侧。

我已经在此处附加了图片。

这是我的代码。

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

只需翻转它们即可。 （标签<->图标）因为它们都接受任何小部件。

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 2

这里你已经修复了你的代码，不要使用

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

您可以使用此小部件创建带有操作的独立按钮。以及一些必要的 UI 更改。

      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 7

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 8

只需使用方向性小部件包裹您的 OutlinedButton.icon，如下所示：这将使图标位于右侧。

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

   

Answer 9

示例：右侧有文本和图标，图标和文本之间有自定义大小的空间。还增加了添加边框半径、边框大小和更改填充的可能性。

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

Answer 10

你可以试试这个。

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