Border color is the visible part of border displays on screen. In flutter we can use BoxDecoration() class color parameter to Set Change Image Border Color in Flutter android iOS mobile app. The color supports multiple type of parameters and in current tutorial we would use HEX color codes. You can find some of best color combinations here in Material Design Colors.
Contents in this project Set Change Image Border Color in Flutter Android iOS App Example:
1. Import material.dart package in your application’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating the void main function and call the MyApp class using runApp() function.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. In MyApp class widget first we would make the widget build inbuilt method with app bar.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set Image Border Color'), ), body: )); } } |
5. Now we would make the Center widget -> Column widget in body section. Our center widget makes all our content at the center of device screen.
|
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( appBar: AppBar( title: Text('Set Image Border Color'), ), body: Center( child: Column( children: [ ], ), ))); } } |
6. Column widget supports multiple children widgets. Now we have to make container widget and wrap the Image widget in container widget. The image widget dose not supports border directly.
color : Used to set the border color code.
Note: In below color code we are using the HEX Color code. So it is defined like this:
0xff + Hex color code = 0xffD50000
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Container( decoration: BoxDecoration( border: Border.all( color: Color(0xffD50000), width: 2, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ), |
7. 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('Set Image Border Color'), ), body: Center( child: Column( children: [ Container( decoration: BoxDecoration( border: Border.all( color: Color(0xffD50000), width: 2, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ), ], ), ))); } } |
Screenshot:
