Features of button in flutter
- We can perform any event on any button.
- We can change the style of the button.
- Also we can add icons and custom shapes
Types of Button
Following are the major types of button:
I am describing each button with example in the following way –
Note: Please note that some buttons are deprecated by flutter. FlatButton, RaisedButton, OutlineButton are replaced by TextButton, ElevatedButton and OutlinedButton. And themes are replaced by TextButtonTheme, ElevatedButtonTheme and OutlinedButtonTheme.
So i changed the color of first three buttons in line above. You can understand.
1. Text Button in flutter
This is a part of material design. You can use onPress() and onLongPress() callbacks methods. You can visit official flutter website to see more features of TextButton.
TextButton( onPressed: null, child: Text("Text Button"), style: TextButton.styleFrom( padding: EdgeInsets.all(15), primary: Colors.blue, textStyle: TextStyle(fontSize: 18, color: Colors.red)), ),
2. Elevated Button in flutter
This button has elevation so avoid using this when content already has shadow and elevation. Generally ElevatedButtonTheme is used to style this button. This is material design component you can design accordingly.
ElevatedButton( onLongPress: null, style: ElevatedButton.styleFrom( primary: Colors.grey, shadowColor: Colors.black, elevation: 10, textStyle: TextStyle(fontSize: 16, color: Colors.black26)), onPressed: null, child: Text( "Elevated Button", ), ),
3. Outlined Button
Outlined Button is similar to Text Button. As name indicates that this button has outline border which makes it different from other buttons.
OutlinedButton( onLongPress: null, style: OutlinedButton.styleFrom(primary: Colors.blue), onPressed: null, child: Text( "Ouotlined Button", style: TextStyle( fontSize: 18, ), )),
I created all three button in single screen, so please see the screenshot below.
How to make rounded corner of button?
To make rounded corner you have to use decoration and Border component as below.
decoration : BoxDecoration(boder: Border.all(12), borderRadius: BorderRadius.circular(10),),