In this article, we will discuss flutter raised button in detail, how we can change the flutter raised button size, how can we implement raised button decoration, flutter raised button style implementation, how to customize flutter raised button height, the usage and implementation of raised button onpressed function by using a flutter raised button example, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into raised button.
Introduction: Flutter Raised Button
Flutter raised button, as the name suggests, its a button with some shadow to give it an elevated effect. Let’s discuss how to implement it and customize our flutter raised button using the raised button class.
Implementation
RaisedButton( onPressed: () {} )

Flutter Raised Button Child
child: Text( 'Raised Button', style: TextStyle( color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 15 ) )
By using the child constructor of the raised button class, we have implemented a text widget. We have given the text some color, size etc. We can see it in the above image how our text is looking in the raised button.
Color
color: Colors.pink.shade400

Text Color
textColor: Colors.white
Disabled Color
disabledColor: Colors.grey, onPressed: null

Elevation
elevation: 10

Disabled Elevation
disabledElevation: 20

On Long Press
onLongPress: () { print("long pressed"); }
Padding
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 15)

Shape
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))

Splash Color
splashColor: Colors.green
Custom Flutter Raised Button Widget 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( title: 'Flutter Beautiful Raised Button', debugShowCheckedModeBanner: false, home: Homepage(), ); } } class Homepage extends StatelessWidget { const Homepage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: RaisedButton( onPressed: () {}, color: Colors.pink.shade400, disabledColor: Colors.grey, elevation: 10, disabledElevation: 20, textColor: Colors.white, onLongPress: () { print("long pressed"); }, padding: EdgeInsets.symmetric(horizontal: 40, vertical: 15), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)), splashColor: Colors.green, child: Text( 'Raised Button', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15), ), ))), ); } }
Conclusion
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks for reading.