Flutter UI #34: Fun with Avatar Design in Flutter


Flutter UI #34: Fun with Avatar Design in Flutter

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;
          });
        },
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.