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

尝试以下代码：

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

Answer 2

在这里，您已固定代码，不要使用ObjectMapper objectMapper = new ObjectMapper(); objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(yourObject);，而要使用FlatButton.icon构造函数并添加自定义子项FlatButton。

Row

Answer 3

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 4

您可以这样做

 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 5

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

      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 6

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

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 7

你可以试试这个。

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

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

7 个答案: