Flutter comes with inbuilt widget known as OutlineButton to set border on button but there seems to be a problem working with it. I have tried and the OutlineButton widget did not support button background color somehow. So to avoid that particular problem now we are using Raised Button widget in our tutorial. Raised button is our main button widget mostly used in flutter applications. Raised button has Border Side property which is used to Add Show Border Around Raised Button in Flutter Android iOS example tutorial.
Contents in this project Add Show Border Around 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 with it.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. This is our main root view class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a Center widget in Widget build area in MyApp class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Simple Alert Dialog Box in Flutter') ), body: Center( child: ) ) ); } } |
5. Create Raised Button widget in Center widget. We are using RoundedRectangleBorder property of shape and Border Side to apply border on Raised button.
|
1 2 3 4 5 6 7 8 9 10 |
RaisedButton( onPressed: () {print('Button Clicked...');}, child: Text(' Button With Border '), color: Colors.green, textColor: Colors.white, shape: RoundedRectangleBorder( side: BorderSide(color: Colors.red, width: 2) ), 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 |
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('Simple Alert Dialog Box in Flutter') ), body: Center( child: RaisedButton( onPressed: () {print('Button Clicked...');}, child: Text(' Button With Border '), color: Colors.green, textColor: Colors.white, shape: RoundedRectangleBorder( side: BorderSide(color: Colors.red, width: 2) ), padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ), ) ) ); } } |
Screenshot:
