In Flutter we would use ClipRRect widget to make rounded edges clip view. The ClipRRect widget converts the child widget with given changes and make the child Image view with rounded corners. ClipRRect widget has a property named as borderRadius with BorderRadius.circular(double value). This would make the corner rounded according to pass value. So in this tutorial we would Flutter Create Rounded Corner Radius Image Android iOS Example Tutorial.
Contents in this project Flutter Create Rounded Corner Radius Image Android iOS Example Tutorial:
1. Import material.dart package in your project’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root parent class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create a Center widget in body section of Scaffold Widget. Inside the Center widget we would create the ClipRRect widget with borderRadius: BorderRadius.circular(10.0), property to make the edges in rounded shape. We would wrap the Image widget in child section of ClipRRect widget.
|
1 2 3 4 5 6 |
Center( child: ClipRRect( borderRadius: BorderRadius.circular(10.0), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_image.jpg', width: 350, height: 200, fit: BoxFit.cover,))), |
5. 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 |
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('Rounded Corner Image Widget') ), body: Center( child: ClipRRect( borderRadius: BorderRadius.circular(10.0), child: Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_image.jpg', width: 350, height: 200, fit: BoxFit.cover,))), ) ); } } |
Screenshot:
