How to left align the OutlineButton icon in Flutter

Question

How to left align the OutlineButton icon in Flutter? Icon can be added as follows, but both icon and text are centered aligned in the button. Is there a way to align the icon to the left and text to the center?

return new OutlineButton.icon(
  onPressed: onPressed,
  label: new Text(title),
  icon: icon,
  highlightedBorderColor: Colors.orange,
  color: Colors.green,
  borderSide: new BorderSide(color: Colors.green),
  shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(5.0)));

diegoveloper · Accepted Answer · 2023-02-02T18:16:45.820

There are many ways you can do it, but it's not possible using the factory constructor that you mentioned OutlinedButton.icon, you can go deeper and check the source code to see how it build the widget.

You can create your own Widget to put an icon to the left and the text centered.

Also you can use the OutlinedButton widget and pass a Stack/Row as a child, check this sample

    OutlinedButton(
        onPressed: () => null,
        child: Stack(
            children: <Widget>[
                Align(
                    alignment: Alignment.centerLeft,
                    child: Icon(Icons.access_alarm)
                ),
                Align(
                    alignment: Alignment.center,
                    child: Text(
                        "Testing",
                        textAlign: TextAlign.center,
                    )
                )
            ],
        ),
        highlightedBorderColor: Colors.orange,
        color: Colors.green,
        borderSide: new BorderSide(color: Colors.green),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(5.0)
        )
    )

Typo. It's `OutlinedButton`. There's a `d` before the B – KhoPhi Feb 02 '23 at 11:10 — KhoPhi, Feb 02 '23 at 11:10

score 1 · Answer 2 · answered Jun 25 '22 at 18:36

1

You can use OutlineButton.icon, and simply wrap your Text with in Center like this:

return new OutlineButton.icon(
  onPressed: onPressed,
  label: Center(child: new Text(title)),
  icon: icon,
)

If you want the text left-aligned, this also works:

return new OutlineButton.icon(
  onPressed: onPressed,
  label: Align(alignment: Alignment.centerLeft, child: new Text(title)),
  icon: icon,
)

answered Jun 25 '22 at 18:36

Jim Flood

8,144
3
36
48

Clearly you did not read the original question. OP wants to align the icon, *not* the label text. – KhoPhi Feb 02 '23 at 10:50
@KhoPhi Clearly, I did read the original question: "How to left align the OutlineButton icon in Flutter?" OutlineButton.icon aligns the *icon*. You can align the text *separately*. – Jim Flood Mar 15 '23 at 17:30

score 0 · Answer 3 · answered Jul 06 '21 at 18:24

I Wrap Text Widget with Expanded widget.

         OutlinedButton.icon(

                      icon: Icon(
                        Icons.lock,
                        color: MyAppTheme.accentColor,
                        size: 20,
                      ),
                      label: Expanded(
                        child: Text(
                          '      Login',
                          style: TextStyle(
                              color: MyAppTheme.primaryColor,
                              fontSize: 16),
                        ),
                      ),
                      style: OutlinedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(5.0)),
                          side: BorderSide(color: MyAppTheme.primaryColor)
                      ),
                     
                    ),

This throws the exception: `Expanded(flex: 1) (typically placed directly inside a Flex widget)` — KhoPhi, Feb 02 '23 at 11:08

How to left align the OutlineButton icon in Flutter

3 Answers3

Linked