Rounded corner border around image looks simple and cool in mobile apps. We would Set Rounded Corner Radius Border on Image in Flutter using BorderRadius.all(Radius.circular(double_value)) argument of BoxDecoration() function. We have to apply decoration on Container widget and put the image widget inside the container widget.
Contents in this project Set Rounded Corner Radius Border on Image in Flutter Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp design class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create a class named as MyApp extends with StatelessWidget. This is our main view class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Widget Build method with Scaffold widget. We would put all our content here in Scaffold widget body section.
|
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 a SafeArea widget in body section of Scaffold widget and inside the Safe Area widget we would put a Center widget -> Column widget.
|
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: [ ], ), )))); } } |
6. The column widget supports multiple children. Now finally we would make a Container widget and wrap the Image widget in it. We would apply the rounded border on Container widget because image widget dose not support border directly.
BorderRadius.all(Radius.circular(Double Value))
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Container( decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(15.0)), border: Border.all( color: Color(0xffD50000), width: 3, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ) |
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 |
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( borderRadius: BorderRadius.all(Radius.circular(15.0)), border: Border.all( color: Color(0xffD50000), width: 3, )), child: Image.network( 'https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 250, fit: BoxFit.contain, ), ), ], ), )))); } } |
Screenshot:
