帶有圖標和文本的按鈕 position 左

Question

我使用 flutter 做帶有圖標的RaisedButton以及我想要將 position 更改為左側的圖標和文本。 怎么做？ 這是我的按鈕代碼。

我想像圖片中那樣做：

Card(
                  child: SizedBox(
                    width: double.infinity,
                    height: 60,
                    child: RaisedButton.icon(
                      icon: Icon(Icons.home,
                          size: 40, color: Theme.of(context).primaryColor),
                      color: Colors.white,
                      textColor: Theme.of(context).primaryColor,
                      label: const Text('Electrical and Wiring',
                          style: TextStyle(
                              fontWeight: FontWeight.normal, fontSize: 15)),
                      onPressed: () => {},
                    ),
                  ),
                ),

Answer 1

在 Raised Button 小部件中，您可以將Row()或Column()作為child ，因此可以像這樣輕松完成，

RaisedButton(
    child: Row(
      children: <Widget>[
        Icon(Icons.call),
        Text('Your Text'),
      ],
    ),
    onPressed: (){
    //Actions
  }),

Answer 2

您可以使用RaisedButton.icon()小部件來實現這一點。

您可以從文檔中獲得更多信息。

這是給你的一個最小的例子..

RaisedButton.icon(onPressed: null, icon: null, label: null);

Answer 3

嘗試這個

GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {},
        child: Card(
          child: SizedBox(
              width: double.infinity,
              height: 60,
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8),
                    child: Icon(Icons.home,
                        size: 40, color: Theme.of(context).primaryColor),
                  ),
                  Text('Electrical and Wiring',
                      style: TextStyle(
                          fontWeight: FontWeight.normal, fontSize: 15)),
                ],
              )),
        ),
      ),

Answer 4

您可以做什么，您可以使用帶有TextButton.icon()的 flutter 中的方向性小部件。 這是代碼。

 Directionality(
            textDirection: TextDirection.rtl,
            child: TextButton.icon(
              onPressed: null,
              icon: Icon(
                CupertinoIcons.ellipsis_circle_fill,
                color: Colors.green,
              ),
              label: Text(
                "Business Name",
                style: Theme.of(context).textTheme.subtitle1,
              ),
            ),
          ),

這是視圖。