{"id":2109,"date":"2022-04-07T19:26:52","date_gmt":"2022-04-07T19:26:52","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2109"},"modified":"2022-04-07T19:26:52","modified_gmt":"2022-04-07T19:26:52","slug":"flutter-buttons","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/flutter-buttons\/","title":{"rendered":"Flutter Buttons"},"content":{"rendered":"\n<p>Buttons are the graphical control element that&nbsp;<strong>provides a user to trigger an event<\/strong>&nbsp;such as taking actions, making choices, searching things, and many more. They can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc.<\/p>\n\n\n\n<p>Buttons are the Flutter widgets, which is a part of the material design library. Flutter provides several types of buttons that have different shapes, styles, and features.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Features of Buttons<\/h2>\n\n\n\n<p>The standard features of a button in Flutter are given below:<\/p>\n\n\n\n<ol><li>We can easily apply themes on buttons, shapes, color, animation, and behavior.<\/li><li>We can also theme icons and text inside the button.<\/li><li>Buttons can be composed of different child widgets for different characteristics.<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Types of Flutter Buttons<\/h2>\n\n\n\n<p>Following are the different types of button available in\u00a0Flutter:<\/p>\n\n\n\n<ul><li>Flat Button<\/li><li>Raised Button<\/li><li>Floating Button<\/li><li>Drop Down Button<\/li><li>Icon Button<\/li><li>Inkwell Button<\/li><li>PopupMenu Button<\/li><li>Outline Button<\/li><\/ul>\n\n\n\n<p>Let us discuss each button in detail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Flat Button<\/h3>\n\n\n\n<p>It is a&nbsp;<strong>text label button<\/strong>&nbsp;that does not have much decoration and displayed&nbsp;<strong>without any elevation<\/strong>. The flat button has two required properties that are:&nbsp;<strong>child and onPressed()<\/strong>. It is mostly used in toolbars, dialogs, or inline with other content. By default, the flat button has no color, and its text is black. But, we can use color to the button and text using&nbsp;<strong>color and textColor<\/strong>&nbsp;attributes, respectively.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MyApp());  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n          appBar: AppBar(  \n            title: Text('Flutter FlatButton Example'),  \n          ),  \n          body: Center(child: Column(children: &lt;Widget>&#91;  \n            Container(  \n              margin: EdgeInsets.all(25),  \n              child: FlatButton(  \n                child: Text('SignUp', style: TextStyle(fontSize: 20.0),),  \n                onPressed: () {},  \n              ),  \n            ),  \n            Container(  \n              margin: EdgeInsets.all(25),  \n              child: FlatButton(  \n                child: Text('LogIn', style: TextStyle(fontSize: 20.0),),  \n                color: Colors.blueAccent,  \n                textColor: Colors.white,  \n                onPressed: () {},  \n              ),  \n            ),  \n          ]  \n         ))  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>If we run this app, we will see the following screen:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Raised Button<\/h3>\n\n\n\n<p>It is a button, which is based on the material widget and has a&nbsp;<strong>rectangular body<\/strong>. It is similar to a flat button, but it&nbsp;<strong>has an elevation<\/strong>&nbsp;that will increases when the button is pressed. It adds dimension to the UI along Z-axis. It has several properties like text color, shape, padding, button color, the color of a button when disabled, animation time, elevation, etc.<\/p>\n\n\n\n<p>This button has&nbsp;<strong>two callback functions<\/strong>.<\/p>\n\n\n\n<p><strong>onPressed():<\/strong>&nbsp;It is triggered when the button is pressed.<\/p>\n\n\n\n<p><strong>onLongPress():<\/strong>&nbsp;It is triggered when the button is long pressed.<\/p>\n\n\n\n<p>It is to note that this button is in a&nbsp;<strong>disabled state<\/strong>&nbsp;if onPressed() and onLongPressed() callbacks are not specified.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MyApp());  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  String msg = 'Flutter RaisedButton Example';  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n          appBar: AppBar(  \n            title: Text('Flutter RaisedButton Example'),  \n          ),  \n        body: Container(  \n          child: Center(  \n            child: Column(  \n              mainAxisAlignment: MainAxisAlignment.center,  \n              children: &#91;  \n                Text(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),),  \n                RaisedButton(  \n                  child: Text(\"Click Here\", style: TextStyle(fontSize: 20),),  \n                  onPressed: _changeText,  \n                  color: Colors.red,  \n                  textColor: Colors.yellow,  \n                  padding: EdgeInsets.all(8.0),  \n                  splashColor: Colors.grey,  \n                )  \n              ],  \n            ),  \n          ),  \n        ),  \n      ),  \n    );  \n  }  \n  _changeText() {  \n    setState(() {  \n      if (msg.startsWith('F')) {  \n        msg = 'We have learned FlutterRaised button example.';  \n      } else {  \n        msg = 'Flutter RaisedButton Example';  \n      }  \n    });  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>When we run this example, it will give the below screenshot. If we click on the &#8220;<strong>Click Here<\/strong>&#8221; button, it will change the text message. Show the second screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons2.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons3.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Floating Action Button<\/h3>\n\n\n\n<p>A FAB button is a&nbsp;<strong>circular icon button<\/strong>&nbsp;that triggers the primary action in our application. It is the most used button in today&#8217;s applications. We can use this button for adding, refreshing, or sharing the content. Flutter suggests using at most one FAB button per screen. There are two types of Floating Action Button:<\/p>\n\n\n\n<p><strong>FloatingActionButton:<\/strong>&nbsp;It creates a simple circular floating button with a child widget inside it. It must have a child parameter to display a widget.<\/p>\n\n\n\n<p><strong>FloatingActionButton.extended:<\/strong>&nbsp;It creates a wide floating button along with an icon and a label inside it. Instead of a child, it uses labels and icon parameters.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MyApp());  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(home: Scaffold(  \n      appBar: AppBar(  \n        title: Text(\"FAB Button Example\"),  \n        backgroundColor: Colors.blue,  \n        actions: &lt;Widget>&#91;  \n          IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}),  \n          IconButton(icon: Icon(Icons.account_circle), onPressed: () => {})  \n        ],  \n      ),  \n      floatingActionButton: FloatingActionButton(  \n        child: Icon(Icons.navigation),  \n        backgroundColor: Colors.green,  \n        foregroundColor: Colors.white,  \n        onPressed: () => {},  \n      ),  \n      \/*floatingActionButton:FloatingActionButton.extended(  \n        onPressed: () {},  \n        icon: Icon(Icons.save),  \n        label: Text(\"Save\"),  \n      ), *\/  \n    ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. The second image is an output of the&nbsp;<strong>FAB.extended<\/strong>&nbsp;button. Its coding can be seen in the above code&#8217;s comment section.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons4.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons5.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. DropDown Button<\/h3>\n\n\n\n<p>A drop-down button is used to create a nice overlay on the screen that allows the user to select any item from multiple options. Flutter allows a simple way to implement a drop-down box or drop-down button. This button shows the currently selected item and an arrow that opens a menu to select an item from multiple options.<\/p>\n\n\n\n<p>Flutter provides a&nbsp;<strong>DropdownButton widget<\/strong>&nbsp;to implement a drop-down list. We can place it anywhere in our app.<\/p>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MaterialApp(  \n  home: MyApp(),  \n));  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  List&lt;ListItem> _dropdownItems = &#91;  \n    ListItem(1, \"GeeksforGeeks\"),  \n    ListItem(2, \"Javatpoint\"),  \n    ListItem(3, \"tutorialandexample\"),  \n    ListItem(4, \"guru99\")  \n  ];  \n  \n  List&lt;DropdownMenuItem&lt;ListItem>> _dropdownMenuItems;  \n  ListItem _itemSelected;  \n  \n  void initState() {  \n    super.initState();  \n    _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);  \n    _itemSelected = _dropdownMenuItems&#91;1].value;  \n  }  \n  \n  List&lt;DropdownMenuItem&lt;ListItem>> buildDropDownMenuItems(List listItems) {  \n    List&lt;DropdownMenuItem&lt;ListItem>> items = List();  \n    for (ListItem listItem in listItems) {  \n      items.add(  \n        DropdownMenuItem(  \n          child: Text(listItem.name),  \n          value: listItem,  \n        ),  \n      );  \n    }  \n    return items;  \n  }  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text(\"DropDown Button Example\"),  \n      ),  \n      body: Column(  \n        children: &lt;Widget>&#91;  \n          Padding(  \n            padding: const EdgeInsets.all(10.0),  \n            child: Container(  \n              padding: const EdgeInsets.all(5.0),  \n              decoration: BoxDecoration(  \n                  color: Colors.greenAccent,  \n                  border: Border.all()),  \n              child: DropdownButtonHideUnderline(  \n                child: DropdownButton(  \n                    value: _itemSelected,  \n                    items: _dropdownMenuItems,  \n                    onChanged: (value) {  \n                      setState(() {  \n                        _itemSelected = value;  \n                      });  \n                    }),  \n              ),  \n            ),  \n          ),  \n          Text(\"We have selected ${_itemSelected.name}\"),  \n        ],  \n      ),  \n    );  \n  }  \n}  \n  \nclass ListItem {  \n  int value;  \n  String name;  \n  \n  ListItem(this.value, this.name);  \n} <\/code><\/pre>\n\n\n\n<p><strong>Output<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. The second image is an output of the list contains in the drop drown button.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons6.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons7.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Icon Button<\/h3>\n\n\n\n<p>An IconButton is a&nbsp;<strong>picture printed<\/strong>&nbsp;on the Material widget. It is a useful widget that gives the Flutter UI a material design feel. We can also customize the look and feel of this button. In simple terms, it is an icon that reacts when the user will touch it.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        appBar: AppBar(  \n          title: Text(\"Icon Button Example\"),  \n        ),  \n        body: Center(  \n          child: MyStatefulWidget(),  \n        ),  \n      ),  \n    );  \n  }  \n}  \ndouble _speakervolume = 0.0;  \n  \nclass MyStatefulWidget extends StatefulWidget {  \n  MyStatefulWidget({Key key}) : super(key: key);  \n  \n  @override  \n  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();  \n}  \n  \nclass _MyStatefulWidgetState extends State&lt;MyStatefulWidget> {  \n  Widget build(BuildContext context) {  \n    return Column(  \n      mainAxisSize: MainAxisSize.min,  \n      children: &lt;Widget>&#91;  \n        IconButton(  \n          icon: Icon(Icons.volume_up),  \n          iconSize: 50,  \n          color: Colors.brown,  \n          tooltip: 'Increase volume by 5',  \n          onPressed: () {  \n            setState(() {  \n              _speakervolume += 5;  \n            });  \n          },  \n        ),  \n        Text('Speaker Volume: $_speakervolume')  \n      ],  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. When we press the&nbsp;<strong>volume button<\/strong>, it will always increase by 5.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons8.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">6. Inkwell Button<\/h3>\n\n\n\n<p>InkWell button is a material design concept, which is used for&nbsp;<strong>touch response<\/strong>. This widget comes under the Material widget where the ink reactions are actually painted. It creates the app UI interactive by adding gesture feedback. It is mainly used for adding&nbsp;<strong>splash ripple effect<\/strong>.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  int _volume = 0;  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        appBar: AppBar(  \n          title: Text('InkWell Button Example'),  \n        ),  \n        body: Center(  \n          child: new Column(  \n            mainAxisAlignment: MainAxisAlignment.center,  \n            children: &lt;Widget>&#91;  \n              InkWell(  \n                splashColor: Colors.green,  \n                highlightColor: Colors.blue,  \n                child: Icon(Icons.ring_volume, size: 50),  \n                onTap: () {  \n                  setState(() {  \n                    _volume += 2;  \n                  });  \n                },  \n              ),  \n              Text (  \n                  _volume.toString(),  \n                  style: TextStyle(fontSize: 50)  \n              ),  \n            ],  \n          ),  \n        ),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. Every time we press the ring volume button, it will increase the volume by 2.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons9.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. PopupMenu Button<\/h3>\n\n\n\n<p>It is a button that&nbsp;<strong>displays the menu<\/strong>&nbsp;when it is pressed and then calls the&nbsp;<strong>onSelected<\/strong>&nbsp;method the menu is dismissed. It is because the item from the multiple options is selected. This button contains a text and an image. It will mainly use with&nbsp;<strong>Settings<\/strong>&nbsp;menu to list all options. It helps in making a great user experience.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() { runApp(MyApp());}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  Choice _selectedOption = choices&#91;0];  \n  \n  void _select(Choice choice) {  \n    setState(() {  \n      _selectedOption = choice;  \n    });  \n  }  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        appBar: AppBar(  \n          title: const Text('PopupMenu Button Example'),  \n          actions: &lt;Widget>&#91;  \n            PopupMenuButton&lt;Choice>(  \n              onSelected: _select,  \n              itemBuilder: (BuildContext context) {  \n                return choices.skip(0).map((Choice choice) {  \n                  return PopupMenuItem&lt;Choice>(  \n                    value: choice,  \n                    child: Text(choice.name),  \n                  );  \n                }).toList();  \n              },  \n            ),  \n          ],  \n        ),  \n        body: Padding(  \n          padding: const EdgeInsets.all(10.0),  \n          child: ChoiceCard(choice: _selectedOption),  \n        ),  \n      ),  \n    );  \n  }  \n}  \n  \nclass Choice {  \n  const Choice({this.name, this.icon});  \n  final String name;  \n  final IconData icon;  \n}  \n  \nconst List&lt;Choice> choices = const &lt;Choice>&#91;  \n  const Choice(name: 'Wi-Fi', icon: Icons.wifi),  \n  const Choice(name: 'Bluetooth', icon: Icons.bluetooth),  \n  const Choice(name: 'Battery', icon: Icons.battery_alert),  \n  const Choice(name: 'Storage', icon: Icons.storage),  \n];  \n  \nclass ChoiceCard extends StatelessWidget {  \n  const ChoiceCard({Key key, this.choice}) : super(key: key);  \n  \n  final Choice choice;  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    final TextStyle textStyle = Theme.of(context).textTheme.headline;  \n    return Card(  \n      color: Colors.greenAccent,  \n      child: Center(  \n        child: Column(  \n          mainAxisSize: MainAxisSize.min,  \n          crossAxisAlignment: CrossAxisAlignment.center,  \n          children: &lt;Widget>&#91;  \n            Icon(choice.icon, size: 115.0, color: textStyle.color),  \n            Text(choice.name, style: textStyle),  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. When we click the&nbsp;<strong>three dots<\/strong>&nbsp;shown at the top left corner of the screen, it will pop up the multiple options. Here, we can select any option, and it will keep it in the card, as shown in the second image.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons10.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons11.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">8. Outline Button<\/h3>\n\n\n\n<p>It is similar to the flat button, but it contains a thin grey rounded rectangle border. Its outline border is defined by the shape attribute.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() {  \n  runApp(MyApp());  \n}  \n  \nclass MyApp extends StatefulWidget {  \n  @override  \n  _MyAppState createState() => _MyAppState();  \n}  \n  \nclass _MyAppState extends State&lt;MyApp> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n          appBar: AppBar(  \n            title: Text('Outline Button Example'),  \n          ),  \n          body: Center(child: Column(children: &lt;Widget>&#91;  \n            Container(  \n              margin: EdgeInsets.all(25),  \n              child: OutlineButton(  \n                child: Text(\"Outline Button\", style: TextStyle(fontSize: 20.0),),  \n                highlightedBorderColor: Colors.red,  \n                shape: RoundedRectangleBorder(  \n                    borderRadius: BorderRadius.circular(15)),  \n                onPressed: () {},  \n              ),  \n            ),  \n            Container(  \n              margin: EdgeInsets.all(25),  \n              child: FlatButton(  \n                child: Text('Flat Button', style: TextStyle(fontSize: 20.0),),  \n                color: Colors.blueAccent,  \n                textColor: Colors.white,  \n                onPressed: () {},  \n              ),  \n            ),  \n          ]  \n          ))  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons12.png\" alt=\"Flutter Buttons\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Button Bar<\/h3>\n\n\n\n<p>Flutter provides the flexibility to&nbsp;<strong>arrange the buttons in a bar or a row<\/strong>. ButtonBar widget contains three properties:&nbsp;<strong>alignment, children, and mainAxisSize<\/strong>.<\/p>\n\n\n\n<ul><li>Alignment is used to present the aligning option to the entire button bar widget.<\/li><li>Children attribute is used to take the number of buttons in a bar.<\/li><li>mainAxisSize attribute is used to provide the horizontal space for the button bar.<\/li><\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>Open the\u00a0<strong>main.dart<\/strong>\u00a0file and replace it with the below code.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-buttons#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import\u00a0'package:flutter\/material.dart';\u00a0\u00a0\n\u00a0\u00a0\nvoid\u00a0main()\u00a0{\u00a0\u00a0\n\u00a0\u00a0runApp(MaterialApp(\u00a0home:\u00a0MyApp(),));\u00a0\u00a0\n}\u00a0\u00a0\n\u00a0\u00a0\nclass\u00a0MyApp\u00a0extends\u00a0StatefulWidget\u00a0{\u00a0\u00a0\n\u00a0\u00a0@override\u00a0\u00a0\n\u00a0\u00a0_State\u00a0createState()\u00a0=<strong>><\/strong>\u00a0_State();\u00a0\u00a0\n}\u00a0\u00a0\n\u00a0\u00a0\nclass\u00a0_State\u00a0extends\u00a0State<strong>&lt;MyApp><\/strong>\u00a0{\u00a0\u00a0\n\u00a0\u00a0@override\u00a0\u00a0\n\u00a0\u00a0Widget\u00a0build(BuildContext\u00a0context)\u00a0{\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0return\u00a0Scaffold(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0appBar:\u00a0AppBar(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title:\u00a0Text('Flutter\u00a0ButtonBar\u00a0Example'),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0body:\u00a0Padding(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding:\u00a0EdgeInsets.all(10),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child:\u00a0Column(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children:\u00a0<strong>&lt;Widget><\/strong>&#91;\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Padding(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding:\u00a0EdgeInsets.all(15),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child:\u00a0new\u00a0ButtonBar(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mainAxisSize:\u00a0MainAxisSize.min,\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0children:\u00a0<strong>&lt;Widget><\/strong>&#91;\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0RaisedButton(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child:\u00a0new\u00a0Text('Javatpoint'),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color:\u00a0Colors.lightGreen,\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPressed:\u00a0()\u00a0{\/**\u00a0*\/},\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlatButton(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child:\u00a0Text('Flutter'),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color:\u00a0Colors.lightGreen,\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPressed:\u00a0()\u00a0{\/**\u00a0*\/},\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0FlatButton(\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0child:\u00a0Text('MySQL'),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color:\u00a0Colors.lightGreen,\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onPressed:\u00a0()\u00a0{\/**\u00a0*\/},\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0],\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0);\u00a0\u00a0\n\u00a0\u00a0}\u00a0\u00a0\n}\u00a0\u00a0<\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>Run the application in android emulator, and it will give the UI similar to the following screenshot. Here, we can see that the three buttons are placed in a horizontal bar or row.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-buttons13.png\" alt=\"Flutter Buttons\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Buttons are the graphical control element that&nbsp;provides a user to trigger an event&nbsp;such as taking actions, making choices, searching things, and many more. They can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc. Buttons are the Flutter widgets, which is a part of the material design library. Flutter provides several types [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[585],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2109"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2109"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2109\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}