Flutter中如何调整AppBar组件宽度以适配Flutter Web端显示需求

可以通过PreferredSize组件封装自定义宽度的AppBar，直接赋值给Scaffold的appBar属性即可实现需求，不需要调整原有代码的结构，也不用把AppBar移到body内部。

方案1：无侵入适配原有封装的AppBar #

如果你的getAppBarWidget()已经是封装好的通用组件，直接用如下代码即可：

import 'package:flutter/foundation.dart';

Scaffold(
  appBar: PreferredSize(
    // 保留AppBar默认高度，不需要修改
    preferredSize: const Size.fromHeight(kToolbarHeight),
    child: Center(
      child: Container(
        // Web端限制宽度400px，移动端保持全屏
        width: kIsWeb ? 400 : MediaQuery.of(context).size.width,
        // 直接使用你原有封装的AppBar方法
        child: getAppBarWidget(),
      ),
    ),
  ),
  body: Center(
    child: Container(
      width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
      child: getBodyWidget(),
    ),
  ),
)

这个方案不需要修改原有AppBar的任何逻辑，原有AppBar的标题、返回按钮、菜单按钮、样式交互都完全保留，移动端和Web端自动适配。

方案2：通过AppBar自带的flexibleSpace属性实现 #

如果需要更精细的控制AppBar的背景、元素位置，可以用如下实现：

Scaffold(
  appBar: AppBar(
    // 隐藏AppBar默认的背景和阴影，避免超出400px的部分显示
    backgroundColor: Colors.transparent,
    shadowColor: Colors.transparent,
    elevation: 0,
    // 自定义宽度限制的AppBar背景
    flexibleSpace: Center(
      child: Container(
        width: kIsWeb ? 400 : MediaQuery.of(context).size.width,
        // 替换为你原有AppBar的背景色
        color: Theme.of(context).primaryColor,
      ),
    ),
    // 原有AppBar的配置全部保留即可
    title: const Text('页面标题'),
    leading: IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    ),
  ),
  body: Center(
    child: Container(
      width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
      child: getBodyWidget(),
    ),
  ),
)

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