How to left align the OutlineButton icon in Flutter How to left align the OutlineButton icon in Flutter flutter flutter

How to left align the OutlineButton icon in Flutter


There are many ways you can do it, but it's not possible using the factory constructor that you mentioned OutlineButton.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 OutlineButton widget and pass a Stack/Row as a child, check this sample

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


There are common approaches you can try, I have implemented this :

   OutlineButton(        onPressed: () => null,        child: Stack(          alignment: Alignment.centerLeft,          children: <Widget>[            Icon(Icons.save_alt_rounded),            Row(              mainAxisAlignment: MainAxisAlignment.center,              children: <Widget>[                Text('Title'),              ],            ),          ],        ),        highlightedBorderColor: Colors.orange,        color: Colors.green,        borderSide: new BorderSide(color: Colors.green),        shape: new RoundedRectangleBorder(            borderRadius: new BorderRadius.circular(5.0)        )    );

enter image description here


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