{"id":1041,"date":"2023-09-27T05:53:33","date_gmt":"2023-09-27T05:53:33","guid":{"rendered":"https:\/\/www.devopssupport.in\/blog\/?p=1041"},"modified":"2023-09-29T06:18:39","modified_gmt":"2023-09-29T06:18:39","slug":"some-flutter-button-types-with-examples","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/some-flutter-button-types-with-examples\/","title":{"rendered":"Some Flutter Button Types with Examples"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

A button in Flutter can be composed of either an icon, text, or both. When a user interacts with it, it triggers a click event that performs a specific action. Flutter offers a variety of button types, each suited for different purposes. In this article, we will explore how to utilize these buttons effectively in your Flutter projects. You can go through each button type and bookmark this article for future reference. Remember, Flutter is built on widgets, and buttons are no exception. In this discussion, we will focus on six primary types of buttons.<\/p>\n\n\n\n

When we are considering buttons from Flutter\u2019s point of view, Here are some points should consider.<\/p>\n\n\n\n

A button has consisted of a text or an icon
We can design a button UI using different shapes, colours, animations and behaviours.
Button also can contain it\u2019s child widgets for different usages.<\/p>\n\n\n\n


What are the Button Types in Flutter?
<\/strong>Flat Button
Raised Button
Floating Button
Drop Down Button
Icon Button
PopupMenu Button<\/p>\n\n\n\n


Flat Button
<\/strong>This is the most common type. With not many customizations, It has consisted of a simple text. There have two essential properties, child and onPressed(). Then you can decorate it using its attributes(colour, text size etc.).<\/p>\n\n\n\n

import ‘package:flutter\/material.dart’;<\/p>\n\n\n\n

void main() {
runApp(MyApp());
}<\/p>\n\n\n\n

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}<\/p>\n\n\n\n

class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Flutter Buttons – FlatButton’),
),
body: Center(
child: Column(children: [
Container(
margin: EdgeInsets.all(25),
child: FlatButton(
child: Text(
‘Button 1’,
style: TextStyle(fontSize: 20.0),
),
onPressed: () {},
),
),
Container(
margin: EdgeInsets.all(25),
child: FlatButton(
child: Text(
‘Button 2’,
style: TextStyle(fontSize: 20.0),
),
color: Colors.cyan,
textColor: Colors.black,
onPressed: () {},
),
),
]))),
);
}
}<\/p>\n\n\n\n

Raised Button<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


<\/strong>It\u2019s also like the Flat button, but It has an elevation which is changing the size of the button on the z-axis when pressing it. In Flat buttons, there has no elevation feature. Also, there have two callback functions(onPressed() and onLongPress()). You can customize the attributes as in Flat buttons.<\/p>\n\n\n\n

