CODEWITHSUNDEEP
flutterflutter-layout
memoadian
memoadian

Reputation: 209

Align icon to left button expanded

I have a problem with button expanded in flutter, I need align the icon to the left of the button, I made it with widget Row, because is the best way that I found. But, the text isnt centered correctly.

   SizedBox(
    width: double.infinity,
    child: RaisedButton(
    onPressed: () => {},
    color: Colors.blue,
    textColor: Colors.white,
    child: Row(
     children: <Widget>[
      Icon(Icons.send),
      Expanded(
       child: Text('Enviar', textAlign: TextAlign.center)
      )
     ],
    )
   ),
  ),

and the result is

enter image description here

Is there a better way to make a button with this style(text centered in all button not only in it's space)?

Upvotes: 0

Views: 2455

Answers (2)

Hairon Chaviano
Hairon Chaviano

Reputation: 443

The problem is with the two elements inside the Row. This code should work for you

SizedBox(
        width: double.infinity,
        child: RaisedButton(
            onPressed: () => {},
            color: Colors.blue,
            textColor: Colors.white,
            child: Stack(
              alignment: Alignment.centerLeft,
              children: <Widget>[
                Icon(Icons.send),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Enviar'),
                  ],
                ),
              ],
            )
        ),
      ),

Upvotes: 1

drogel
drogel

Reputation: 2717

There are two common approaches you can try, I have not implemented them but I am just giving you the core ideas:

  • Use a ListTile and set your Icon to the leading property, and your aligned Text to the title property. This approach might look cleaner and easier, but I suspect you might have the same problem regarding the aligned Text.
  • Use a Stack and wrap your Icon with an Align widget, setting its alignment property to fit your needs. Then, replace your Expanded with a Center widget for your Text, and you will not need the textAlign: TextAlign.center property. I think this might work better for you.

Upvotes: 2

Related Questions