Material Design Series in Flutter - Material Button and its type
What is Material Design?
Material Design is a design system developed by Google for creating visually appealing and user-friendly user interfaces. It's based on the principles of materiality, with a focus on physicality, bold graphic design, and the use of dynamic and interactive animations.
In Flutter, Material Design is the preferred design language and provides a comprehensive set of pre-designed widgets, tools, and guidelines for creating beautiful, consistent, and functional mobile and web applications.
We use Material Design in Flutter to:
- Provide a consistent look and feel for our applications across platforms
- Streamline the design process by using pre-made widgets and components
- Improve the user experience by using animations and interactions that feel natural and intuitive
- Make the design process faster and more efficient by using pre-defined design principles and guidelines.
In this blog, we are gonna see Material Buttons and their types:
Material buttons are a type of button used in Material Design, which is a design system developed by Google. They are designed to be used in Flutter, a mobile development framework.
Material buttons are raised buttons that follow Material Design guidelines and provide a visually appealing and user-friendly way of triggering actions in an application. They come in different styles, including filled, outlined, and text buttons, and can be customized in terms of size, shape, color, and text.
Some of the features of Material buttons in Flutter include:
- Elevated and ink splash effects that give buttons a sense of physicality
- Customizable shapes, colors, and text styles
- Support for touch, mouse, and keyboard interactions
- Accessibility features like focus highlighting, hover effects, and keyboard-only navigation.
There are several types of buttons in Flutter Material:
- ElevatedButton
- TextButton
- OutlinedButton
- IconButton
- FloatingActionButton
- PopupMenuButton
- CustomButton
ElevatedButton:
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
),TextButton:
TextButton(
onPressed: () {},
child: Text('Text Button'),
),OutlinedButton
OutlinedButton(
onPressed: () {},
child: Text('Outline Button'),
),IconButton
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {},
),FloatingActionButton
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),PopupMenuButton
PopupMenuButton(
itemBuilder: (BuildContext context) => [
PopupMenuItem(
child: Text('Item 1'),
),
PopupMenuItem(
child: Text('Item 2'),
),
],
),CustomButton
We can create a custom button in Flutter by creating a widget that extends the StatelessWidget or StatefulWidget class and provides a custom onPressed callback.
Here's an example of a custom button that changes its background color on press:
import 'package:flutter/material.dart';
class CustomButton extends StatefulWidget {
final VoidCallback onPressed;
final Widget child;
CustomButton({this.onPressed, this.child});
@override
_CustomButtonState createState() => _CustomButtonState();
}
class _CustomButtonState extends State<CustomButton> {
bool _isPressed = false;
void _updateIsPressed(bool value) {
setState(() {
_isPressed = value;
});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (TapDownDetails details) {
_updateIsPressed(true);
},
onTapUp: (TapUpDetails details) {
_updateIsPressed(false);
},
onTapCancel: () {
_updateIsPressed(false);
},
onTap: widget.onPressed,
child: Container(
decoration: BoxDecoration(
color: _isPressed ? Colors.red : Colors.blue,
),
padding: EdgeInsets.all(12.0),
child: widget.child,
),
);
}
}
You can use the CustomButton as you would use any other button in Flutter:
CustomButton(
onPressed: () {
print("Button pressed");
},
child: Text("Custom Button"),
),This is just one example of a custom button. You can make the button look however you want by customizing the Container and GestureDetector widgets used in the build method.
Providing you with the full code below:
buttons.dart
import 'package:flutter/material.dart';
import 'widgets/custom_widgets.dart';
class MaterialBtn extends StatelessWidget {
const MaterialBtn({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Button styles'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
),
TextButton(
onPressed: () {},
child: Text('Text Button'),
),
OutlinedButton(
onPressed: () {},
child: Text('Outline Button'),
),
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {},
),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
PopupMenuButton(
itemBuilder: (BuildContext context) => [
PopupMenuItem(
child: Text('Item 1'),
),
PopupMenuItem(
child: Text('Item 2'),
),
],
),
CustomButton(
onPressed: () {
print("Button pressed");
},
child: Text("Custom Button"),
),
]),
),
);
}
}
custom_widget.dart
import 'package:flutter/material.dart';
class CustomButton extends StatefulWidget {
final VoidCallback onPressed;
final Widget child;
CustomButton({required this.onPressed, required this.child});
@override
_CustomButtonState createState() => _CustomButtonState();
}
class _CustomButtonState extends State<CustomButton> {
bool _isPressed = false;
void _updateIsPressed(bool value) {
setState(() {
_isPressed = value;
});
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (TapDownDetails details) {
_updateIsPressed(true);
},
onTapUp: (TapUpDetails details) {
_updateIsPressed(false);
},
onTapCancel: () {
_updateIsPressed(false);
},
onTap: widget.onPressed,
child: Container(
decoration: BoxDecoration(
color: _isPressed ? Colors.red : Colors.blue,
),
padding: EdgeInsets.all(12.0),
child: widget.child,
),
);
}
}
Comments
Post a Comment