Create Circle Image in Flutter
Circler avatar in Flutter, Create Circle Image from Internet URL and Assets
Last updated Nov 15, 2021
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,
),)
],
)),
),
),)
);
}
}
|