Flutter 更改BottomNavigationBar onTap的大小

要做到这一点，一种方法是在底部导航栏附加的详细信息上方添加一个透明层.在UI的该部分中，您可以使用GestureDetector来处理手势，但这必须使用Stack来设计.以下是一个最小的代码.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: App(),
  ));
}

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool isExpanded = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.amber,
        body: Stack(
          children: [
            ///Your map view goes at the bottom of the stack
            const Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.map),
                  Text("Map view"),
                ],
              ),
            ),
            ///Your custom bottom navigation bar
            Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (isExpanded)
                    Expanded(
                      child: ExpandedView(onTap: () {
                        setState(() {
                          isExpanded = false;
                        });
                      }),
                    ),
                  BottomNavigationBar(
                    onTap: (_) {
                      setState(() {
                        isExpanded = true;
                      });
                    },
                    elevation: 0,
                    items: const [
                      BottomNavigationBarItem(
                          icon: Icon(Icons.local_taxi_outlined), label: "Taxi"),
                      BottomNavigationBarItem(
                          icon: Icon(Icons.train_outlined), label: "Train")
                    ],
                  ),
                ],
              ),
            )
          ],
        ));
  }
}

class ExpandedView extends StatelessWidget {
  final VoidCallback onTap;
  const ExpandedView({super.key, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: GestureDetector(
            //handle other gesture callbacks
            onTap: onTap,
            child: Container(
              color: Colors.transparent,
            ),
          ),
        ),
        Container(
          height: 150,
          width: MediaQuery.sizeOf(context).width,
          color: Colors.green,
        ),
      ],
    );
  }
}