How to create a Circle Image in Flutter. Display image in circler shape will always look cool in the UI Screen. Flutter doesn't provide any widget to Create Circle Image.
In this post, we are going to create a circler image in a flutter application
This example will show just a basic screen with a circle image and loading the image from URL, as well as from Asset
We can also add icon to the Circle Avatar
Let's get started.
Step 1: Create a Flutter application
Step 2: Create a file circler_image.dart file add below code
import 'package:flutter/material.dart';
class CircleImage extends StatelessWidget{
final Size size;
final Widget child;
CircleImage({Key key,@required this.child,this.size=const Size.fromWidth(120)}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
decoration: new BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle),
height: size.width,
child: ClipOval(
child: child,
),
);
}
}
|
This is the widget that will show our image in a circle shape.
Step 3: User Circle Widget in our main.dart file
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Size size=Size.fromWidth(120);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Circle Imageview',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'sriracha'
),
home: Scaffold(
appBar: AppBar(title: Text("Flutter Circle Imageview"),),
body: Center(
child: Container(
height: 400,
child: Expanded(
child: Column(
children: [
Text("Image From Network"),
SizedBox(height: 20,),
CircleImage(size:size,child: Image.network("https://upload.wikimedia.org/wikipedia/commons/b/b8/White-lion-images-20.jpg",
width: size.width,
height: size.height,
fit: BoxFit.fitWidth,
),),
SizedBox(height: 20,),
Text("Image From Assets"),
SizedBox(height: 20,),
CircleImage(size:size,child: Image.asset("assets/images/profile.jpg",
width: size.width,
height: size.height,
fit: BoxFit.fitWidth,
),)
],
)),
),
),)
);
}
}
|
Upload Image to Firebase Example
Flutter Rest API Integration Example
|
Article Contributed By :
|
|
|
|
|
2058 Views |
|