flutter custom dropdown

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

class SearchDropdownButton extends StatefulWidget {
  const SearchDropdownButton({
    Key? key,
    required this.text,
  }) : super(key: key);

  final String text;

  @override
  State<SearchDropdownButton> createState() => _SearchDropdownButtonState();
}

class _SearchDropdownButtonState extends State<SearchDropdownButton> {
  late OverlayEntry _categoryBottomBar;
  bool isDropdownOpened = false;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ElevatedButton(
        onPressed: () {
          setState(() {
            if (isDropdownOpened) {
              _categoryBottomBar.remove();
            } else {
              _categoryBottomBar =
                  _buildCategoryBottomBar(widget.text.toLowerCase());
              Overlay.of(context)!.insert(_categoryBottomBar);
            }

            isDropdownOpened = !isDropdownOpened;
          });
        },
        style: ButtonStyle(
          padding: (MediaQuery.of(context).size.width < 400)
              ? MaterialStateProperty.all(
                  const EdgeInsets.symmetric(vertical: 10, horizontal: 5))
              : MaterialStateProperty.all(
                  const EdgeInsets.symmetric(vertical: 20)),
          elevation: MaterialStateProperty.all(0),
          backgroundColor: MaterialStateProperty.all(const Color(0xFFF82A5A)),
          shape: MaterialStateProperty.all(
            const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(8),
                bottomLeft: Radius.circular(8),
              ),
            ),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              widget.text,
              style: const TextStyle(
                fontFamily: "Montserrat",
                fontWeight: FontWeight.w600,
              ),
            ),
            Icon((isDropdownOpened)
                ? Icons.keyboard_arrow_down
                : Icons.keyboard_arrow_up)
          ],
        ),
      ),
    );
  }
}

OverlayEntry _buildCategoryBottomBar(String category) {
  return OverlayEntry(
    builder: (context) {
      List<Widget> _getSubCategory() {
        List<Widget> _consumeCategory = [
          _buildSubCategoryButton(context, 'Makanan', 'pizza'),
          _buildSubCategoryButton(context, 'Minuman', 'tea'),
          _buildSubCategoryButton(context, 'Obat', 'tablet'),
        ];

        List<Widget> _gadgetCategory = [
          _buildSubCategoryButton(context, 'Top Up\nGame', 'console'),
          _buildSubCategoryButton(context, 'Isi Pulsa', 'token'),
          _buildSubCategoryButton(
              context, 'Token Air\ndan Listrik', 'lamp_and_water'),
        ];

        List<Widget> _fashionCategory = [
          _buildSubCategoryButton(context, 'Celana', 'pants'),
          _buildSubCategoryButton(context, 'Pakaian', 'pakaian'),
          _buildSubCategoryButton(context, 'Parfum', 'parfume_bottle'),
        ];

        switch (category) {
          case 'consume':
            return _consumeCategory;
          case 'gadget':
            return _gadgetCategory;
          case 'fashion':
            return _fashionCategory;
          default:
            return _consumeCategory;
        }
      }

      return Positioned(
        bottom: 0,
        child: Container(
          height: 75,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
              color: Color(0xFFF82A5A),
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(10),
                topLeft: Radius.circular(10),
              )),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: _getSubCategory(),
          ),
        ),
      );
    },
  );
}

ElevatedButton _buildSubCategoryButton(
    BuildContext context, String text, String icon) {
  return ElevatedButton(
    style: ButtonStyle(
      fixedSize: MaterialStateProperty.all(
        Size(
          MediaQuery.of(context).size.width * 0.30,
          50,
        ),
      ),
      // padding: MaterialStateProperty.all(
      //   (MediaQuery.of(context).size.width < 400)
      //   ? const EdgeInsets.symmetric(vertical: 0)
      //   : const EdgeInsets.symmetric(vertical: 20)
      // ),
      backgroundColor: MaterialStateProperty.all(const Color(0xFFFF665E)),
      elevation: MaterialStateProperty.all(0),
    ),
    onPressed: () {},
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          text,
          textAlign: TextAlign.center,
        ),
        const SizedBox(width: 7),
        SvgPicture.asset('assets/belankon-icons/$icon.svg',
            color: Colors.white),
      ],
    ),
  );
}