Блог

Я работаю над проектом flutter, и он содержит много экрана. Итак, я разделил нижнюю панель навигации как отдельный виджет и повторно использую его на каждом экране. Когда я перехожу на другой экран, нижняя панель навигации не выделяется как активная.

nav_bar.dart

 import 'package:flutter/material.dart';

class BottomNavigation extends StatefulWidget {
  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [themeColor, themeColorLight],
        ),
      ),
      child: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        iconSize: 28,
        fixedColor: Colors.white,
        elevation: 0,
        backgroundColor: Colors.transparent,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dashboard),
            title: Text('For you'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera, size: 55),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Health'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
        //Navigation On Tap
        onTap: (index) {
          setState(() {
            _currentIndex = index;
            switch (index) {
              case 0:
                {
                  Navigator.pushNamed(context, '/home');
                }
                break;
              case 1:
                {
                  Navigator.pushNamed(context, '/signup');
                }
                break;
              case 2:
                {
                  Navigator.pushNamed(context, '/camera');
                }
                break;
              case 3:
                {
                  Navigator.pushNamed(context, '/assistant');
                }
                break;
              case 4:
                {
                  Navigator.pushNamed(context, '/profile');
                }
            }
          });
        }, //OnTap Method Ends
      ),
    );
  }
}
  

Так я назвал виджет на экранах.

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: Container(),
      bottomNavigationBar: BottomNavigation(),
    );
  }
  

router.dart

 class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomeScreen());
      case '/signup':
        return MaterialPageRoute(builder: (_) => SignupScreen());
      default:
        return MaterialPageRoute(
          builder: (_) => Scaffold(
            body: Center(
              child: Text('No route defined for ${settings.name}'),
            ),
          ),
        );
    }
  }
}
  

Причина этого в том, что ваш BottomNavigationBar перестраивается каждый раз, когда вы переключаете экраны, поэтому состояние теряется. Вы должны передать переменную, которая отображает экран. Я обычно создаю перечисления, и поэтому, когда я создаю экран с нижней панелью, он будет выглядеть так:

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: Container(),
      bottomNavigationBar: BottomNavigation(screen: ScreenTypes.Home),
    );
  }
  

Затем в вашем BottomNavigationBar использовании это перечисление, которое вы создали в качестве индекса.