如何在新建Flutter项目中实现底部导航抽屉及视图？实操遇阻求解决

Hey there! Let's tackle your two Flutter navigation questions one by one, with practical, tested code examples you can use right away.

Flutter doesn't have a built-in "bottom navigation drawer" component, but we can easily build a draggable bottom drawer using DraggableScrollableSheet—this gives you a drawer that slides up from the bottom and lets users drag it to adjust its height. Here's a complete implementation for a new Flutter project:

Replace the code in lib/main.dart with this:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Drawer Example')),
        body: const Center(child: Text('Tap the button below to open drawer')),
        floatingActionButton: FloatingActionButton(
          onPressed: () => _showBottomDrawer(context),
          child: const Icon(Icons.keyboard_arrow_up),
        ),
      ),
    );
  }

  void _showBottomDrawer(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) => DraggableScrollableSheet(
        initialChildSize: 0.3, // Starts at 30% of screen height
        minChildSize: 0.2,
        maxChildSize: 0.8,
        builder: (_, controller) => Container(
          color: Colors.white,
          child: ListView.builder(
            controller: controller,
            itemCount: 20,
            itemBuilder: (_, index) => ListTile(
              title: Text('Drawer Item $index'),
              onTap: () {
                // Handle item tap
                Navigator.pop(context);
              },
            ),
          ),
        ),
      ),
    );
  }
}

Key Notes: #

• showModalBottomSheet triggers the drawer to appear
• DraggableScrollableSheet lets users drag the drawer up/down to resize it
• Adjust initialChildSize, minChildSize, and maxChildSize to control how much of the screen the drawer takes

If your YouTube tutorial attempts didn't work, the most common issue is page state resetting when switching tabs. This implementation uses IndexedStack to preserve the state of each tab, so your users won't lose their progress when navigating.

Here's a complete working example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation View',
      home: const BottomNavScreen(),
    );
  }
}

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

  @override
  State<BottomNavScreen> createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  int _currentIndex = 0;

  // List of your tab screens
  final List<Widget> _tabs = const [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void _onTabTapped(int index) {
    setState(() => _currentIndex = index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bottom Navigation Demo')),
      // IndexedStack keeps all tabs in memory (preserves state)
      body: IndexedStack(
        index: _currentIndex,
        children: _tabs,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onTabTapped,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

// Example tab screens
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) => const Center(child: Text('Home Tab'));
}

class SearchScreen extends StatelessWidget {
  const SearchScreen({super.key});

  @override
  Widget build(BuildContext context) => const Center(child: Text('Search Tab'));
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) => const Center(child: Text('Profile Tab'));
}

Why This Works: #

• BottomNavigationBar handles the tab selection UI
• IndexedStack maintains the state of all tabs (so if you have a form in one tab, the input won't disappear when you switch away)
• The _onTabTapped method updates the current index to switch between tabs

Just copy this code into your project, and you can customize the tab icons, labels, and screen content to fit your needs.

内容的提问来源于stack exchange，提问作者HRISHIKESH DESHMUKH