CircleAvatar Widget in Flutter

Properties

 

  • backgroundColor
  • backgroundImage
  • child
  • foregroundColor
  • maxRadius
  • minRadius
  • onBackgroundImageError
  • radius

 

Example 1:

 

import 'package:flutter/material.dart';


void main() => runApp(DemoApp());


class DemoApp extends StatefulWidget {

  @override

  State<StatefulWidget> createState() {

    return DemoAppState();

  }

}


class DemoAppState extends State<DemoApp> {

  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      home: Scaffold(

        body: Center(

          child: CircleAvatar(

            backgroundImage: NetworkImage(

              "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

            ),

          ),

        ),

      ),

    );

  }

}

 

Example 2:

 

CircleAvatar(

            backgroundImage: NetworkImage(

              "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

            ),

            radius: 100,

            backgroundColor: Colors.blue,

          ),

 

Example 3:

 

CircleAvatar(

            backgroundImage: NetworkImage(

              "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

            ),

            radius: 100,

            backgroundColor: Colors.blue,

            child: Text('Hello'),

            foregroundColor: Colors.black,

          ),

 

Example 4:

 

CircleAvatar(

            backgroundImage: NetworkImage(

              "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

            ),

            backgroundColor: Colors.blue,

            minRadius: 100,

          ),

 

Example 5:

 

CircleAvatar(

            backgroundImage: NetworkImage(

              "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

            ),

            backgroundColor: Colors.blue,

            minRadius: 100,

            maxRadius: 800,

          ),

 

Example 6:

 

CircleAvatar(

            backgroundColor: Colors.black, 

            radius: 100,

            child: CircleAvatar(

              backgroundImage: NetworkImage(

                "https://cdn.pixabay.com/photo/2020/10/23/17/52/fox-5679446_960_720.png",

              ),

              radius: 90,

            ),

          ),

 

Video Link:

 

Post a Comment (0)
Previous Post Next Post