How to use the ElevatedButton
An elevated button is a labeled child displayed on a Material widget whose Material.elevation increases when the button is pressed. RaisedButton was used for this purpose previously which is deprecated now.
Constructor
The constructor of the elevated button gives an idea of its functionalities and is shown below:
const ElevatedButton({Key? key,required VoidCallback? onPressed,VoidCallback? onLongPress,ButtonStyle? style,FocusNode? focusNode,bool autofocus = false,Clip clipBehavior = Clip.none,required Widget? child})
Let’s look at the two basic parameters, child and onPressed() callback. We can pass a widget as a child, typically a Text or an Icon widget. The onPressed callback specifies what happens when the widget is pressed. If null is passed to onPressed(), the elevated button is disabled.
Let’s take a look at a basic use of ElevatedButton:
ElevatedButton(child: Text('Elevated Button'),onPressed: () {},)
In the above example, the text “Elevated Button” is displayed on the button. The onPressed() does nothing in this case because we have specified nothing in it.
In the same way, we can use ElevatedButton.icon(), as shown below:
ElevatedButton.icon(label: Text('Elevated Button'),icon: Icon(Icons.web),onPressed: () {},)
Style
The style includes adjusting the visual components such as color, size, shape, elevation, and many other traits of an elevated button, as shown below:
ButtonStyle styleFrom(
{Color? primary,
Color? onPrimary,
Color? onSurface,
Color? shadowColor,
double? elevation,
TextStyle? textStyle,
EdgeInsetsGeometry? padding,
Size? minimumSize,
Size? fixedSize,
BorderSide? side,
OutlinedBorder? shape,
MouseCursor? enabledMouseCursor,
MouseCursor? disabledMouseCursor,
VisualDensity? visualDensity,
MaterialTapTargetSize? tapTargetSize,
Duration? animationDuration,
bool? enableFeedback,
AlignmentGeometry? alignment,
InteractiveInkFeatureFactory? splashFactory}
)
The example below sets the style of the ElevatedButton using styleFrom.
ElevatedButton(child: Text('Elevated Button'),onPressed: () {},style: ElevatedButton.styleFrom(primary: Colors.pink,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),textStyle: TextStyle(fontSize: 15,fontWeight: FontWeight.bold)),),
In Line 5, we assigned the primary color to be pink. Line 6 makes the border of the button round using RoundedRectangularBorder(). Using textStyle, we set the font to be 15 and bolded the text.
We can use various other functions to set the appearance of the elevated button. The details of the usage of other style setting functionalities can be found in the official documentation of Flutter here.
Example: Use ElevatedButton to count the number of clicks
Now that we understand the basics of ElevatedButton, we are ready to create a simple app. The code below increments the number on the screen using ElevedButton. The function changeData() to increment a variable dataToChange is called when the button is pressed.
Try and run the code below:
name: flutter_web_docker_example
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packagesThe output of the above code should look like this.
On clicking the elevated button, the number on the screen increments. It basically counts the number of clicks on the button.
