Flutter add TextField under Appbar

I want to add textfield in bottom appbar. I used bottom and PreferredSize in my appbar, but the textfield still not showing

this is the image
enter image description here

and this is all code

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 to like this
enter image description here