Flutter: Đặt chiều cao của AppBar

Làm cách nào để tôi có thể đơn giản đặt chiều cao của AppBartrong Flutter?

Tiêu đề của thanh phải được căn giữa theo chiều dọc (trong đó AppBar).

Bạn có thể sử dụng 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: // ...
      )
    );
  }
}

Bạn có thể sử dụng PreferredSizevà flexibleSpacecho nó:

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

Bằng cách này bạn có thể giữ elevationcủa AppBarđể giữ cái bóng của nó có thể nhìn thấy và có chiều cao tùy chỉnh, đó là những gì tôi đã chỉ tìm kiếm. Tuy nhiên, bạn phải đặt khoảng cách SomeWidget.

Tại thời điểm viết bài này, tôi không hề hay biết PreferredSize. Câu trả lời của Cinn là tốt hơn để đạt được điều này.

Bạn có thể tạo tiện ích con tùy chỉnh của riêng mình với chiều cao tùy chỉnh:

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

Ngoài câu trả lời của @ Cinn, bạn có thể xác định một lớp như thế này

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

hoặc theo cách này

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

và sau đó sử dụng nó thay vì tiêu chuẩn

Câu trả lời của Cinn rất tuyệt, nhưng có một điều sai với nó.

Các PreferredSizewidget sẽ bắt đầu ngay lập tức ở phía trên cùng của màn hình, mà không chiếm trên thanh trạng thái, vì vậy một số chiều cao của nó sẽ được lu mờ bởi chiều cao thanh trạng thái của. Điều này cũng giải thích cho các khía cạnh.

Giải pháp : Bao bọc preferredSizeđứa trẻ của bằng mộtSafeArea

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

Nếu bạn không muốn sử dụng thuộc tính flexSpace, thì không cần tất cả những điều đó, vì các thuộc tính khác của AppBarwill tự động chiếm thanh trạng thái.

Nếu bạn đang ở trong Visual Code, hãy Ctrl + Click vào chức năng AppBar.

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

Và chỉnh sửa đoạn này.

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

Sự khác biệt của chiều cao!