November 15, 2024
Most mobile and online applications have buttons that users may push to engage with them. Elevated buttons may be created in Flutter by using the ElevatedButton widget.
ElevatedButton is the successor to the deprecated RaisedButton. This article will walk you through the process of creating raised buttons and customizing them.
ElevatedButton is a named child displayed on a Material widget. When the button is clicked, the Material.elevation rises. The Text and Icon widgets of the label are shown using the ButtonStyle of the style.
The ButtonStyle determines the foregroundColor and the button’s filled background.backgroundColor. You may also hire flutter developer to make customizations to it.
ElevatedButton:
ElevatedButton({
Key? key,
required VoidCallback? onPressed,
VoidCallback? onLongPress,
ButtonStyle? style,
FocusNode? focusNode,
bool autofocus = false,
Clip clipBehavior = Clip.none,
required Widget? child
})
ElevatedButton.icon({
Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ButtonStyle style,
FocusNode focusNode,
bool autofocus,
Clip clipBehavior,
@required Widget icon,
@required Widget label
})
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘Kindacode.com’),
),
body: Padding(
padding: const EdgeInsets.all(25),
child: Column(children: [
ElevatedButton(onPressed: () {}, child: const Text(‘I gotta pee’)),
ElevatedButton.icon(
onPressed: () {},
label: const Text(‘Plus One’),
icon: const Icon(Icons.plus_one),
)
]),
));
}
}
Change the onPressed argument to null to deactivate an ElevatedButton. Set the onPressed argument to a void function to enable an ElevatedButton.
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘Kindacode.com’),
),
body: Padding(
padding: const EdgeInsets.all(25),
child: Column(
children: [
// An enabled button
ElevatedButton(
child: const Text(‘Enabled Button’),
onPressed: () {},
),
// A disabled button
const ElevatedButton(
onPressed: null, child: Text(‘Disabled Button’))
],
),
),
);
}
}
ElevatedButton may be styled using either the styleFrom static function or the ButtonStyle class. The first option is more practical than the second.
ElevatedButton(
child: Text(‘Button’),
onPressed: () {},
style
From({
Color? primary, // Use this to set the background color
Color? on
Primary,
Color? on
Surface,
Color? shadow
Color,
double? elevation,
TextStyle? textStyle,
EdgeInsets
Geometry? padding,
Size? minimumSize,
Size? fixed
Size, // Use this for sizing the button
BorderSide? side,
Outlined Border? shape, // Button shape
MouseCursor? enabled
MouseCursor,
Mouse
Cursor? disabled
MouseCursor,
VisualDensity? visualDensity,
Material
TapTargetSize? tap
TargetSize,
Duration? animation
Duration,
bool? enable
Feedback,
Alignment
Geometry? alignment,
InteractiveInkFeatureFactory? splashFactory
})
);
ElevatedButton(
child: const Text(‘Button’),
onPressed: () {},
style: ElevatedButton.style
From(
primary: Colors.purple,
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
textStyle:
const TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
),
ButtonStyle({
MaterialStateProperty<TextStyle?>? textStyle,
MaterialStateProperty<Color?>? backgroundColor,
MaterialStateProperty<Color?>? foregroundColor,
MaterialStateProperty<Color?>? overlayColor,
MaterialStateProperty<Color?>? shadowColor,
MaterialStateProperty<double?>? elevation,
MaterialStateProperty<EdgeInsetsGeometry?>? padding,
MaterialStateProperty<Size?>? minimumSize,
MaterialStateProperty<Size?>? fixedSize,
MaterialStateProperty<BorderSide?>? side,
MaterialStateProperty<OutlinedBorder?>? shape,
MaterialStateProperty<MouseCursor?>? mouseCursor,
VisualDensity? visualDensity,
MaterialTapTargetSize? tapTargetSize,
Duration? animationDuration,
bool? enableFeedback,
AlignmentGeometry? alignment,
InteractiveInkFeatureFactory? splashFactory
})
ElevatedButton(
child: const Text(‘Button’),
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
padding: MaterialStateProperty.all(const EdgeInsets.all(50)),
textStyle:
MaterialStateProperty.all(const TextStyle(fontSize: 30))),
),
An elevated button can be sized in a variety of ways.
1. You may precisely specify the width and height of a raised button by using the fixedSize argument of the styleFrom static method as follows:
style: ElevatedButton.style
From(fixedSize: Size([width], [height])),
This code generates a button that is raised and has a width of 240 and a height of 80:
ElevatedButton(
onPressed: () {},
child: const Text(‘240 x 80’),
style: ElevatedButton.style
From(
fixedSize: const Size(240, 80), primary: Colors.deepOrange),
),
2. Alternatively, you may specify the width and height of an elevated button by enclosing it in a ConstrainedBox widget.
The following sample code demonstrates how to create an elevated button with a 300 x 200 pixel size:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘KindaCode.com’),
),
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints.
tightFor(width: 300, height: 200),
child: ElevatedButton(
child: const Text(‘300 x 200’),
onPressed: () {},
),
),
),
);
}
The shape argument of the styleFrom function allows you to customize the form of an elevated button.
ElevatedButton(
onPressed: () {},
child: const Text(‘Kindacode.com’),
style: ElevatedButton.style
From(
primary: Colors.pink,
fixed
Size: const Size(300, 100),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
),
ElevatedButtonTheme classes allow you to customize the appearance and behavior of descendent elevated buttons. This enables you to customize the appearance and behavior of many raised buttons simultaneously.
// main.dart
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super (key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debug ShowCheckedMode Banner: false,
title: ‘Kindacode.com’,
theme: ThemeData(
primarySwatch: Colors.green,
elevated Button Theme: ElevatedButton ThemeData(
style: ElevatedButton.style From(
primary: Colors.red,
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 30),
textStyle: const TextStyle(
fontStyle: FontStyle.italic,
fontSize: 24,
))));
home: const HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘Kindacode.com’),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ElevatedButton(onPressed: () {}, child: const Text(‘Button 1’)),
const SizedBox(
height: 30,
),
ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.play_arrow),
label: const Text(‘Play Video’))
],
),
),
);
}
}
ElevatedButton(
style: ElevatedButton.styleFrom(
// background color
primary: Colors.orange,
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
textStyle: const TextStyle(fontSize: 20),
),
child: const Text(‘I am a button’),
onPressed: () {
debugPrint(‘Button clicked!’);
},
),
This article covered the fundamentals of working with Flutter’s ElevatedButton class. Additionally, we discussed multiple instances of how to implement, style, set the background color, set the width and height of an ElevatedButton, and so on. If you wish to add a professional touch to your project, you may consult Flutter Agency a team of healthcare app developers offering top-notch medical apps for pharmacies and hospitals.
Subscribe to our mailing list to receives daily updates!
Disclaimer: The information provided on the website is only for informational purposes and is not intended to, constitute legal advice, instead of all information, content, and other available materials.
