如何全局修改Flutter应用的Scaffold组件以统一实现点击隐藏键盘功能

完全可以实现全局生效的Scaffold统一配置，共有两种主流实现方案，适配不同项目场景：

方案1：封装自定义Scaffold组件（推荐，灵活度最高） #

适合新开发项目，后续可以随时扩展其他全局Scaffold配置，维护成本低。

实现代码 #

import 'package:flutter/material.dart';

class CommonScaffold extends StatelessWidget {
  // 按需透传Scaffold所有原生参数
  final Widget? body;
  final Color? backgroundColor;
  final PreferredSizeWidget? appBar;
  final Widget? floatingActionButton;
  final Widget? bottomNavigationBar;
  final bool? resizeToAvoidBottomInset;

  const CommonScaffold({
    super.key,
    this.body,
    this.backgroundColor = Colors.transparent,
    this.appBar,
    this.floatingActionButton,
    this.bottomNavigationBar,
    this.resizeToAvoidBottomInset,
    // 其他Scaffold参数可继续补充透传
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: appBar,
      floatingActionButton: floatingActionButton,
      bottomNavigationBar: bottomNavigationBar,
      resizeToAvoidBottomInset: resizeToAvoidBottomInset,
      // 剩余透传参数统一赋值
      body: SafeArea(
        child: GestureDetector(
          // 空白区域也能响应点击
          behavior: HitTestBehavior.opaque,
          onTap: () {
            // 官方推荐的隐藏键盘写法，兼容全版本
            FocusManager.instance.primaryFocus?.unfocus();
          },
          child: body ?? const SizedBox.shrink(),
        ),
      ),
    );
  }
}

使用方法 #

全局替换所有页面的Scaffold为CommonScaffold即可，后续需要调整全局Scaffold逻辑时仅需修改这一个组件。

方案2：通过MaterialApp全局builder注入（零侵入存量代码） #

适合已经有大量存量页面、不想逐个修改Scaffold引用的项目，无需改动现有页面代码即可全局生效。

实现代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '全局配置Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      // 核心全局拦截逻辑
      builder: (context, child) {
        return GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: child,
        );
      },
      home: const HomePage(),
    );
  }
}

注意事项 #

如果个别页面需要禁用该逻辑，只需在对应页面的根节点添加GestureDetector消费onTap事件，即可拦截全局逻辑。

优化说明 #

你原有代码中FocusScope.of(context).requestFocus(FocusNode())的写法已经过时，新版Flutter推荐使用FocusManager.instance.primaryFocus?.unfocus()实现隐藏键盘，性能更优且没有创建多余FocusNode的内存开销。

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