Material Button in Flutter
Introduction
MaterialButton is one of the most commonly used buttons in Flutter. It is a versatile button that can display text, icons, and more. This guide will help you understand the MaterialButton with the help of real-world examples.
Example 1: Simple MaterialButton
In this example below, you will learn to create a simple button with text using the MaterialButton widget.
MaterialButton(
onPressed: () {},
color: Colors.blue,
child: const Text('Press Me'),
)
Example 2: MaterialButton With Icon
In this example below, you will learn to create a button with an icon using the MaterialButton widget.
MaterialButton(
onPressed: () {
// Action to perform on button press
},
color: Colors.green,
textColor: Colors.white,
child: const Row(
mainAxisSize: MainAxisSize.min, // Align text and icon closely together
children: <Widget>[
Icon(Icons.add),
SizedBox(width: 8), // Space between icon and text
Text('Add Item'),
],
),
)
Example 3: Rounded Corners MaterialButton
In this example below, you will learn to create a button with rounded corners using the MaterialButton widget.
MaterialButton(
onPressed: () {},
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
child: const Text('Press Me'),
)
Example 4: MaterialButton with Shadow and Elevation
In this example below, you will learn to create a button with shadow and elevation using the MaterialButton widget.
MaterialButton(
onPressed: () {},
color: Colors.blue,
elevation: 5,
child: const Text('Press Me'),
)
Example 5: Disabled MaterialButton
In this example below, you will learn to create a disabled button using the MaterialButton widget.
MaterialButton(
onPressed: null,
color: Color.fromARGB(255, 205, 208, 211),
child: Text('Disabled Button'),
)
Example 6: Gradient Background In MaterialButton
In this example below, you will learn to create a button with a gradient background using the MaterialButton widget.
MaterialButton(
onPressed: () {},
child: Ink(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.blue, Colors.red]
),
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0),
alignment: Alignment.center,
child: const Text(
'Gradient Button',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
)
Note: Ink widget is used for decorating a part of your UI with a background image, color, or custom drawings
Challenge
Create a simple MaterialButton with text “Click Me” with a red color and white text color. When the button is pressed, display a snackbar with the message “Button Pressed”.