Flutter comes with inbuilt material design button widget known as RaisedButton. RaisedButton has all the styling options that can make a button looks so much beautiful in both android & iOS applications. As we all know button is the most essential component in mobile applications. Every time when user wants to perform some on click event functionality in apps then button is the solution. In this tutorial we would make a RaisedButton with some basic options in flutter. So in this tutorial we would Create Material Style Button in Flutter using RaisedButton Example Tutorial in Android iOS mobile application.
Contents in this project Create Material Style Button in Flutter using RaisedButton Example for Android iOS:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main() runApp() method and call MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a function named as sampleFunction() in MyApp class. We would call this function on button onPress event. We are printing a simple message using print() function. This message will display on Command prompt or Terminal screen.
|
1 2 3 |
sampleFunction(){ print('Function Called'); } |
5. Creating RaisedButton widget in Widget Build area.
- child : Pass here Text widget to show Button above text.
- onPressed : Calling the function here.
- color : Button background color.
- textColor : Button text color.
- padding : to set padding.
- splashColor : to set color of button while pressing.
|
1 2 3 4 5 6 7 8 |
RaisedButton( child: Text("Sample Button"), onPressed: sampleFunction, color: Colors.lightBlue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(9, 9, 9, 9), splashColor: Colors.grey, ) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { sampleFunction(){ print('Function Called'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ RaisedButton( child: Text("Sample Button"), onPressed: sampleFunction, color: Colors.lightBlue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(9, 9, 9, 9), splashColor: Colors.grey, ) ], ) ) ) ) ); } } |
Screenshot:
how to set the height and width of Raised button ?
Read my this tutorial this would help you : https://flutter-examples.com/set-raised-button-height-width-in-flutter/ .