Button or Widgets in Flutter: A Comprehensive Guide
Introduction
Widgets are the building blocks of Flutter applications, and buttons are one of the most essential types of widgets. In Flutter, buttons are not just limited to traditional buttons; they can take various forms, including cards, floating actions, and to-be items. In this article, we will delve into the world of buttons in Flutter, covering the basic widgets, customizing button appearance, and handling button click events.
Basic Buttons in Flutter
Flutter provides a variety of basic buttons, including the most commonly used `ElevatedButton`, `TextButton`, and `OutlinedButton`.
1. ElevatedButton
The `ElevatedButton` is one of the most commonly used buttons in Flutter. It displays a background with elevation and an outline.
“`dart
ElevatedButton(
onPressed: () {},
child: const Text(‘Basic Button’),
)
“`
2. TextButton
The `TextButton` displays a minimum amount of background and elevation. It is ideal for situations where a text button is needed.
“`dart
TextButton(
onPressed: () {},
child: const Text(‘Text Button’),
)
“`
3. OutlinedButton
The `OutlinedButton` is used when you want a button with an outline.
“`dart
OutlinedButton(
onPressed: () {},
child: const Text(‘Outlined Button’),
)
“`
Customizing Button Appearance
To customize the appearance of buttons, you can use various properties such as colors, hover color, background color, and more.
Custom Color
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // Change primary color
onPrimary: Colors.white, // Change primary text color
),
onPressed: () {},
child: const Text(‘Red Custom Button’),
)
“`
Custom Shader
“`dart
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: const LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.blue, Colors.red],
).createShader(
Rect.fromLTWH(0, 0, 200, 50)),
onPrimary: Colors.white,
),
onPressed: () {},
child: const Text(‘Red Custom Button’),
)
“`
Button Size and Shape
Button Size
“`dart
ElevatedButton(
onPressed: () {},
child: const Text(‘Basic Button’),
style: ElevatedButton.styleFrom(
minimumSize: Size(200, 100),
),
)
“`
Button Shape
“`dart
OutlinedButton(
onPressed: () {},
child: Expanded(
child: Text(
‘Outlined Button’,
textScaleFactor: 1.2,
textAlign: TextAlign.center,
),
),
)
“`
Handling Button Click Events
To handle button click events, you can use the `onPressed` property.
“`dart
ElevatedButton(
onPressed: () {
// Add your code here
},
child: const Text(‘Basic Button’),
)
“`
Float Action Button (FAB)
A floating action button (FAB) is used to trigger specific actions that are relevant to the app’s context.
“`dart
FloatingActionButton(
onPressed: () {},
tooltip: ‘Basic Button’,
child: Icon(Icons.add),
)
“`
Usage Scenarios
Buttons can be used in various scenarios, including:
- Navigation: Use buttons to navigate between screens or sections of an app.
- Actions: Use buttons to perform specific actions within an app, such as saving data or taking a photo.
- Feedback: Use buttons to provide users with feedback or to indicate what actions have been taken.
Conclusion
This article has explored the various types of buttons available in Flutter, including basic buttons, elevated buttons, and floating action buttons. You have also seen how to customize button appearance and handle button click events. Remember to use buttons effectively to enhance user experience in your Flutter applications.
FAQ
1. What are the different types of buttons in Flutter?
Flutter provides various types of buttons, including `ElevatedButton`, `TextButton`, `OutlinedButton`, `FloatingActionButton`, and more.
2. How do I customize button appearance in Flutter?
You can customize button appearance by using properties such as colors, hover color, background color, and more. You can also use custom shaders to create unique button appearances.
3. How do I handle button click events in Flutter?
To handle button click events, you can use the `onPressed` property.
4. What are the usage scenarios for buttons in Flutter?
Buttons can be used for navigation, actions, feedback, and more.
5. How do I implement a floating action button (FAB) in Flutter?
You can implement a FAB by using the `FloatingActionButton` widget and specifying the `onPressed` property.
I hope this blog post has provided you with a comprehensive understanding of buttons in Flutter.
