Want to add round button with text and icon in flutter? You can achieve that by using a FlatButton that contains a Column (for showing a text below the icon) or a Row (for text next to the icon), and then having an Icon Widget and a Text widget as children.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | class MyPage extends StatelessWidget { @override Widget build(BuildContext context) => Scaffold( appBar: AppBar( title: Text("Hello world"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( onPressed: () => {}, color: Colors.orange, padding: EdgeInsets.all(10.0), child: Column( // Replace with a Row for horizontal icon + text children: <Widget>[ Icon(Icons.add), Text("Add") ], ), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () => {}, tooltip: 'Increment', child: Icon(Icons.add), ), ); } |
It would look like this:
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
