In this post, we will understand what Flutter raised button elevation is and how to change it using a proper Flutter easy example. A step by step explanation will also be provided so you can have a better practical understanding of how to use and change Flutter raised button elevation. So let’s get right into it.
What is Flutter Raised Button Elevation?
Flutter raised button elevation is used to specify that how much the shadow of the Flutter raised button should spread. The more it spread will make the button look more elevated or you can say at higher position. The Flutter raised button has a default shadow with some elevation. Let’s now understand it using a practical Flutter example.
Default Flutter Raised Button Elevation
To see the default Flutter raised button elevation, we have to define a simple Flutter raised button, we have also passed a Flutter text widget just to make the Flutter raised button looks good. See the below code:
RaisedButton(
onPressed: () {},
child: Text('Default Raised Button Elevation'),
)
Change Flutter Raised Button Elevation
In order to change the elevation, we have to use the elevation constructor of the Flutter raised button widget class. The elevation constructor takes a double(decimal value but you can also pass integer value, it will convert it automatically), we have passed it a zero value for demonstration. See the below code:
RaisedButton(
onPressed: () {},
elevation: 0,
child: Text('Custom Raised Button Elevation'),
)
RaisedButton(
onPressed: () {},
elevation: 15,
child: Text('Custom Raised Button Elevation'),
)
Flutter Raised Button Elevation Source Code
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(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {},
elevation: 15,
child: Text('Custom Raised Button Elevation'),
)
],
))),
));
}
}Conclusion
In conclusion, you have now practical knowledge of what Flutter raised button elevation is and how to use it in Flutter apps. I seriously appreciate you taking the time to read this article and would love to have your feedback on it. I highly recommend other posts on Flutter widgets, Flutter app development, Flutter animations, Flutter books, Flutter templates with source code and others. Links to some of them can be found listed below. Others can be found using the search box or the menu navigation bar. Thanks for reading this post.
