You’ll get to understand the concept of all buttons in Flutter, as it would make you know when and the right time to use a particular type of Flutter Button Widget.
Some gestures are super easy because they’re pre-baked into certain widgets. For instance, the creators of button widgets know their sole purpose in life is to be pressed and then to do something in response to it. So all buttons come with a property called onPressed. To use it, you’ll simply point it to a function to run when the user presses it:
Product _product;
// More code here
Widget foo() {
return IconButton(
icon: Icon(Icons.delete),
onPressed: removeProduct // The callback must return void
);
}
// More code here
void removeProduct() {
// Do something to remove the _product
}
You could think of a Button as the base class for all of the other buttons. It isn’t really, but it wouldn’t hurt for you to think of all of the others as a Button with some specialties. For instance, these are all widgets that are specialized types of buttons, Check out the Flutter Button Family below;
1. Raised Button
This one is simply a Button but appears like it’s floating above the page. It has an elevation property to increase the simulated altitude above the page;
RaisedButton(
child: Text(text: "Go"),
onPressed: () => print("You swiped the raised button");
elevation: 5.0
)
2. FlatButton
These are kind of the anti-RaisedButton. They just appear completely flat. They are subtle, having simple text that don’t scream to be pressed, like an UNDO button or BACK button. Here’s an example below;
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
primaryColor: Colors.orange,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Flat Button")
),
body: Center(
child: FlatButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("Go To FlutterFix.com"),
onPressed: (){
_doSomething();
}
),
),
);
}
_doSomething(){
print("Button Clicked");
}
}
3. IconButton
The IconButton is similar to the FlatButton, but then, It takes an Icon as its child and requires an onPressed also which makes it clickable. Here’s an example;
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
primaryColor: Colors.orange,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Icon Button"),
),
body: Center(
child: IconButton(
icon: Icon(Icons.add, color: Colors.white),
onPressed: (){
_doSomething();
},
color: Colors.orange
),
),
);
}
_doSomething(){
print("Button Clicked");
}
}
4. CupertinoButton
An iOS-style button. Looks great on iPhones, but it is kind of strange to have an iOS feel on an Android device. If you use it, you must remember to add this to the top of your dart file:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
primaryColor: Colors.amber,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Cupertino Button")
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CupertinoButton(
child: Text('FlutterFix Button'),
onPressed: () {
_doSomething();
},
),
CupertinoButton.filled(
child: Text('FlutterFix Filled Button'),
onPressed: () {
_doSomething();
},
),
],
)
),
);
}
_doSomething(){
print("Button Clicked");
}
}
5. MaterialButton
So, on like other Button class, The Material button widget gives you more flexibility and options to do a lot of more beautiful design than the normal fixed Button with little flexibility. The Flutter MaterialButton get most of its ability from the Flutter Material Library. here’s an example
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
primaryColor: Colors.amber,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Flat Button")
),
body: Center(
child: MaterialButton(
onPressed: () {
_doSomething();
},
color: Colors.amber,
elevation: 5.0,
child: Text("Material Button", style: TextStyle(
color: Colors.white
))
),
),
);
}
_doSomething(){
print("Button Clicked");
}
}
So far, we’ve listed the available Buttons available in the Flutter Library, I hope you got to understand Flutter Buttons better?. Aside Buttons, there is an important widget you need to know which is called the Dismissible.
Dismissible widget
Generally, Buttons are all created for one purpose: to respond to a tap. Similarly, a Dismissible is created for one purpose: to respond to a swipe. To use it, you’ll usually build a list of widgets and will wrap each one with a Dismissible. When you do, each widget in the list can then respond to the swipe gesture:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
primaryColor: Colors.amber,
),
debugShowCheckedModeBanner: false,
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Dismissible")
),
body: Dismissible(
key: Key(null),
// Give it a blue background if swiped right and
// a red background if swiped left
background: Container(color: Colors.blue),
secondaryBackground: Container(color: Colors.red),
onDismissed: (direction) {
print("You swiped $direction");
},
child: ListTile(
title: Text("A very important title (FlutterFix.com)", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19)),
subtitle: Text("Some text here also")
),
)
);
}
// _doSomething(){
// print("Button Clicked");
// }
}
