Flutter - Как контролировать размер изображения профиля в ящике

Question

Я бы хотел контролировать размер изображения профиля и округлять его вместо овала, как показано ниже.

Изменение значений высоты и / или ширины не влияет ни на размер, ни на соотношение,также странно то, что когда я изменяю параметр поля, он меняет радиус овальной формы.

new UserAccountsDrawerHeader(
  decoration: BoxDecoration(color: Colors.white),
  currentAccountPicture: new Container(
    margin: const EdgeInsets.only(bottom: 40.0),
    width: 10.0,
    height: 10.0,
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        fit: BoxFit.fill,
        image: new NetworkImage(
          "https://example.com/assets/images/john-doe.jpg",
        ),
      ),
    ),
  ),
  accountName: new Container(
    ...
  ),
  accountEmail: new Container(
    ...
  ),
  onDetailsPressed: () {
    ...
  },
),

Что я делаю не так?

Обновление : вышеуказанный способ - это обходной путь для CircleAvatar, который не давал никакого контроля над размером изображения.Если вы пробовали CircleAvatar другим способом, который дает контроль над размером изображения, поделитесь им, чтобы помочь.

Answer 1

Я нашел решение !!! по крайней мере, это то, что у меня сработало

    import 'package:flutter/material.dart';

    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          // Side menu
          drawer: new Drawer(
            child: GestureDetector(
              onTap: () {},
              child: ListView(
                children: <Widget>[
                  new UserAccountsDrawerHeader(
                    accountName: new Text('Hymn +'),
                    accountEmail: new Text('johndoe@gmail.com'),
                    currentAccountPicture: new CircleAvatar(
                      backgroundImage: new NetworkImage(
                          'https://miro.medium.com/max/1400/1*uC0kYhn8zRx8Cfd0v0cYQg.jpeg'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 2

Если вы используете backgroundImage в качестве поставщика изображений для CircleAvatar, то изменение свойства radius действительно не имеет никакого эффекта.Из источника circle_avatar.dart можно наблюдать, что изображение отображается как BoxFit.cover DecorationImage(image: backgroundImage, fit: BoxFit.cover) - а в user_accounts_drawer_header.dart currentAccountPicture жестко закодирован, чтобы быть SizedBox размером 72,0 пикселя, поэтому изображение всегда будет иметь размеры 72,0 пикселей.

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/user_accounts_drawer_header.dart#L57

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/circle_avatar.dart#L203

Надеюсь, команда Флаттера добавит некоторый уровень контроля в будущем.

Не ответ, просто дополнительная информация, которая, надеюсь, кому-то поможет.

Answer 3

Попробуйте:

import 'package:flutter/material.dart';

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => new _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: Center(
        child: Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Colors.white),
              currentAccountPicture: new CircleAvatar(
                radius: 50.0,
                backgroundColor: const Color(0xFF778899),
                backgroundImage:
                    NetworkImage("http://tineye.com/images/widgets/mona.jpg"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Это скриншот вывода:

Answer 4

Используйте этот код для сетевого изображения:

                new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      backgroundImage: NetworkImage("Your Photo Url"), // for Network image

                    ),

Используйте это для ресурса Image:

              new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      child: new Image.asset(
                        'images/profile.png',
                      ), //For Image Asset

                    ),

Answer 5

Оберните ваше изображение в CircleAvatar виджет.Это сделано для таких целей.

Answer 6

Вы помещаете поле внутри контейнера изображения, в то время как вам нужно использовать параметр поля в UserAccountDrawerHeader, поэтому ваше изображение стало овальным:

UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.white),
            margin: EdgeInsets.only(bottom: 40.0),                                            
          currentAccountPicture: Container(  
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image:
                        NetworkImage("https://via.placeholder.com/150"))),
          ),
          accountName: new Container(
              child: Text(
            'Name',
            style: TextStyle(color: Colors.black),
          )),
          accountEmail: new Container(
              child: Text(
            'Email',
            style: TextStyle(color: Colors.black),
          )),
        ),