如何在iPhone 11/12/13中增大Flutter AppBar尺寸？附代码求助

针对你的需求，以下是几种可行的修改方式，均适配iPhone 11、12、13设备：

方法1：直接设置toolbarHeight属性 #

AppBar自带toolbarHeight参数，可直接指定高度，这是最简单的方式：

import 'package:flutter/material.dart';
import 'package:flutter_1/widgets/drawer.dart';

class Homepage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Mydrawer(),
      appBar: AppBar(
        // 自定义AppBar高度，根据需求调整数值
        toolbarHeight: 80, 
        title: const Text("ASUS",
          style: TextStyle(
            color: Colors.black
          ),),
        backgroundColor: Colors.white,
        iconTheme: const IconThemeData(color:Colors.black),
        elevation: 0.0,
      ),
      floatingActionButton: IconButton(
        onPressed: (){},
        icon: const Icon(Icons.laptop),
      ),
    );
  }
}

方法2：利用flexibleSpace自定义高度与布局 #

如果需要在AppBar内添加更多元素或更精细控制布局，可以使用flexibleSpace：

import 'package:flutter/material.dart';
import 'package:flutter_1/widgets/drawer.dart';

class Homepage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Mydrawer(),
      appBar: AppBar(
        // 设置整体高度
        toolbarHeight: 90,
        flexibleSpace: Container(
          height: 90,
          padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), // 适配状态栏高度
          alignment: Alignment.centerLeft,
          child: const Text("ASUS",
            style: TextStyle(
              color: Colors.black,
              fontSize: 20
            ),),
        ),
        backgroundColor: Colors.white,
        iconTheme: const IconThemeData(color:Colors.black),
        elevation: 0.0,
      ),
      floatingActionButton: IconButton(
        onPressed: (){},
        icon: const Icon(Icons.laptop),
      ),
    );
  }
}

方法3：自定义PreferredSizeWidget实现高度控制 #

如果需要完全自定义AppBar的结构，可创建一个继承PreferredSizeWidget的自定义组件：

import 'package:flutter/material.dart';
import 'package:flutter_1/widgets/drawer.dart';

// 自定义高尺寸AppBar
class CustomLargeAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => const Size.fromHeight(85); // 设置高度

  @override
  Widget build(BuildContext context) {
    return Container(
      height: preferredSize.height,
      color: Colors.white,
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top, left: 16),
      child: Row(
        children: [
          // 保留Drawer图标
          IconButton(
            icon: const Icon(Icons.menu, color: Colors.black),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
          const SizedBox(width: 10),
          const Text("ASUS", style: TextStyle(color: Colors.black, fontSize: 20)),
        ],
      ),
    );
  }
}

class Homepage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Mydrawer(),
      appBar: const CustomLargeAppBar(), // 使用自定义AppBar
      floatingActionButton: IconButton(
        onPressed: (){},
        icon: const Icon(Icons.laptop),
      ),
    );
  }
}

注意：iPhone 11/12/13的状态栏高度略有差异，使用toolbarHeight时，Flutter会自动适配状态栏；若使用自定义Container，通过MediaQuery.of(context).padding.top获取状态栏高度调整内边距，可确保内容不被状态栏遮挡。

内容的提问来源于stack exchange，提问作者SAMIUL BASIR