Raised Button Class in Flutter Material Library with Example
Last Updated :
26 Apr, 2023
Raised button class comes with a slight elevation in its structure on tapping by the user. They have several properties like text color, shape, padding, button color, etc. These are rectangular in shape by default which cannot be altered and have UI along their z-axis. It is a deprecated class, and an elevated button is preferred over raised buttons. because there is no specific single-valued button theme present with a raised button, you have to customize it according to your own requirements.
Disclaimer: As of June 2022 the RaisedButton class in flutter is deprecated. ElevatedButton class should be used instead. The later class will eventually be removed from flutter SDK, so it is suggested to move to the newer class.
Constructor
RaisedButton(
{Key key,
@required VoidCallback onPressed,
VoidCallback onLongPress,
ValueChanged<bool> onHighlightChanged,
MouseCursor mouseCursor,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
FocusNode focusNode,
bool autofocus: false,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child}
)
A raised button uses a number of properties, the most common ones are explained below:
color: defines the color of the button.
RaisedButton(
color: Colors.green,
child: Text('Raised Button'),
onPressed: () {}
),
Output:
elevation: defines the increment in the breadth of the button towards the surface of the screen.
RaisedButton(
elevation: 5,
color: Colors.green
child: Text('Raised Button'),
onPressed: () {}
),
Output:
hoverColor: defines the color of the button when tapped
RaisedButton(
hoverColor:Colors.yellow ,
color: Colors.green,
elevation: 5,
child: Text('Raised Button'),
onPressed: () {}
),
Output:
textColor: defines the color of the text inside the button
RaisedButton(
textColor: Colors.white,
color: Colors.green,
elevation: 5,
textColor: Colors.white,
hoverColor:Colors.yellow ,
child: Text('Raised Button'),
onPressed: () {}
),
Output:
padding: defines the gap between the border and the text
RaisedButton(
padding: EdgeInsects.all(5),
color: Colors.green,
elevation: 5,
textColor: Colors.white,
hoverColor:Colors.yellow ,
child: Text('Raised Button'),
onPressed: () {}
),
Output:
Some of the other properties of raised buttons are as follows
- clipBehavior: decides whether the text inside the button will be clipped or not.
- colorBrightness: decides the theme-brightness to be used inside the button.
- disabledColor: decides the color of the button when it is inactive.
- disabledElevation: decides the elevation height of the button when it is inactive.
- highlightElevation: decided the elevation height of the button when it is tapped by the user.
- onLongPress: The callback function when the button is pressed a little longer than usual.
- onPressed: The callback function when the button is tapped.
- visualDensity: displays the layout compactness of the button by taking in the VisualDensity class as the object.
- enableFeedback: controls whether there will be sound or vibration when the button is clicked.
- focusColor: decides the color of the button at the time of input focus.
- focusElevation: controls the location of RaisedButton at the z-axis.
- focusNode: decides the focus nodes as a class object.
Methods used in raised buttons are as follows
- build(BuildContext context: Describes the part of the user interface
- createElement: creates a StatelessElement to manage this widget’s location in the tree.
- debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children
- debugFillProperties: Add additional properties associated with the node
- noSuchMethod: Invoked when a non-existent method or property is accessed
- toDiagnosticsNode: Returns a debug representation of the object that is used by debugging tools
- toString: A string representation of this object
- toStringDeep: Returns a string representation of this node and its descendants.
- toStringShallow: Returns a one-line detailed description of the object
- toStringShort: A short, textual description of this widget.
Let’s closely understand a raised button with the help of an example.
Example
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp( const HomeApp());
}
class HomeApp extends StatefulWidget {
const HomeApp({Key? key}) : super(key: key);
@override
State<HomeApp> createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text( 'GeeksforGeeks' ),
),
body: const FirstScreen()));
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.green)),
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const NewScreen()),
),
child: const Text( 'Raised Button' ),
),
);
}
}
class NewScreen extends StatefulWidget {
const NewScreen({Key? key}) : super(key: key);
@override
State<NewScreen> createState() => _NewScreenState();
}
class _NewScreenState extends State<NewScreen> {
TextEditingController textEditingController = TextEditingController();
@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text( 'New Screen' ),
),
body: const Center(child: Text( 'This is your new screen' )),
);
}
}
|
Output:
Similar Reads
Scaffold class in Flutter with Examples
The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen . The class Hierarchy is as follows: Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of t
8 min read
Raised Button widget in Flutter
RaisedButton is the material design button based on a Material widget that elevates when pressed upon in flutter. It is one of the most widely used buttons in the flutter library. Let's understand this button with the help of an example. Disclaimer: As of May 2021 the RaisedButton class in flutter i
5 min read
Flutter - Loading Kit Widget with Example
In every android application, you have seen the loading bars, which are used when something is loading such as loading data, loading the screen, and fetching the data. The same flutter gives you a widget Flutter loading kit. We simply use the widget and use it in our project. A sample video is given
2 min read
Flutter - Line ProgressBar with Card Widget using Buttons
In this Flutter application, we've created a user interface using a Card with a linear progress bar. The progress bar is contained within the card, and three buttons (Decrease, Increase, and Reset) allow users to dynamically control the progress displayed. The LinearProgressIndicator widget visually
4 min read
MaterialApp class in Flutter
MaterialApp Class: MaterialApp is a predefined class or widget in flutter. It is likely the main or core component of a flutter app. The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK like Text widget, D
7 min read
Flutter - Working with Material Button
Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all Flutter apps. For u
4 min read
How to Create Buttons with Rounded Corners in Flutter?
Flutter is a UI toolkit developed by Google. It is being utilized by big tech companies like Alibaba, Airbnb, and Google itself to build apps that serve billions of users around the globe. In this article, we will be seeing how to make Rounded Buttons in Flutter. Approach: We will create the buttons
2 min read
Flutter - Future.delayed with Example
You can use the Future.delayed method in Flutter to delay the execution of a piece of code for a specified duration. A sample video is given below to get an idea about what we are going to do in this article. [video loading="lazy" mp4="https://media.geeksforgeeks.org/wp-content/uploads/2023042011210
3 min read
Flutter - Change Text When Button Pressed
In this article, you will see how you can change the text in Flutter on a single screen after clicking the button. Let's start so you first start your vs code or android studio and you just delete the whole code and paste the code which we have given in below and run it then you can get the solution
4 min read
Flutter - Text Shadow with Example
Text Shadow is the shadow of a text that makes the text beautiful. We can make text bold, Italic, and headings but also we can give text shadow to make it beautiful. This going to be pretty simple, Follow the following simple steps to make a shadow of the text. We need to write a simple text that ha
4 min read