Question 76028 in Flutter Question posted in
The official Flutter documentation can be found here.

How to fix the Image inside CircleAvatar when the window is being resized in flutter web

enter image description here
enter image description here

The thing is I want the image to be fixed even when the window is being resized , Here’s the code :

CircleAvatar(
     radius: 60.0,
     backgroundImage: const AssetImage('images/profile.png'),
     ),

I tried using SizedBox , FittedBox Align Center and nothing actually worked , I wondering if is it even possible to make it fix in a place

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I got it fixed by removing the BackgroundImage and also cropping the image into circular instead of default rectangle (I named it as "profile-modified"). I used Image.assest as a child of CircleAvatar and using fit: BoxFit.cover .

    The modified code looks this way :

                    CircleAvatar(
                  radius: 60.0,
                  child: Image.asset(
                    'images/profile-modified.png',
                     fit: BoxFit.cover,
                  ),
                ),

  2. 0

    change the radius of circle avatar according to screen width using media query like this.

    CircleAvatar(
     radius: MediaQuery.of(context).size.width * 0.4,
     backgroundImage: const AssetImage('images/profile.png'),
     ),

    change 0.4 to any value want

    Login or Signup to reply.
  3. 0

    Try Align Widget Like This:

      Align(
                  alignment: Alignment.topCenter,//aligns CircleAvatar to Top Center.
                  child: CircleAvatar(
                    radius: 50,//radius is 50
                    backgroundImage: NetworkImage(
                        'https://cdn.pixabay.com/photo/2015/03/03/20/42/man-657869_1280.jpg'),
                  ),
                ),

    Read This Documentation
    See This

    Image 1 And Image2

    Login or Signup to reply.
  4. 0

    you may use use [nb_utils][1] package to create responsive apps, To make responsive avatar you can use radius 40.w. so 40.w will be responsive according to width of screen.
    initialize nb_utils in main.dart file for initializing.

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await initialize();

  runApp(MyApp());
}

    Supported Platform

    1. Android
    2. Ios
    3. Windows
    4. Web
    5. Linux
    6. macos
    CircleAvatar(
             radius: 40.w,
             backgroundImage: const AssetImage('images/profile.png'),
             ),

    you may change 40.w according to your need.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search