帶有圖標和文本的 Flutter 按鈕看起來很奇怪

Question

我正在嘗試創建一個 Flutter 應用程序，它有一個帶有文本和圖標作為標簽的按鈕，該圖標位於文本的右側。 這篇文章中描述的方法會產生一個看起來很奇怪的按鈕，它似乎擴展到應用程序的寬度，請參閱此圖像（鏈接，因為我不允許附加圖像）：

將 Row 小部件添加為子項時，按鈕變寬

我不清楚使用哪些布局小部件來調整 text+image 按鈕以格式化為純文本按鈕。

生成上述示例的代碼：

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            new RaisedButton(
              onPressed: _incrementCounter,
              child: new Row(
                children: <Widget>[
                  new Text("Button with text and icon!"),
                  new Icon(Icons.lightbulb_outline)
                ],
              ),
            ),
            new RaisedButton(
              onPressed: _incrementCounter,
              child: new Text("Button with only text")
              ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

Answer 1

Row 屬性mainAxisSize: MainAxisSize.min在這里mainAxisSize: MainAxisSize.min 。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              onPressed: () {},
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new Text('Button with text and icon!'),
                  new Icon(Icons.lightbulb_outline),
                ],
              ),
            ),
            new RaisedButton(
              onPressed: () {},
              child: new Text('Button with only text'),
            )
          ],
        ),
      ),
    );
  }

Answer 2

你可以簡單地使用這個RaisedButton.icon

簡單用法：

RaisedButton.icon(
   onPressed: () {},
   elevation: 2.0,
   shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(5.0),
   ),
   color: const Color(0xFFFFB822),
   icon: Icon(Icons.add_shopping_cart),
   label: Text("Add to Cart",
             style: TextStyle(
             fontWeight: FontWeight.w900,
    ),
  ),
)

Answer 3

非常簡單和容易...

ElevatedButton(
                style: ElevatedButton.styleFrom(
                    primary: Colors.green, elevation: 2),
                onPressed: () {},
                child: Row(
                  children: [
                    Icon(Icons.edit_outlined),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text('Edit'),
                  ],
                ),
              ),

您可以隨意更改圖標或文本顏色。 希望對你有幫助👍。