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

Solution 1

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

Solution 2

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