Tutorial and code of Avatar Design in Flutter. Copy and paste the below code as per your requirements.
avatar_glow: ^2.0.2
import 'dart:io';
import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void _enablePlatformOverrideForDesktop() {
if (!kIsWeb && (Platform.isMacOS || Platform.isWindows || Platform.isLinux)) {
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
}
}
void main() {
_enablePlatformOverrideForDesktop();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Avatar Design',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _animate = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Avatar Demo"),
),
body: Container(
child: ListView(
children: <Widget>[
Container(
width: double.infinity,
color: Color(0xff686de0),
child: AvatarGlow(
endRadius: 70,
animate: _animate,
child: Material(
elevation: 8.0,
shape: const CircleBorder(),
child: ClipOval(
child: Image.network(
'https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/272079677_305363824865544_2290162902156353422_n.jpg?stp=dst-jpg_e35_p1080x1080&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=NhlQ6JIQiEsAX-cGSsg&edm=ALQROFkBAAAA&ccb=7-4&ig_cache_key=Mjc1NTIxNTg0OTk0OTE5MzAwNg%3D%3D.2-ccb7-4&oh=00_AT9jAYpC4m4YEmw7HblXit_M1rINAvNCaZWEDnS3Xyoghw&oe=623949C3&_nc_sid=30a2ef',
height: 80,
fit: BoxFit.cover,
),
//radius: 30,
),
),
),
),
SizedBox(
height: 16.0,
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
AvatarGlow(
glowColor: Colors.blue,
endRadius: 90.0,
duration: Duration(milliseconds: 2000),
repeat: true,
showTwoGlows: true,
repeatPauseDuration: Duration(milliseconds: 100),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: ClipOval(
child: Image.network(
'https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/250090644_304111451553210_3703506688484555130_n.jpg?stp=c0.180.1440.1440a_dst-jpg_e35_s320x320&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=KHrCgrswfPsAX89zfU1&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT8c0Dt1o4p3_DaMmZN-nxqZs8f_mhIl066ub8bWdmGfdg&oe=6237D644&_nc_sid=7bff83',
height: 90,
fit: BoxFit.cover,
),
),
),
),
AvatarGlow(
glowColor: Colors.red,
endRadius: 90.0,
duration: Duration(milliseconds: 2000),
repeat: true,
showTwoGlows: true,
repeatPauseDuration: Duration(milliseconds: 100),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: ClipOval(
child: Image.network(
'https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/122248372_342673430329107_3752124439006717408_n.jpg?stp=c0.180.1440.1440a_dst-jpg_e35_s320x320&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=103&_nc_ohc=354eZVKuvgAAX9ZJkRy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT9aePwRmX0WlFh322-UdQj3lfbz4rbWAkbxKTeDuWnhZg&oe=62383286&_nc_sid=7bff83',
height: 90,
fit: BoxFit.cover,
),
),
),
),
],
),
AvatarGlow(
glowColor: Colors.cyan,
endRadius: 60.0,
duration: Duration(milliseconds: 2000),
repeat: true,
showTwoGlows: true,
repeatPauseDuration: Duration(milliseconds: 100),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: ClipOval(
child: Image.network(
'https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/64559893_2278926268822350_2656192327406265407_n.jpg?stp=dst-jpg_e35&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=EhSDDLTLSmsAX9gXugE&edm=ALQROFkBAAAA&ccb=7-4&ig_cache_key=MjA3MjY1NDgzMTg1MTQzNTI1Nw%3D%3D.2-ccb7-4&oh=00_AT_eGhypoOqSkty8rCkHO3QbRQnNqnb6IKiPKbdZCrXuWA&oe=62389177&_nc_sid=30a2ef',
height: 90,
fit: BoxFit.cover,
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_animate = !_animate;
});
},
),
);
}
}