Флаттер закругленное изображение профиля appBar - PullRequest
0 голосов
/ 05 мая 2018

В настоящее время я новичок в языках флаттера и дартса и пытаюсь установить изображение профиля в качестве основного атрибута моего appBar.

Пока что у меня есть округленное изображение, но я не могу сделать его меньше или наложить поле слева.

Вот фрагмент моего кода:

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: new AppBar(
          title: new Text("Activities"),
          leading: new Container(
            padding: new EdgeInsets.all(15.0),
            width: 10.0,
            height: 10.0,
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
              border: new Border.all(
                color: Colors.white,
                width: 1.0,
              ),
            ),
          ),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.refresh),
              onPressed: () {
                print("Reloading...");
                setState(() {
                  _isLoading = true;
                });
                _FetchData();
              },
            )
          ],
        ),

// ...

А вот как это выглядит: Нажмите здесь

Как видите, мое изображение слишком велико, и с левой стороны нет полей ...

Как сделать изображение меньше и, что важнее всего, сделать левое поле аналогичным правому краю кнопки обновления?

Буду признателен за любую помощь, Хорошего вам.

1 Ответ

0 голосов
/ 05 мая 2018

Попробуйте использовать Material в сочетании с shape: new CircleBorder() вместо создания круга вручную. Или CircleAvatar, если это соответствует вашим потребностям.

Затем добавьте Padding для контроля размера и поля.

return new Scaffold(
  backgroundColor: Colors.blueGrey,
  appBar: new AppBar(
    title: new Text("Activities"),
    leading: new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Material(
        shape: new CircleBorder(),
      ),
    ),
  ),
);

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...