As we all know Image widget directly dose not support Border format so we would wrap the Image widget in Container widget and apply border on it. The BoxDecoration() method supports border width in double format. The default width value is 1.0 pixel. So if you would not pass the width in BoxDecoration() it will by default set the width in 1.0 pixel. So in this tutorial we would Set Image Border width in Flutter iOS Android App Example.
Contents in this project Set Image Border width in Flutter iOS Android Example:
1. Import material.dart package in your main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Calling our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends with StatelessWidget.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. Creating widget build method in MyApp class. Inside this method we would pass all our widgets.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: )); } } |
5. Creating SafeArea widget in body section of Scaffold widget. This widget will automatically move below the view from status bar.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ))); } } |
6. Creating Center widget in SafeArea to put all content at the center of screen.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: )))); } } |
7. In the center widget we would put Column widget which supports multiple children views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ ], ), )))); } } |
8. Now finally we would make Container widget and put the Image widget on it. We would apply the border on Image using Container widget.
width : Supports double value and the default value is 1.0
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Container( decoration: BoxDecoration( border: Border.all( color: Color(0xffD50000), width: 5, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ), |
9. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ Container( decoration: BoxDecoration( border: Border.all( color: Color(0xffD50000), width: 5, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ), ], ), )))); } } |
Screenshot:
