Flutter: AppBar'ın yüksekliğini ayarlama

AppBarFlutter'ın yüksekliğini nasıl basitçe ayarlayabilirim ?

Çubuğun başlığı (bunun içinde AppBar) dikey olarak ortalanmış olarak kalmalıdır .

PreferredSize'ı kullanabilirsiniz :

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

Kullanabilirsiniz PreferredSizeve flexibleSpacebunun için:

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

Eğer tutabilir Bu şekilde elevationbir AppBarben aradığı şeyi olduğu özel yükseklik, görünür gölgesini tutmak için ve var. SomeWidgetYine de aralığı ayarlamanız gerekir .

Bunu yazarken farkında değildim PreferredSize. Cinn'in cevabı bunu başarmak için daha iyidir.

Özel bir yüksekliğe sahip kendi özel widget'ınızı oluşturabilirsiniz:

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

@ Cinn'in cevabına ek olarak, bunun gibi bir sınıf tanımlayabilirsiniz

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

ya da bu şekilde

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

ve sonra standart olan yerine kullanın

Cinn'in cevabı harika, ama yanlış olan bir şey var.

PreferredSizeYüksekliğinin bazı durum çubuğunun yüksekliği gölgesinde edilecek böylece Widget, durum çubuğunda hesaba katmadan, ekranın en üstündeki hemen başlayacaktır. Bu aynı zamanda yan çentikleri de hesaba katar.

Çözüm : preferredSizeÇocuğunu birSafeArea

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

FlexibleSpace özelliğini kullanmak istemiyorsanız, tüm bunlara gerek yoktur çünkü diğer özellikleri AppBardurum çubuğunu otomatik olarak hesaplayacaktır.

Görsel Kod içindeyseniz , Ctrl + AppBar işlevine tıklayın .

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

Ve bu parçayı düzenleyin.

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

Yükseklik farkı!