Как заменить заголовок AppBar
на изображение с логотипом во флаттере?
Как заменить заголовок изображением в AppBar
Ответ 1
Свойство title
принимает Widget
, поэтому вы можете передать ему любой виджет.
Например, изображение добавлено в ресурсы
title: Image.asset('assets/title.png', fit: BoxFit.cover)
Ответ 2
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],
),
)
Ответ 3
Вы можете включить виджет любого типа, в том числе изображения.
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
fit: BoxFit.contain,
height: 32,
),
Container(
padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
],
),
)
Ответ 4
Темы приложений, вероятно, лучшие долгосрочные. (Убедитесь, что вы правильно добавили изображение логотипа в папку ресурсов и обновили файл pubspec.yaml).
- Создайте папку (например, "themes") в вашем пути /lib.
- Создайте файл "style" (например, "style.dart") в этой папке. (Используйте этот файл также для реализации различных тем для вашего приложения: цвета, шрифты и т.д.)
Создайте изображение
widget
в вашем файле стиля, например, (рост, вес, путь, выравнивание до вас):Image appLogo = new Image( image: new ExactAssetImage("assets/images/AppLogo.png"), height: 28.0, width: 20.0, alignment: FractionalOffset.center);
В поле
title
вашегоAppBar
добавьте appLogo (или что вы называетсяwidget
), вот так (не забудьте импортировать ваш файл 'style'):child: Scaffold( appBar: AppBar( title: appLogo, ),
Теперь, если вам когда-либо понадобится изменить этот логотип, вам просто нужно отредактировать файл style.dart с новым путем к изображению и этим. И если у вас разные темы и одинаковые имена ваших виджетов в каждом файле стиля, вы также сможете быстро реализовать разные стили (например, "style1", "style2" и т.д.), Просто импортировав соответствующие подать всего пару мест.