Flutter provides a rich set of widgets that help developers create highly interactive user interfaces. Among these, buttons are a critical component in almost every mobile app. They are the primary way users interact with apps, triggering actions and navigating through different parts of the app. In Flutter, the Button widget is versatile, allowing for a range of customization and functionality. In this post, we’ll take a closer look at the different types of buttons in Flutter and how to use them effectively.
1. RaisedButton (Deprecated)
Previously, the RaisedButton was one of the most commonly used button types in Flutter. It displayed a material design button with a shadow effect, creating a sense of elevation. However, RaisedButton has been deprecated in favor of ElevatedButton, which offers the same functionality with more flexibility.
Example:
ElevatedButton(
onPressed: () {
// Action to be performed
},
child: Text('Click Me'),
)
2. FlatButton (Deprecated)
Similar to the RaisedButton, the FlatButton widget provided a simple, flat button with no elevation or shadow. It has now been replaced with TextButton, which is lightweight and easy to use for cases where you need buttons with text only (no elevation or background color).
Example:
TextButton(
onPressed: () {
// Action to be performed
},
child: Text('Click Me'),
)
3. OutlineButton (Deprecated)
The OutlineButton offered a button with a border but no fill color. It has now been replaced by OutlinedButton, which follows the same design principles but with additional customization options.
Example:
OutlinedButton(
onPressed: () {
// Action to be performed
},
child: Text('Click Me'),
)
4. IconButton
The IconButton is an ideal choice when you want a button with only an icon (without any text). You can specify an icon from Flutter’s Icons library, and users can tap it to perform an action. This button is typically used in app bars or toolbars.
Example:
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
// Action to be performed
},
)
5. FloatingActionButton
The FloatingActionButton (FAB) is a circular button that floats above the app’s content. It’s typically used to represent the primary action of the app, like adding new content or navigating to a new screen. It’s usually placed in a prominent position, often at the bottom right of the screen.
Example:
FloatingActionButton(
onPressed: () {
// Action to be performed
},
child: Icon(Icons.add),
)
6. MaterialPageRoute with Button Navigation
Buttons are commonly used to trigger navigation between different screens or pages. You can wrap a button with a navigation function to transition from one screen to another. Here’s an example of a button used to navigate to a new page using MaterialPageRoute:
Example:
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Go to Second Screen'),
)
7. Customizing Buttons
Flutter allows you to customize the appearance of buttons in various ways. You can adjust properties such as padding, shape, color, elevation, and even the text style. Let’s take a look at a custom-styled ElevatedButton:
Example:
ElevatedButton(
onPressed: () {
// Action to be performed
},
style: ElevatedButton.styleFrom(
primary: Colors.blue, // Background color
onPrimary: Colors.white, // Text color
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
),
child: Text('Custom Button'),
)
8. Button with Loader (Showing Progress)
Sometimes, you may want to show a loading indicator inside a button while an action is being performed, like during a network request. Flutter allows you to use the CircularProgressIndicator widget for this purpose.
Example:
ElevatedButton(
onPressed: () {
setState(() {
isLoading = true;
});
// Simulate network request
Future.delayed(Duration(seconds: 2), () {
setState(() {
isLoading = false;
});
});
},
child: isLoading
? CircularProgressIndicator(color: Colors.white)
: Text('Submit'),
)
Conclusion
Buttons in Flutter are more than just simple controls; they provide a range of ways to interact with users, from basic text buttons to more advanced customizable ones. Flutter’s flexibility in button design and functionality allows developers to create modern, responsive, and accessible UIs with ease. By understanding the different types of buttons and how to use them, you can enhance the overall user experience of your app.
Whether you’re creating an app with simple navigation or more complex interactions, Flutter buttons provide the tools you need to build functional, engaging interfaces.