import 'package:flutter\/material.dart';\n\nvoid main() {\nrunApp(MyApp());\n}\n\nclass MyApp extends StatefulWidget {\n@override\n_MyAppState createState() => _MyAppState();\n}\n\nclass _MyAppState extends State {\nString msg = 'Flutter - Raised Button';\n@override\nWidget build(BuildContext context) {\nreturn MaterialApp(\nhome: Scaffold(\nappBar: AppBar(\ntitle: Text('Flutter - Raised Button'),\n),\nbody: Container(\nchild: Center(\nchild: Column(\nmainAxisAlignment: MainAxisAlignment.center,\nchildren: [\nText(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.normal),),\nRaisedButton(\nchild: Text(\"Click Here\", style: TextStyle(fontSize: 20),),\nonPressed: _changeText,\ncolor: Colors.red,\ntextColor: Colors.white,\npadding: EdgeInsets.all(8.0),\nsplashColor: Colors.grey,\n)\n],\n),\n),\n),\n),\n);\n}\n_changeText() {\nsetState(() {\nif (msg == 'Flutter - Raised Button') {\nmsg = 'Changed the Text';\n} else {\nmsg = 'Flutter - Raised Button';\n}\n});\n}\n}\n<\/code><\/pre>\n\n\n\n
Floating Action Button<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/strong>This is a special kind of button which contains under the Scaffold class. This is placed and fixed at the right bottom corner of the screen. We can use it for sharing, refreshing, adding the content.<\/p>\n\n\n\n
There have two types of Floating Action Buttons.<\/p>\n\n\n\n
import 'package:flutter\/material.dart';\n\nvoid main() {\nrunApp(MyApp());\n}\n\nclass MyApp extends StatefulWidget {\n@override\n_MyAppState createState() => _MyAppState();\n}\n\nclass _MyAppState extends State {\n@override\nWidget build(BuildContext context) {\nreturn MaterialApp(home: Scaffold(\nappBar: AppBar(\ntitle: Text(\"Flutter Floating Action Button\"),\nbackgroundColor: Colors.blue,\n),\n\/\/ floatingActionButton: FloatingActionButton(\n\/\/ child: Icon(Icons.share),\n\/\/ backgroundColor: Colors.blueAccent,\n\/\/ foregroundColor: Colors.white,\n\/\/ onPressed: () => {},\n\/\/ ),\nfloatingActionButton:FloatingActionButton.extended(\nonPressed: () {},\nicon: Icon(Icons.account_circle),\nlabel: Text(\"Profile\"),\n),\n),\n);\n}\n}<\/code><\/pre>\n\n\n\n
Drop Down Button<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/strong>When you want to select an option from a few options, We can use this widget. I have described the drop-down list previously in detail.<\/p>\n\n\n\n
Icon Button<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/strong>This is another type of button which is consisting of an icon than text. When you touch on the icon it will respond according to its functionality. I give you one example of a volume button icon.<\/p>\n\n\n\n
import 'package:flutter\/material.dart';\r\n\r\nvoid main() => runApp(MyApp());\r\n\r\nclass MyApp extends StatelessWidget {\r\n@override\r\nWidget build(BuildContext context) {\r\nreturn MaterialApp(\r\nhome: Scaffold(\r\nappBar: AppBar(\r\ntitle: Text(\"Flutter - Icon Button\"),\r\n),\r\nbody: Center(\r\nchild: MyStatefulWidget(),\r\n),\r\n),\r\n);\r\n}\r\n}\r\ndouble _speakervolume = 0.0;\r\n\r\nclass MyStatefulWidget extends StatefulWidget {\r\nMyStatefulWidget({Key key}) : super(key: key);\r\n\r\n@override\r\n_MyStatefulWidgetState createState() => _MyStatefulWidgetState();\r\n}\r\n\r\nclass _MyStatefulWidgetState extends State {\r\nWidget build(BuildContext context) {\r\nreturn Column(\r\nmainAxisSize: MainAxisSize.min,\r\nchildren: IconButton( icon: Icon(Icons.volume_up), iconSize: 50, color: Colors.brown, tooltip: 'Increase volume by 5', onPressed: () { setState(() { _speakervolume += 5; }); }, ), Text('Speaker Volume: $_speakervolume') ,\r\n);\r\n}\r\n}<\/code><\/pre>\n\n\n\n
PopupMenu Button<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This button also has to select an option that is placed at the App bar. The App Bar is a component of Sccafold Class. Therefore PopupMenu is a sub-component of the Scaffold Widget. When the user press on it, It will call the onSelected method and the menu is dismissed. It will use with settings options mostly.<\/p>\n\n\n\n
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 {\nChoice _selectedOption = choices[0];\n\nvoid _select(Choice choice) {\nsetState(() {\n_selectedOption = choice;\n});\n}\n@override\nWidget build(BuildContext context) {\nreturn MaterialApp(\nhome: Scaffold(\nappBar: AppBar(\ntitle: const Text('PopupMenu Button Example'),\nactions: [\nPopupMenuButton(\nonSelected: _select,\nitemBuilder: (BuildContext context) {\nreturn choices.skip(0).map((Choice choice) {\nreturn PopupMenuItem(\nvalue: choice,\nchild: Text(choice.name),\n);\n}).toList();\n},\n),\n],\n),\nbody: Padding(\npadding: const EdgeInsets.all(10.0),\nchild: ChoiceCard(choice: _selectedOption),\n),\n),\n);\n}\n}\n\nclass Choice {\nconst Choice({this.name, this.icon});\nfinal String name;\nfinal IconData icon;\n}\n\nconst List choices = const [\nconst Choice(name: 'Wi-Fi', icon: Icons.wifi),\nconst Choice(name: 'Bluetooth', icon: Icons.bluetooth),\nconst Choice(name: 'Battery', icon: Icons.battery_alert),\nconst Choice(name: 'Storage', icon: Icons.storage),\n];\n\nclass ChoiceCard extends StatelessWidget {\nconst ChoiceCard({Key key, this.choice}) : super(key: key);\n\nfinal Choice choice;\n\n@override\nWidget build(BuildContext context) {\nfinal TextStyle textStyle = Theme.of(context).textTheme.headline;\nreturn Card(\ncolor: Colors.indigoAccent,\nchild: Center(\nchild: Column(\nmainAxisSize: MainAxisSize.min,\ncrossAxisAlignment: CrossAxisAlignment.center,\nchildren: [\nIcon(choice.icon, size: 115.0, color: textStyle.color),\nText(choice.name, style: textStyle),\n],\n),\n),\n);\n}\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
A button in Flutter can be composed of either an icon, text, or both. When a user interacts with it, it triggers a click event that performs… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1041","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=1041"}],"version-history":[{"count":1,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1041\/revisions"}],"predecessor-version":[{"id":1053,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/1041\/revisions\/1053"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=1041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=1041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}