Flutter中如何让AppBar内部容器占屏幕80%宽度并调整汉堡图标位置？

需求描述 #

希望NavBar的内部容器占据屏幕宽度的80%，使用AppBar Widget实现该需求，具体是让endDrawer生成的右侧汉堡图标向左移动10%（即距离屏幕右边缘10%宽度）。

当前NavBar效果如下：

实现方案 #

可以通过自定义AppBar的title组件达成需求，核心思路：

• 用SizedBox创建占屏幕80%宽度的容器作为AppBar的title
• 开启centerTitle: true让容器居中，自动形成左右各10%的留白
• 在容器内添加手动控制的汉堡图标并对齐到右侧，使其自然处于距离屏幕右边缘10%的位置

修改后的完整代码 #

import 'package:flutter/material.dart';

// 假设自定义颜色已定义
const kYellowColor = Color(0xFFFFD700);
const kBlackColor = Color(0xFF000000);

class Navbar extends StatefulWidget {
  const Navbar({Key? key, required this.child}) : super(key: key);
  final Widget child;

  @override
  State<Navbar> createState() => _NavbarState();
}

class _NavbarState extends State<Navbar> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    
    return Scaffold(
      key: scaffoldKey,
      endDrawer: Drawer(
        backgroundColor: kYellowColor,
        child: Column(
          children: const [
            Text('Form'),
            Text('Receipt'),
          ],
        ),
      ),
      appBar: AppBar(
        backgroundColor: kYellowColor,
        iconTheme: const IconThemeData(color: kBlackColor),
        automaticallyImplyLeading: false,
        centerTitle: true,
        title: SizedBox(
          width: screenWidth * 0.8,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () => scaffoldKey.currentState?.openEndDrawer(),
              ),
            ],
          ),
        ),
      ),
      body: widget.child,
    );
  }
}

关键说明 #

1. 通过MediaQuery获取屏幕宽度，计算出80%的宽度值
2. SizedBox作为AppBar的title，配合centerTitle: true实现居中的80%宽度容器
3. 手动添加IconButton替代自动生成的endDrawer图标，通过MainAxisAlignment.end对齐到容器右侧
4. 点击图标时通过scaffoldKey手动触发endDrawer的打开操作

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