June 7, 2020

Circular image view in Flutter

By Mohit Agrawal

Design custom circle or circular image view

Introduction

Hello 👋, this tutorial is going to be very short and crisp. Today I will show you how to design a circular image view in the flutter. This type of circular image view is commonly used for displaying an avatar or profile pic. In this post you will learn the following concepts:

  • Container widget
  • Box Decoration
  • How to import image assets in flutter project

Let me show you that what will be output of this tutorial.We will be developing this type of custom image view.

circular_image_demo
Final output

Implementation

Create a new flutter project and do the initial setup. I have named my project “circular_image_view_flutter”. You can give any name of your choice😃.

Check this post for flutter setup and installation guide on android Studio

I like to design reusable code blocks so that it can be reused multiple times without writing the same logic again and again. So today also we will design an independent custom class CircularImageView. It will be a StatelessWidget class. And here is the code for that.

class CircularImage extends StatelessWidget {
  final String imagePath;

  CircularImage(this.imagePath);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      decoration: new BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.teal, width: 10.0, style: BorderStyle.solid),
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(imagePath)
          )
      ),
    );
  }
}

This class takes an image path as a parameter. Now let me explain to you a little about this class. I am basically wrapping up an image view in a container widget of size 200 by 200. BoxDecoration is used to give custom styling effects to the container widget. Similarly, we have DecorationImage for the image view. You can call this custom class wherever you want to display a circular image view in your project. This is a complete source code for my UI as shown in the above output image.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circle Image View',
      theme: ThemeData(
        //primarySwatch: Colors.black38,
        primaryColor: Color.fromRGBO(60, 63, 64, 1),
        accentColor: Color.fromRGBO(42, 42, 42, 1)
      ),
      home: MyHomePage(title: 'Circle Image View'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color.fromRGBO(197, 103, 99, 1),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
                child: Center(child: CircularImage('images/face.jpg'))),
            Container(
              height: 110,
              decoration: new BoxDecoration(
                  color: Colors.grey[850],
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      blurRadius: 25.0, // soften the shadow
                      spreadRadius: 5.0, //extend the shadow
                      offset: Offset(
                        15.0, // Move to right 10  horizontally
                        15.0, // Move to bottom 10 Vertically
                      ),
                    )
                  ],
                  borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(80.0),
                    topRight: const Radius.circular(80.0),
                  )
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  //crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Circular Image View', style: TextStyle(color: Colors.white, fontSize: 18)),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }
}

class CircularImage extends StatelessWidget {
  final String imagePath;

  CircularImage(this.imagePath);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      decoration: new BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.teal, width: 10.0, style: BorderStyle.solid),
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(imagePath)
          )
      ),
    );
  }
}

But you will get a blank image view if you run the code now. It is because you have not imported the image assets to your project yet. If you know how to import assets in flutter then you can skip the below part.

Importing assets in flutter app

Go to pubspec.yaml file and uncomment these lines:

flutter_image_path

Now create a new folder in the root level of the project and name it “images” and put an image. I am using an image named “face.jpg” you change it accordingly. That’s all we do to import a asset in the flutter project.

Now you run the app again. If you have done everything properly then you will see the expected output. Use this circular image view in the flutter in your app. If you are facing any problems then please let me know in the comment section.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

android android beginners tutorial android tutorial Animation API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase remote config firebase tutorials flutter flutter for beginner flutter tutorial flutter UI tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial kotlin listview in flutter Lottie animation Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch wifi wifi hacking


FAQs

  1. The error “type 'Color' is not a subtype of type 'MaterialColor'”?

    Flutter will throw this type of error when you try to set a color value to the primarySwatch in the MaterialApp widget. This is because primarySwatch is not a single color but a group of colors. It has the color of the status bar, title bar, etc. If you don’t want to use primarySwatch then you need to set all the separately like this.
    primaryColor: Colors.black,
    primaryColorLight: Colors.grey,
    accentColor: Colors.blue,

  2. The error “'color != null && color.alpha == 0xFF': is not true

    Flutter will throw this error when you try to set a color value to the primaryColor in MaterialApp widget. This is because set can not set opacity of any color in MaterialApp widget, so it should be completely opaque. You need to set color value like this.
    primaryColor: Color.fromRGBO(60, 63, 64, 1)