简体   繁体   中英

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

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

You can achieve that using RaisedButton.icon() widget..

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() . 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.

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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