The container widget in flutter supports decoration argument which accepts BoxDecoration() function with multiple values like border direction, border width and border color. To set a border around a image we need to wrap the Image widget component in a parent Container component and then apply the border on parent container widget. We can easily add border using this method in flutter on any widget. So in this tutorial we would Add Show Border to Image widget in Flutter Android iOS App Example.
Content in this project Add Show Border to Image Widget in Flutter Android iOS Example:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp function.
|
1 |
void main() => runApp(MyApp()); |
3. Create main designing class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Defining the widget build method in MyApp class and make the App Bar.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Add Border to Image'), ))); } } |
5. Creating body argument in MyApp class. In the body section we would define all our widgets. First we would make a Center widget. Then inside the center widget we would make Row widget which supports multiple children.
|
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('Add Border to Image'), ), body: Center( child: Column( children: [ ], ), ))); } } |
6. In the Column widget now we would make a Parent widget Container and apply the border decoration on Container widget.
- BoxDecoration : function supports multiple styling argument.
- border – Border.all() : To set border around all image.
- color : To set border color. I am passing here hex color code like (0xff – hex color code) format.
- width : To set border width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Add Border to Image'), ), body: Center( child: Column( children: [ Container( decoration: BoxDecoration( border: Border.all( color: Color(0xff000000), width: 4, )), child: ), ], ), ))); } } |
7. Creates the Image widget as child in parent container widget.
|
1 2 3 4 5 |
child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, fit: BoxFit.cover, ), |
8. 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 |
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('Add Border to Image'), ), body: Center( child: Column( children: [ Container( decoration: BoxDecoration( border: Border.all( color: Color(0xff000000), width: 4, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, fit: BoxFit.cover, ), ), ], ), ))); } } |
Screenshot:
