Raised Button widget in flutter support border and also all the type of border styling properties like border color border width. In today’s tutorial we would learn about Add Border Color on Raised Button widget using RoundedRectangleBorder property of Shape object. Using the RoundedRectangleBorder we can pass multiple sub properties like color which represents border color and width which represents border width and set them. So in this tutorial we would Flutter Set Change Add Border Color on Raised Button Android iOS Example.
Contents in this project Flutter Set Change Add Border Color on Raised Button Android iOS Example:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would import our main MyApp app.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main root parent class named as MyApp extends StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold widget -> Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Button Border Color in Flutter') ), body: Center( child: ) ) ); } } |
5. Creating Raised Button widget with Border around it.
- onPressed : Used to set onClick event on button.
- child : Used to set Child widget like button inside Text.
- color : Used to set Button background color.
- textColor : Used to set button text color.
- RoundedRectangleBorder : Used to set border around button.
- color : Used to set Border Color.
- width : Used to set button border width.
|
1 2 3 4 5 6 7 8 9 10 |
RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' Button With Border'), color: Colors.lightBlue, textColor: Colors.black, shape: RoundedRectangleBorder( side: BorderSide(color: Colors.red, width: 2) ), padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), |
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 |
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('Set Button Border Color in Flutter') ), body: Center( child: RaisedButton( onPressed: () {print('Button Clicked');}, child: Text(' Button With Border'), color: Colors.lightBlue, textColor: Colors.black, shape: RoundedRectangleBorder( side: BorderSide(color: Colors.red, width: 2) ), padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ) ) ); } } |
Screenshot:
