Как заменить заголовок изображением в 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).

  1. Создайте папку (например, "themes") в вашем пути /lib.
  2. Создайте файл "style" (например, "style.dart") в этой папке. (Используйте этот файл также для реализации различных тем для вашего приложения: цвета, шрифты и т.д.)
  3. Создайте изображение widget в вашем файле стиля, например, (рост, вес, путь, выравнивание до вас):

    Image appLogo = new Image(
    image: new ExactAssetImage("assets/images/AppLogo.png"),
    height: 28.0,
    width: 20.0,
    alignment: FractionalOffset.center);
    
  4. В поле title вашего AppBar добавьте appLogo (или что вы называется widget), вот так (не забудьте импортировать ваш файл 'style'):

    child: Scaffold(
    appBar: AppBar(
      title: appLogo,        
    ),
    
  5. Теперь, если вам когда-либо понадобится изменить этот логотип, вам просто нужно отредактировать файл style.dart с новым путем к изображению и этим. И если у вас разные темы и одинаковые имена ваших виджетов в каждом файле стиля, вы также сможете быстро реализовать разные стили (например, "style1", "style2" и т.д.), Просто импортировав соответствующие подать всего пару мест.