Flutter add TextField under Appbar

I'm trying to add a TextField to the bottom of my app bar using Flutter. However, the TextField is not showing up as expected. I'm using the PreferredSize widget to set the height, but it still doesn't appear. Here's what I've done so far:

This is the image. I'm using a PreferredSize widget to include the TextField in the bottom parameter of the AppBar. Below is the code snippet I'm using:

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...',
                ),
              ),
            )),
      ),
    );
  }
}

I want the TextField to appear at the bottom of the app bar, similar to this example image.

How can I properly display the TextField at the bottom of the AppBar so that it looks like the example image? Am I missing something in the configuration or layout?

AppBar(
      toolbarHeight: 80,
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Title"),
          TextField(
            decoration: InputDecoration(hintText: "Your text"),
          )
        ],
      ),
    ),