如何使用提供程序flutter隐藏底部导航栏

Question

我正在开发一个社交媒体应用程序，该应用程序包含一个带有底部导航栏和5个页面的主屏幕。虽然我可以更改bool值以在提供程序下显示或隐藏导航栏，但这些更改并没有反映在小部件中。

main.dart-

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

我的提供商类别-

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.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

这就是我使用提供商的方式：

我这里有三个不同的提供者，MyThemeClass、NewMsgListener和FirebaseProvider。它们都扩展了CCD_ 4。这是我的主要：

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;
}

供应商管理对您有效吗？