Flutter中如何在AppBar底部正确显示TextField？

我尝试在Flutter的AppBar底部添加TextField，但未按预期显示。已使用PreferredSize组件设置高度，却仍无法正常呈现。当前效果是TextField布局异常，无法达到预期的嵌入AppBar底部的样式，希望实现TextField规整显示在AppBar底部的效果。

当前代码片段 #

import 'package:flutter/material.dart';
import '../../utils/utils.dart';

class MaterialRequestScreen extends StatefulWidget {
  const MaterialRequestScreen({super.key});

  @override
  State<MaterialRequestScreen> createState() => _MaterialRequestScreenState();
}

class _MaterialRequestScreenState extends State<MaterialRequestScreen> {
  TextEditingController searchC = TextEditingController();

  @override
  void initState() {
    searchC.text = 'hallo';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppStrings.materialRequest),
        centerTitle: true,
        backgroundColor: AppColor.neutral50,
        bottomOpacity: 0.0,
        bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Container(
              color: Colors.red,
              child: TextField(
                controller: searchC,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: AppColor.neutral500,
                  prefixIcon: Icon(Icons.search),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'Search...',
                ),
              ),
            )),
      ),
    );
  }
}

问题原因及修复方案 #

你的代码存在以下几个关键问题导致显示异常：

• bottomOpacity设置为0：这个属性会让AppBar的底部区域完全透明，直接隐藏了Container和TextField，需要删除该配置。
• PreferredSize高度不合理：使用kToolbarHeight作为底部区域高度会让AppBar整体过高，且TextField没有足够的适配空间，建议调整为适合TextField的高度（如48）。
• Container缺少内边距：TextField直接填充Container会导致它和AppBar边缘无空隙，需要添加内边距来规整布局。
• 颜色配置冲突：Container的红色背景与AppBar及TextField的颜色不协调，建议统一背景色确保视觉连贯。

修复后的代码 #

import 'package:flutter/material.dart';
import '../../utils/utils.dart';

class MaterialRequestScreen extends StatefulWidget {
  const MaterialRequestScreen({super.key});

  @override
  State<MaterialRequestScreen> createState() => _MaterialRequestScreenState();
}

class _MaterialRequestScreenState extends State<MaterialRequestScreen> {
  TextEditingController searchC = TextEditingController();

  @override
  void initState() {
    searchC.text = 'hallo';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppStrings.materialRequest),
        centerTitle: true,
        backgroundColor: AppColor.neutral50,
        bottom: PreferredSize(
            preferredSize: const Size.fromHeight(48),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              color: AppColor.neutral50,
              child: TextField(
                controller: searchC,
                decoration: InputDecoration(
                  filled: true,
                  fillColor: AppColor.neutral200,
                  prefixIcon: const Icon(Icons.search, color: Colors.grey),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'Search...',
                  hintStyle: const TextStyle(color: Colors.grey),
                  contentPadding: const EdgeInsets.symmetric(vertical: 12),
                ),
              ),
            )),
      ),
    );
  }
}

额外优化点 #

• 添加contentPadding调整TextField内部文字与图标的间距，提升视觉舒适度。
• 统一AppBar和底部Container的背景色，避免出现突兀的色彩分割。

内容的提问来源于stack exchange，提问作者Nur Fajar Ismail