如何使用提供程序 flutter 隱藏底部導航欄

Question

我正在開發一個社交媒體應用程序，其中包含一個帶有底部導航欄和 5 個頁面的主屏幕。 盡管我可以更改布爾值以在提供程序下顯示或隱藏導航欄，但更改並未反映在小部件中。

main.dart -

MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => 
ScrollProvider(),
        ),
      ],
child : MyApp()

我的供應商 class -

     class ScrollProvider with ChangeNotifier{
  bool isVisible = true;

  void show() {

      isVisible = true;
      print("in Provider $isVisible");

      notifyListeners();
  }

  void hide() {

      isVisible = false;
      print("in Provider $isVisible");

      notifyListeners();

  }
}

具有值 scrollcontroller 的頁面

 ScrollController _scrollController =
      ScrollController(); 

      _scrollController.addListener(() {
     
     final direction =
          _scrollController.position.userScrollDirection;

      if (direction == ScrollDirection.forward) {
        ScrollProvider().show();
        }
      if (direction == ScrollDirection.reverse) {

          ScrollProvider().hide();
      }
    });

我的具有正文和導航欄的主屏幕包含此代碼

'''

bottomNavigationBar: Consumer<BottomBarVisibilityProvider>(
    builder: (context, bottomBarVisibilityProvider, child) =>
        AnimatedContainer(
      duration: const Duration(milliseconds: 200),
      child: bottomBarVisibilityProvider.isVisible
          ? Wrap(
              children: const [BottomBar()],
            )
          : Wrap(),
    ),
  ),

我已經在 main.dart 中初始化了提供程序

有人可以告訴我為什么它不起作用..我該怎么辦

這是主頁的完整代碼

class _HomeState extends State<Home> {
 

  List<Widget> _pages ;
  @override
  void initState() {
    super.initState();
   
    _pages = [
      MemeTabView(scrollController: scrollToHide),
      TempTab(),
      null,
      NotificationScreen(),
      ProfileScreen(uid: FirebaseAuth.instance.currentUser.uid,showAppBar: false),
    ];
  }




  @override
  Widget build(BuildContext context) {
    if (widget.selectedIndex == null) {
      widget.selectedIndex = 0;
    }

    return
      Scaffold(
      appBar: AppBar(
        title: brandName(),
      ),
      extendBody: true,
      bottomNavigationBar:
            Consumer<ScrollProvider>(
              builder: (_,scrollProvider,__){
               
                return Container(
                  child: scrollProvider.isVisible == true
                      ?
                      bottomNav()


                      : Container(),
                );
              },
            ),


      drawer: MyDrawer(),
      body:PageView(
        controller: _pageController,
       
        physics: NeverScrollableScrollPhysics(),
        children: _pages,
      ),
    );
  }

Answer 1

您需要閱讀提供者，例如

context.read<BottomBarVisibilityProvider>();

void main() {
  runApp(
    /// Providers are above [MyApp] instead of inside it, so that tests
    /// can use [MyApp] while mocking the providers
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => BottomBarVisibilityProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.\
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const SCCR(),
    );
  }
}

class SCCR extends StatefulWidget {
  const SCCR({Key? key}) : super(key: key);

  @override
  State<SCCR> createState() => _SCCRState();
}

class _SCCRState extends State<SCCR> {
//just for test purpose
  late final bottomBarVisibilityProvider =
          context.read<BottomBarVisibilityProvider>();
  late final ScrollController scrollController = ScrollController()
    ..addListener(() {
     
      final direction = scrollController.position.userScrollDirection;

      if (direction == ScrollDirection.forward) {
        if (!bottomBarVisibilityProvider.isVisible) {
          bottomBarVisibilityProvider.show();
        }
      } else if (direction == ScrollDirection.reverse) {
        if (bottomBarVisibilityProvider.isVisible) {
          bottomBarVisibilityProvider.hide();
        }
      }
    });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: scrollController,
        child: Container(
          height: 3333,
        ),
      ),
      bottomNavigationBar: Consumer<BottomBarVisibilityProvider>(
        builder: (context, bottomBarVisibilityProvider, child) =>
            AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          child: bottomBarVisibilityProvider.isVisible
              ? Wrap(
                  children: [
                    Container(
                      height: 100,
                      color: Colors.red,
                      width: 100,
                    )
                  ],
                )
              : null,
        ),
      ),
    );
  }
}

我會建議遵循文檔

Answer 2

這就是我使用我的提供者的方式：

我在這里有 3 個不同的提供者， MyThemeClass ， NewMsgListener和FirebaseProvider 。 它們都擴展了ChangeNotifierProvider 。 這是我的主要內容：

import 'package:my_app/my_firebase.dart';
import 'package:my_app/global.dart';
import 'package:provider/provider.dart';
import 'package:navigation_history_observer/navigation_history_observer.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:my_app/firebase_options.dart';
import 'package:my_app/screens/welcome_screen.dart';
import 'package:my_app/new_msg_listener.dart';
import 'package:my_app/provider_updates.dart';
import 'package:my_app/theme.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  MyFirebase.myFutureFirebaseApp =
      Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  final NewMsgListener newMsgListener = NewMsgListener();
  final MyThemeClass myThemeClass = MyThemeClass();
  await myThemeClass.getMyTheme();
  print('getMyTheme() is ready');

  await MyFirebase.myFutureFirebaseApp;

  runApp(MyApp(myThemeClass, newMsgListener));
}

class MyApp extends StatelessWidget {
  const MyApp(this.myThemeClass, this.newMsgListener, {Key? key})
      : super(key: key);
  final MyThemeClass myThemeClass;
  final NewMsgListener newMsgListener;

  @override
  Widget build(BuildContext context) {
    print('Building $runtimeType');
    FirebaseProvider firebaseProvider = FirebaseProvider();

    firebaseProvider.initialize(GlobalVariable.navState);

    return MultiProvider(
        providers: [
          ChangeNotifierProvider<FirebaseProvider>(
              create: (context) => firebaseProvider),
          ChangeNotifierProvider(create: (context) => myThemeClass),
          ChangeNotifierProvider(create: (context) => newMsgListener),
        ],
        builder: (context, child) {
          return MaterialApp(
            theme: Provider.of<MyThemeClass>(context).currentTheme,
            home: WelcomeScreen(myThemeClass),
            debugShowCheckedModeBanner: false,
            navigatorObservers: [NavigationHistoryObserver()],
            navigatorKey: GlobalVariable.navState,
          );
        });
  }
}

並不是說它很重要，但我的my_firebase.dart文件看起來像這樣（這樣您就不必懷疑:)：

import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart' as auth;
import 'package:my_app/firebase_labels.dart';

class MyFirebase {
  static Future<FirebaseApp>? myFutureFirebaseApp;  //Initialized from main()
  static FirebaseFirestore storeObject = FirebaseFirestore.instance;
  static auth.FirebaseAuth authObject = auth.FirebaseAuth.instance;
}

該提供商管理對您有用嗎？