Circle Image (Avatar) with border in Flutter
Circle or Circular images always look cool. Really, like we are used to seeing them almost everywhere, and as I could not find any simple example code for doing this. So, I thought that I could make a really simple one.
- NetworkImage
- AssetImage
- Image.network
- Image.asset
..............................................................................................................................................................................................................................
Example: #1[ DecorationImage]
Image as the background of a Container
Example: #1[ DecorationImage]
Image as the background of a Container
Tips: #1
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://images.pexels.com/photos/462118/pexels-photo- 462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
//whatever image you can put here
fit: BoxFit.cover,
),
),
),
height: 90,
width: 90,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://images.pexels.com/photos/462118/pexels-photo- 462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
//whatever image you can put here
fit: BoxFit.cover,
),
),
),
or
body: Center(
child:Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/im.jpg')
)
),
)
),
or
Container(
alignment: Alignment.center,
child: Container(
width: 300.0,
height: 500.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50",
), fit: BoxFit.cover)
),
),
),Here’s the code to create just a Circular avatar,
Code :#1
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('images/batman.jpg'),
)
Code :#2 [ Circle Image (Avatar) with border in Flutter]
body: CircleAvatar(
radius: 100,
backgroundColor: Colors.red,
child: CircleAvatar(
radius: 90,
backgroundImage: AssetImage('assets/images/d.jpg'),
),
),
CircleAvatar(
backgroundImage: NetworkImage('https://www.pinclipart.com/picdir/big/218-2189254_free-online-avatars-kid-characters-family-vector-for.png'));
backgroundImage: NetworkImage('https://www.pinclipart.com/picdir/big/218-2189254_free-online-avatars-kid-characters-family-vector-for.png'));
or
body: Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('assets/images/d.jpg'),
),
),
Simple Implementation
or
child:Image.asset('assets/images/d.jpg')
Fit Argument for Image
Container(
width: double.infinity,
height: double.infinity,
color: Colors.yellow,
child: Image.network(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50",
fit: BoxFit.cover,
),
)
Tips: #4 [ Permission ]
Navigate to android -> app -> src -> main -> AndroidManifest.xml and add this line outside of application scope.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Tips: #5[]
Delete the emulator and create a new one
Delete the emulator and create a new one
Tips: #6 [How to Create Rounded Corners Image in Flutter?]
1.Use ClipRRect it will work perfectly.
ClipRRect(
child: Image.network(url, width: 100, height: 150,),
)
2. Using ClipRRect you need to hardcode BorderRadius, so if you need complete circular stuff, use ClipOval.
ClipOval(
child: Image.network(url,
fit: BoxFit.cover,
height: 100,
width: 100,),
)
3. You can also use CircleAvatar, which comes with Flutter.
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
4. Container
Container(
width: 100.0,
height: 150.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: NetworkImage('Path to your image')),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Colors.redAccent,
),
),
Example: #2[Basic of Images]
import 'package:flutter/material.dart'; void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{ @override
MyAppState createState()=>MyAppState(); } class MyAppState extends State<MyApp>{ @override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Stack Widget Demo'),
centerTitle: true,
),
body:Container(
height: 200,
child: Stack(
children: <Widget>[
Image.network('http://hdwpro.com/wp-content/uploads/2015/12/Nice-Image.png')
],
),
)
);
}
}
..............................................................................................................................................................................................................................
Example: #3[MediaQuery]
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{
@override
MyAppState createState()=>MyAppState(); }
class MyAppState extends State<MyApp>{ @override
Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body:Container( height: 200, child: Stack( children: <Widget>[ Container( height: 200,
width: MediaQuery.of(context).size.width,
child: Image.network('http://hdwpro.com/wp-content/uploads/2015/12/Nice-Image.png', fit: BoxFit.fill, ), ), ], ), ) ); } }
..............................................................................................................................................................................................................................
Example: #4[withOpacity]
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{ @override
MyAppState createState()=>MyAppState(); }
class MyAppState extends State<MyApp>{ @override
Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body:Container( height: 200, child: Stack( children: <Widget>[ Container( height: 200, width: MediaQuery.of(context).size.width, child: Image.network('http://hdwpro.com/wp-content/uploads/2015/12/Nice-Image.png', fit: BoxFit.fill, ), ),
Container( color: Colors.black.withOpacity(0.5),),
Container( alignment: Alignment.bottomLeft, padding: EdgeInsets.all(20), child: Text('Great Images', style: TextStyle(fontSize: 25.0,color: Colors.white, fontWeight: FontWeight.bold)), ), ], ), ), ); } }
..............................................................................................................................................................................................................................
Example: #5[Decorations]
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{
@override
MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{
@override
Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), centerTitle: true, ), body:Container( height: 200, child: Stack( children: <Widget>[ Container( height: 200, width: MediaQuery.of(context).size.width, decoration:BoxDecoration( image: DecorationImage( image: NetworkImage('http://hdwpro.com/wp-content/uploads/2015/12/Nice-Image.png', // fit: BoxFit.fill,
), fit: BoxFit.fill
) , ), ), Container( color: Colors.black.withOpacity(0.5),), Container( alignment: Alignment.bottomLeft, padding: EdgeInsets.all(20), child: Text('Great Images',
style: TextStyle(fontSize: 25.0,color: Colors.white, fontWeight: FontWeight.bold)), ), ], ), ), ); } }
Happy Coding :)
..............................................................................................................................................................................................................................Example: #6[Positioned]
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),));
class MyApp extends StatefulWidget{ @override
MyAppState createState()=>MyAppState();
}
class MyAppState extends State<MyApp>{ @override
Widget build(BuildContext context){ return Scaffold( appBar: AppBar(), body: Center( child: Container( width: 400, height: 700, color: Colors.grey, child: Stack( alignment: Alignment.topRight, fit: StackFit.loose, overflow: Overflow.visible, children: <Widget>[ Container( color: Colors.red, width: 200, height: 200, ),
Positioned(
bottom: -50,
//bottom: 0,
right: 0, child: Container( width: 100, height: 100, color: Colors.blue, ), ) ], ), ), ), ); } }
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #7[Positioned + Container]
import 'package:flutter/material.dart';
void main()=>runApp(MaterialApp(home: MyApp(),)); class MyApp extends StatefulWidget{ @override
MyAppState createState()=>MyAppState(); }
class MyAppState extends State<MyApp>{ @override
Widget build(BuildContext context){ return Scaffold( appBar: AppBar(), body: Container( child: Center( child: Stack( children: <Widget>[ Positioned( right: 0, top: 10, // width: 200,
//height: 200,
child: Container( width: 200, height: 200, child: Card( child: Text('Hello World'), elevation: 5, color: Colors.red, shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),), ), ), ), Positioned( right: 0, top: 10, // width: 200,
//height: 200,child: Container(
width: 100, height: 100, child: Card( child: Text('Hello World'), elevation: 5, color: Colors.green, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15),), ), ), ), ], ), ), ), ); } }
Example: #8[Positioned]
..............................................................................................................................................................................................................................
Example: #9[Image Blur Effect using ImageFilters and BackdropFilters.]
import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key:key);
final String title = "Image Filter Demo";
@override
BackDropFilterDemoState createState() => BackDropFilterDemoState();
}
class BackDropFilterDemoState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.white,
child: Center(
child: Stack(
children: <Widget>[
Image.asset(
"assets/images/d.jpg",
width: 400,
height: 300,
fit: BoxFit.fill,
),
Positioned(
top: 10,
bottom: 100,
left: 30,
right: 30,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
)
],
),
),
),
);
}
}
..............................................................................................................................................................................................................................
Example: #10[CircleAvatar]
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: CircleAvatar(
radius: 100.0,
backgroundImage: AssetImage('assets/images/d.jpg'),
),
),
);
}}
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #11[Cached NetWork Images]
..............................................................................................................................................................................................................................
Example: #11[Cached NetWork Images]
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cached Image network'),
),
body: GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) {
return CachedNetworkImage(
imageUrl: 'https://loremflickr.com/200/200/music?lock=$index',
placeholder: _placeholder,
errorWidget: _error,
);
},
),
);
}
Widget _placeholder(BuildContext context, String url){
return Center(
child: CircularProgressIndicator(),
);
}
Widget _error(BuildContext context, String url, dynamic error){
return Center(
child: Icon(Icons.error_outline),
);
}
}
..............................................................................................................................................................................................................................
Example: #12[How to Cache Images in Flutter?]
Implementation
Step: #1
The first step is to include cached_network_image inside pubspec.yaml as shown below.
cached_network_image: ^2.3.3
Step: #2
This is a simple code snippet showing the implementation of cached_network_image. Here we make use of 3 arguments.
1. imageUrl - URL of image to be cached
2. placeholder - Placeholder Widget engages the space before the image is loaded
3. errorWidget - Error Widget will be displayed if there was an error downloading the image
CachedNetworkImage(
imageUrl: "https://images.unsplash.com/photo-1517423440428-a5a00ad493e8",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
Cached Image as the background of a Container
Container(
width: 380.0,
height: 450.0,
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
"https://images.unsplash.com/photo-1517423440428-a5a00ad493e8"
)
)
),
)
..............................................................................................................................................................................................................................
Example: #13[Image Picker]
Example: #13[Image Picker]
https://pub.dev/packages/image_picker
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
PickedFile imageUri;
final ImagePicker imagePicker = ImagePicker();
Future getImage(bool isImage) async {
var image = await imagePicker.getImage(
source: (isImage == true) ? ImageSource.camera : ImageSource.gallery);
setState(() {
imageUri = image;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
centerTitle: true,
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
child: Icon(Icons.camera),
onPressed: () {
getImage(true);
}),
FloatingActionButton(
child: Icon(Icons.photo_album), onPressed: () {
getImage(false);
}),
],
),
body: Container(
child: imageUri == null
? Text('No Image')
: Image.file(File(imageUri.path)),
),
);
}
}
Happy Coding ;)
..............................................................................................................................................................................................................................
Example: #13[CirclAvatat vs ClipOval]
Example: #13[CirclAvatat vs ClipOval]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
final imageUrl =
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEpOB50Gf-839DMNoHRlYYBAWP0TN73RHsGg&usqp=CAU';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: ListView(
children: [
Center(
child: Image.network(
imageUrl,
height: 400,
width: 400,
fit: BoxFit.cover,
),
),
SizedBox(height: 20),
Text('CircleAvatar + image do not set properly'),
CircleAvatar(
radius: 80,
backgroundImage: NetworkImage(
imageUrl),
),
SizedBox(height: 20),
Text('CircleAvatar + ClipOval'),
CircleAvatar(
radius: 80,
child: ClipOval(
child: Image.network(
imageUrl,
width: 160,
height: 160,
fit: BoxFit.cover,
),
),
)
],
),
);
}
}
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[Image with Decorations]
Example: #13[Image with Decorations]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final String imageURL =
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8dGlnZXJ8ZW58MHx8MHw%3D&auto=format&fit=crop&w=500&q=60';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: ListView(
// physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(20),
children: [
Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
imageURL,
width: 250,
height: 250,
fit: BoxFit.cover,
),
)),
SizedBox(height: 20),
Center(
child:Material(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)
),
child: Ink.image(
image: NetworkImage(imageURL),
child: InkWell(
splashColor: Colors.black.withOpacity(0.2),
onTap: () {},
),
width: 250,
height: 250,
fit: BoxFit.cover,
),
)),
SizedBox(height: 20),
Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 5)
),
child: Image.network(imageURL,
width: 250,
height: 250,
fit:BoxFit.cover
),
),
),
SizedBox(height: 20),
Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 5),
borderRadius: BorderRadius.circular(40),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(36),
child: Image.network(imageURL,
width: 250,
height: 250,
fit:BoxFit.cover
),
)
),
)
],
),
);
}
}
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[CircleAvatar]
Example: #13[CircleAvatar]
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[CircleAvatar]
Example: #13[CircleAvatar]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
final String imageURL =
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8dGlnZXJ8ZW58MHx8MHw%3D&auto=format&fit=crop&w=500&q=60';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: ListView(
padding: EdgeInsets.all(20.0),
children: [
buildImage(),
ColorFiltered(
colorFilter: ColorFilter.linearToSrgbGamma(),
child: buildImage(),
)
],
),
);
}
Widget buildImage() {
return Image.network(imageURL,
height: 250,
fit: BoxFit.cover,
//color: Colors.green,
color: Colors.red,
colorBlendMode: BlendMode.darken,
);
}
}
.............................................. Error Builder ......................................
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String imageURL =
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8dGlnZXJ8ZW58MHx8MHw%3D&auto=format&fit=crop&w=500&q=60';
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: ListView(
padding: EdgeInsets.all(20.0),
children: [
Center(
child: Image.network(imageURL,
fit: BoxFit.cover,
semanticLabel: 'This is an image of a row of plants',
errorBuilder: (context, error, stackTrace) => Container(
child: Center(
child: Text('Cannot load image!', style: TextStyle(fontSize: 24)),
),
),
),
)
],
),
);
}
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[ ClipRRect ]
Example: #13[ ClipRRect ]
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child:Image.asset("assets/images/original.jpeg"),
),
),
..............................................
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[CircleAvatar]
Example: #13[CircleAvatar]
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[CircleAvatar]
Example: #13[CircleAvatar]
Happy Coding :)
..............................................................................................................................................................................................................................
Example: #13[CircleAvatar]
Example: #13[CircleAvatar]
No comments:
Post a Comment