简体   繁体   English

带有图标和文本的按钮 position 左

[英]Button with icon and text position left

I use flutter to do RaisedButton with icon and the the icon and text I want change position to left.我使用 flutter 做带有图标的RaisedButton以及我想要将 position 更改为左侧的图标和文本。 How to do it?怎么做? This is my code for button.这是我的按钮代码。

I want do it like in the image:我想像图片中那样做:

在此处输入图像描述

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: () => {},
                    ),
                  ),
                ),

in the Raised Button Widget you can put a Row() or a Column() as the child , so it can be easily done like this,在 Raised Button 小部件中,您可以将Row()Column()作为child ,因此可以像这样轻松完成,

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

You can achieve that using RaisedButton.icon() widget..您可以使用RaisedButton.icon()小部件来实现这一点。

You can get more information from documentation .您可以从文档中获得更多信息。

Here's a minimal example for you..这是给你的一个最小的例子..

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

Try this尝试这个

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

What you can do you can use Directionality widget in flutter with TextButton.icon() .您可以做什么,您可以使用带有TextButton.icon()的 flutter 中的方向性小部件。 Here is the Code.这是代码。

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

And here is the View.这是视图。

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM