How To Create Circle Imageview Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

Circle or Circular images are looking cool. Really, like we are used to seeing them almost everywhere, and as I could not find any example for doing this I thought that I could make a really simple one.In this example, I will show just a basic screen with a circle image and a text underneath, and loading the image from url, if you are trying to load a asset image, just replace NetworkImage with AssetImage, and will do the thing.

How To Create Circle Imageview Using Flutter Android App

Circle Imageview
Complete Code For Circle Imageview In Flutter
main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        title: 'Flutter Circle Imageview',
        theme: ThemeData(
            fontFamily: 'sriracha'
        ),
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.lightGreen,
            title: Text("Flutter Circle Imageview"
            ),),
          body: Center(
            child: Container(
              child: Expanded(
                  child: Column(
                    children: [
                      SizedBox(height: 10,),
                      Text("Image From Network",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 15
                        ),),
                      SizedBox(height: 20,),
                      Container(
                          width: 190.0,
                          height: 190.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ0JhaimSD1ayvA9vffVRcueFMd8MqD5cJH9A&usqp=CAU")
                              )
                          )),
                      SizedBox(height: 20),
                      Text("Image From Assets",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 15
                        ),
                      ),
                      SizedBox(height: 20,),
                      Container(
                          width:200.0,
                          height: 200.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new AssetImage(
                                      "assets/images/img.jpg")
                              )
                          )),
                    ],

                  )),
            ),
          ),)
    );
  }
}

Related Post