How to left align the OutlineButton icon in Flutter

后端 未结 2 1516
醉话见心
醉话见心 2021-02-20 12:41

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

2条回答
  •  遥遥无期
    2021-02-20 13:12

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

提交回复
热议问题