Raised button widget has a property named as shape which supports RoundedRectangleBorder option. Here we can pass the borderRadius using BorderRadius.circular(double value). This would curve the button corners in round shape. So in this tutorial we would Create Rounded Corner Radius Raised Button in Flutter Android iOS Example Tutorial.
Contents in this project Create Rounded Corner Radius Raised Button in Flutter 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 our main MyApp class using it.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Widget build area in MyApp class and make a Center widget in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Rounded Corner Raised Button') ), body: Center( child: ) ) ); } } |
5. Creating Raised button in Center widget with borderRadius: new BorderRadius.circular() to Create Rounded Corner Radius Raised Button in Flutter.
|
1 2 3 4 5 6 7 8 9 10 |
RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' ROUNDED CORNER BUTTON '), color: Colors.deepOrange, textColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), ), padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) |
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Rounded Corner Raised Button') ), body: Center( child: RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' ROUNDED CORNER BUTTON '), color: Colors.deepOrange, textColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), ), padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ) ) ); } } |
Screenshot:
