Flutter: установка высоты панели приложений

Если вы используете Visual Code, Ctrl + щелчок в функции AppBar.

Widget demoPage() {
  AppBar appBar = AppBar(
    title: Text('Demo'),
  );
  return Scaffold(
    appBar: appBar,
    body: /*
    page body
    */,
  );
}

И отредактируйте этот кусок.

app_bar.dart will open and you can find 
    preferredSize = new Size.fromHeight(kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),

Разница в росте!

На момент написания этой статьи я не знал о PreferredSize. Ответ Цинна лучше всего подходит для этого.

Вы можете создать свой собственный виджет с произвольной высотой:

import "package:flutter/material.dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new CustomAppBar("Custom App Bar"), new Container()],);
  }
}


class CustomAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0; // change this for different heights 

  CustomAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Вы можете использовать PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

Для этого можно использовать PreferredSize и flexibleSpace:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(100.0),
  child: AppBar(
    automaticallyImplyLeading: false, // hides leading widget
    flexibleSpace: SomeWidget(),
  )
),

Таким образом, вы можете оставить elevation из AppBar, чтобы его тень оставалась видимой, и иметь нестандартную высоту, что я как раз и искал. Однако вам нужно установить интервал в SomeWidget.

В дополнение к ответу @Cinn вы можете определить такой класс

class MyAppBar extends AppBar with PreferredSizeWidget {
  @override
  get preferredSize => Size.fromHeight(50);

  MyAppBar({Key key, Widget title}) : super(
    key: key,
    title: title,
    // maybe other AppBar properties
  );
}

или так

class MyAppBar extends PreferredSize {
  MyAppBar({Key key, Widget title}) : super(
    key: key,
    preferredSize: Size.fromHeight(50),
    child: AppBar(
      title: title,
      // maybe other AppBar properties
    ),
  );
}

а затем использовать его вместо стандартного

Цинн ответ - это здорово, но с ним не так одна вещь.

Виджет PreferredSize запускается сразу в верхней части экрана, без учета строки состояния, поэтому часть его высоты будет затенена высотой строки состояния. Это также учитывает боковые выемки.

Решение: обернуть дочерний элемент preferredSize в SafeArea

appBar: PreferredSize(
  //Here is the preferred height.
  preferredSize: Size.fromHeight(50.0),
  child: SafeArea(
    child: AppBar(
      flexibleSpace: ...
    ),
  ),
),

Если вы не хотите использовать свойство flexibleSpace, то в этом нет необходимости, потому что другие свойства AppBar автоматически учитывают строку состояния.

Вы можете использовать свойство toolbarHeight панели приложений, оно делает именно то, что вы хотите.

Используйте toolbarHeight:

Больше нет необходимости использовать PreferredSize. Используйте toolbarHeight с flexibleSpace.

AppBar(
  toolbarHeight: 120, // Set this height
  flexibleSpace: Container(
    color: Colors.orange,
    child: Column(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
        Text('4'),
      ],
    ),
  ),
)

Самый простой способ - использовать свойство toolbarHeight в вашем AppBar.

Пример :

AppBar(
   title: Text('Flutter is great'),
   toolbarHeight: 100,
  ),

You can add flexibleSpace property in your appBar for more flexibility

Выход:

Для получения дополнительных элементов управления используйте виджет Предпочтительный размер для создания собственной панели приложений.

Пример:

appBar: PreferredSize(
     preferredSize: Size(100, 80), //width and height 
          // The size the AppBar would prefer if there were no other constraints.
     child: SafeArea(
       child: Container(
         height: 100,
         color: Colors.red,
         child: Center(child: Text('Fluter is great')),
       ),
     ),
),

Don't forget to use a SafeArea widget if you don't have a safeArea

Выход :

просто вы можете использовать toolbarHeight

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
        elevation: 0,
        backgroundColor: white,
        toolbarHeight: 70,
        title: Align(
          alignment: Alignment.centerRight,
          child: Text(
            'Complete Installments',
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: black
            ),
          ),
        )

    ),
  ),
);

результат