Flutter: Menyetel ketinggian AppBar

Bagaimana cara menyetel ketinggian AppBarin Flutter?

Judul bilah harus tetap berada di tengah secara vertikal (di situ AppBar).

Anda dapat menggunakan 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: // ...
      )
    );
  }
}

Anda dapat menggunakan PreferredSizedan flexibleSpaceuntuk itu:

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

Dengan cara ini Anda dapat menjaga elevationdari AppBaruntuk menjaga bayangannya terlihat dan memiliki tinggi adat, yang adalah apa yang saya hanya mencari. Anda memang harus mengatur jaraknya SomeWidget.

Pada saat menulis ini, saya tidak menyadarinya PreferredSize. Jawaban Cinn lebih baik untuk mencapai ini.

Anda dapat membuat widget khusus Anda sendiri dengan ketinggian khusus:

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),
        ),
      ),
    );
  }
}

Selain jawaban @ Cinn, Anda dapat menentukan kelas seperti ini

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
  );
}

atau lewat sini

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

dan kemudian gunakan sebagai pengganti standar

Jawaban Cinn bagus, tapi ada satu hal yang salah.

The PreferredSizewidget akan segera dimulai di bagian atas layar, tanpa akuntansi untuk status bar, sehingga beberapa dari puncaknya akan dibayangi oleh tingginya status bar. Ini juga menjelaskan takik samping.

Solusinya : Bungkus preferredSizeanak dengan aSafeArea

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

Jika Anda tidak ingin menggunakan properti flexibleSpace, maka tidak diperlukan semua itu, karena properti lain dari AppBarakan memperhitungkan bilah status secara otomatis.

Anda dapat menggunakan properti toolbarHeight dari Appbar, ia melakukan apa yang Anda inginkan.

Penggunaan toolbarHeight:

Tidak perlu lagi menggunakan PreferredSize. Gunakan toolbarHeightdengan flexibleSpace.

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

Jika Anda berada dalam Kode Visual, Ctrl + Klik pada fungsi AppBar.

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

Dan edit bagian ini.

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

Perbedaan ketinggian!