I'm still relatively new to flutter and even newer to Provider so I may be entirely off with this but from what I've read it looks correct.
General idea is there's a header widget with a button that will either open an endrawer or bring the user to a login page depending on the state of the app.
Login works and the states all are working correctly but only on the login widget. When the user is routed back to the main screen - the state is still in its default state even though the state gets set on a successful login.
The widget tree is like so:
Main
|_ HomeScreen
| |_ AppHeader
|_ Login
main.dart
Widget build(BuildContext context) {
return MultiProvider (
providers: [
ChangeNotifierProvider (create: (_) => LoginState(),)
],
child: MaterialApp(
title: kAppTitle,
theme: alcDefaultLightTheme(),
home: HomeScreen(title: "kAppTitle"),
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
const AlcLocalizationsDelegate(),
],
supportedLocales: [
const Locale(kEn),
const Locale(kFr),
],
initialRoute: HomeScreen.id,
routes: {
LoadingScreen.id: (context) => LoadingScreen(),
HomeScreen.id: (context) => HomeScreen(title: kAppTitle),
}),
);
}
home_screen.dart
class HomeScreen extends StatefulWidget {
static const String id = 'home_screen';
HomeScreen({Key key, this.title}) : super(key: key);
final String title;
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
AccountDrawerOpen() {
_scaffoldKey.currentState.openEndDrawer();
FirebaseAnalytics().logEvent(
name: 'account_drawer_open',
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
...display code here
body: AppHeader()
);}
}
And this is where I need to access the state to determine if the player is logged in or not
app_header.dart
import 'package:provider/provider.dart';
class AppHeader extends StatelessWidget {
#override
Widget build(BuildContext context) {
LoginState testLoginState = Provider.of<LoginState>(context);
return Column(
children: <Widget>[
FlatButton(
child: Text('Check state'),
onPressed: () {
print("APP HEADER | STATE IS NOW ${testLoginState.status}");
},
)
],
);
}
}
Lastly, here's my LoginState.dart
enum Status {
Authenticated,
Authenticating,
Unauthenticated,
InvalidLogin
}
class LoginState with ChangeNotifier {
Status _status = Status.Unauthenticated;
Status get status => _status;
Future signIn(String email, String password) async {
try {
_status = Status.Authenticating;
notifyListeners();
... goes to the DB, some logic happens and returns true
_status = Status.Authenticated;
notifyListeners();
print("FROM LOGIN STATE: $_status");
} catch (e) {
print('Oops');
_status = Status.InvalidLogin;
notifyListeners();
}
}
Any help is appreciated, thanks for your help.
Figured it out. In my Login widget - I had a ChangeNotifierProvider which changes the context. So in this case - this changed the context to the lowest possible widget - the login widget.
Related
I'm just started with flutter bloc. I want to make a movie listing app, create your own lists and share your friends etc.
The problem is, when i tapped to logout button, UI does not update.
Here's where i try to change the UI. If the state is Authenticated(), I'm returning WatchlistNavBar(), if the state is Unauthenticated() I'm returning WelcomeView() for login or register.
If the user has submitted email and password correctly, WatchlistNavBar() is building. Everything works fine. But when the user tries the logout, WelcomeView() does not build.
By the way BlocNavigate() class is called in MaterialApp()'s home property.
class BlocNavigate extends StatelessWidget {
const BlocNavigate({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
if (state is Loading) {
return const LoadingWidget();
} else if (state is Authenticated) {
return const WatchlistNavBar();
} else if (state is Unauthenticated) {
return const WelcomeView();
} else {
return const SignInView();
}
},
);
}
}
AuthBloc:
class AuthBloc extends Bloc<AuthEvent, AuthState> {
AuthRepository authRepository = AuthRepository();
AuthBloc(this.authRepository) : super(AuthInitial()) {
on<AuthenticationStarted>(_onAuthStarted);
on<AuthenticationSignedOut>(_onSignOut);
}
_onAuthStarted(AuthenticationStarted event, Emitter<AuthState> emit) async {
UserModel user = await authRepository.getCurrentUser().first;
if (user.uid != "uid") {
emit(Authenticated());
} else {
emit(Unauthenticated());
}
}
_onSignOut(AuthenticationSignedOut event, Emitter<AuthState> emit) async {
authRepository.signOut();
emit(Unauthenticated());
}
}
AuthState:
abstract class AuthState extends Equatable {
const AuthState();
#override
List<Object> get props => [];
}
class AuthInitial extends AuthState {}
class Authenticated extends AuthState {}
class Unauthenticated extends AuthState {}
class Loading extends AuthState {}
And this is the logout button, where i add AuthenticationSignedOut() to AuthBloc():
class LogoutButton extends StatelessWidget {
const LogoutButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return IconButton(
icon: const Icon(Icons.exit_to_app, color: Colors.black),
onPressed: () {
context.read<AuthBloc>().add(AuthenticationSignedOut());
});
}
}
My main function and MaterialApp():
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
Bloc.observer = AppBlocObserver();
runApp(
MultiBlocProvider(providers: [
BlocProvider(create: (context) => FormBloc()),
BlocProvider(create: (context) => DatabaseBloc(DatabaseRepositoryImpl())),
BlocProvider(
create: (context) =>
AuthBloc(AuthRepository())..add(const AuthenticationStarted())),
BlocProvider(
create: (context) => FavoritesBloc()..add(const FavoritesLoad()))
], child: const WatchlistApp()),
);
}
class WatchlistApp extends StatelessWidget {
const WatchlistApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Watchlist',
theme: WatchlistTheme.mainTheme,
home: const BlocNavigate(),
);
}
}
As i said, i'm new to flutter bloc and don't know exactly what I'm doing wrong. If you need more information please let me know.
The problem is that I would like to show a loading indicator when the user tries to fetch some data from an api. But when the user presses the button, loading indicator shows once. But I would like to show the loading indicator every time when the user tries to fetch. It works but as I say It works once. Could anyone have any idea what can cause this problem? Here's the minimal code to reproduce the issue:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(create: (_) => HomeCubit()),
],
child: const MaterialApp(
title: 'Flutter Bloc Demo',
home: HomeView(),
),
);
}
}
class HomeView extends BaseView<HomeCubit, HomeState> {
const HomeView({Key? key}) : super(key: key);
#override
Widget builder(HomeCubit cubit, HomeState state) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(state.count.toString()),
ElevatedButton(
onPressed: cubit.increment,
child: const Text('Increase'),
),
],
),
);
}
}
class HomeState extends BaseState {
final int count;
HomeState({required this.count});
HomeState copyWith({
int? count,
}) {
return HomeState(
count: count ?? this.count,
);
}
}
class HomeCubit extends BaseCubit<HomeState> {
HomeCubit() : super(HomeState(count: 0));
void increment() {
flow(() async {
await Future.delayed(const Duration(seconds: 1));
emit(state.copyWith(count: state.count + 1));
});
}
}
#immutable
abstract class BaseView<C extends StateStreamable<S>, S extends BaseState>
extends StatelessWidget {
const BaseView({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) {
return BaseCubit(context.read<S>());
},
child: Scaffold(
body: BlocBuilder<C, S>(
builder: (context, state) {
final cubit = context.read<C>();
if (state.loadingState == LoadingState.loading) {
return loadingWidget;
}
return builder.call(cubit, state);
},
),
),
);
}
Widget builder(C cubit, S state);
Widget get loadingWidget => const Center(
child: CircularProgressIndicator(),
);
}
enum LoadingState { initial, loading, loaded }
class BaseState {
LoadingState loadingState;
BaseState({
this.loadingState = LoadingState.initial,
});
}
class BaseCubit<S extends BaseState> extends Cubit<S> {
BaseCubit(S state) : super(state);
Future<void> flow(Future<void> Function() function) async {
state.loadingState = LoadingState.loading;
emit(state);
await function();
state.loadingState = LoadingState.loaded;
emit(state);
}
}
Is it overengineering? I don't think you are duplicating much code if you just use BlocBuilder instead of some base class.
If bloc already exist you should provide it by BlocProvider.value instead of BlocProvider(create: read())
You should use context.watch instead of context.read to get a new value every time the state changes. context.read receives state only once.
It's overengineering, please take a look at https://bloclibrary.dev/#/coreconcepts. There are enough tutorials to catch the basic idea.
Then try to use bloc + freezed. Here is an example https://dev.to/ptrbrynt/why-bloc-freezed-is-a-match-made-in-heaven-29ai
I have 3 page (all statefull widgets) :
Home page
Weather page
Setting page
The things is when i'm going from home page to weather page with a "Navigator.pushNamed" and going from the weather page to home page with a "Navigator.pop", the next time i'm trying to go to the weather page from the home page, initState method is called again...
How i can manage to make it call only the first time and not been called every time i push into the weather page ?
Here my app.dart code :
import 'package:exomind/src/core/views/home_view.dart';
import 'package:exomind/src/features/weather/presentation/views/weather_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import '../injection_container.dart';
import 'core/styles/colors.dart';
import 'features/settings/presentation/bloc/settings_bloc.dart';
import 'features/settings/presentation/views/settings_view.dart';
import 'features/weather/presentation/bloc/weather_bloc.dart';
/// The Widget that configures your application.
class MyApp extends StatelessWidget {
const MyApp({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
// Glue the SettingsController to the MaterialApp.
//
// The AnimatedBuilder Widget listens to the SettingsController for changes.
// Whenever the user updates their settings, the MaterialApp is rebuilt.
return MultiBlocProvider(
providers: [
BlocProvider<WeatherBloc>(
create: (_) => serviceLocator<WeatherBloc>()),
BlocProvider<SettingsBloc>(
create: (_) => serviceLocator<SettingsBloc>()
..add(
const SettingsLoaded(),
)),
],
child:
BlocBuilder<SettingsBloc, SettingsState>(builder: (context, state) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// Providing a restorationScopeId allows the Navigator built by the
// MaterialApp to restore the navigation stack when a user leaves and
// returns to the app after it has been killed while running in the
// background.
restorationScopeId: 'app',
// Provide the generated AppLocalizations to the MaterialApp. This
// allows descendant Widgets to display the correct translations
// depending on the user's locale.
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en', ''), // English, no country code
],
// Use AppLocalizations to configure the correct application title
// depending on the user's locale.
//
// The appTitle is defined in .arb files found in the localization
// directory.
onGenerateTitle: (BuildContext context) =>
AppLocalizations.of(context)!.appTitle,
// Define a light and dark color theme. Then, read the user's
// preferred ThemeMode (light, dark, or system default) from the
// SettingsController to display the correct theme.
theme:
ThemeData(fontFamily: 'Circular', primaryColor: kPrimaryColor),
darkTheme: ThemeData.dark(),
themeMode: state.themeMode,
// Define a function to handle named routes in order to support
// Flutter web url navigation and deep linking.
onGenerateRoute: (RouteSettings routeSettings) {
return MaterialPageRoute<void>(
settings: routeSettings,
builder: (BuildContext context) {
switch (routeSettings.name) {
case SettingsView.routeName:
return const SettingsView();
case WeatherView.routeName:
return const WeatherView();
case HomeView.routeName:
return const HomeView();
default:
return const HomeView();
}
},
);
},
);
}));
}
}
Here my home_view.dart code :
import 'package:flutter/material.dart';
import '../../features/weather/presentation/views/weather_view.dart';
class HomeView extends StatefulWidget {
const HomeView({Key? key}) : super(key: key);
static const routeName = '/home';
#override
State<HomeView> createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView>
with SingleTickerProviderStateMixin {
late AnimationController rotationController;
#override
void initState() {
rotationController =
AnimationController(duration: const Duration(seconds: 1), vsync: this)
..repeat();
super.initState();
}
#override
void dispose() {
rotationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final double height = MediaQuery.of(context).size.height;
final double width = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
top: (height / 2),
child: RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(rotationController),
child: IconButton(
icon: const Icon(Icons.wb_sunny),
color: Colors.yellow,
iconSize: (width * 0.2),
onPressed: () {
Navigator.of(context).pushNamed(WeatherView.routeName);
},
),
),
)
],
),
);
}
}
Here my weather_view.dart code :
import 'dart:async';
import 'package:exomind/src/features/weather/presentation/bloc/weather_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:percent_indicator/percent_indicator.dart';
class WeatherView extends StatefulWidget {
const WeatherView({Key? key}) : super(key: key);
static const routeName = '/weather';
#override
State<WeatherView> createState() => _WeatherViewState();
}
class _WeatherViewState extends State<WeatherView>
with SingleTickerProviderStateMixin {
#override
void initState() {
print("initcalled")
super.initState();
}
#override
void dispose() {
rotationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
super.build(context);
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
return Scaffold();
}
}
Any help and explanation would be appreciate :)
I can't think of a "clean" way of not executing the initState in _WeatherViewState. Are you trying to avoid the same city added to the WeatherBloc more than once? If so, I'd check for the existence of 'city' in the WeatherBloc before adding.
In your onGenerateRoute you call the WeatherView constructor each time:
case WeatherView.routeName:
return const WeatherView();
This in turn will call initState. What you need to do is create the WeatherView page widget once and use it in the onGenerateRoute:
final _weatherView = const WeatherView();
In your onGenerateRoute:
case WeatherView.routeName:
return _weatherView;
As #RoslanAmir said there is no way to prevent initstate of been called each time we push into a statefulwidget.
So to prevent my event of being added into my bloc each time we push into the stateful widget i add a bool variable to each state to know if the event should be added or not again.
For those who want a precise answer don't hesitate.
Just add a parameter to the Weather page: a boolean that specifies if the rebuild is true or false. (If true, it will call the initState())
This code works fine.
class WeatherView extends StatefulWidget {
final bool rebuild;
static const routeName = '/weather';
WeatherView({
Key? key,
required this.rebuild,
}) : super(key: key);
#override
State<WeatherView> createState() => _WeatherViewState();
}
and the WeatherViewState's initState() will be:
#override
void initState() {
if (widget.rebuild) {
print("initcalled");
super.initState();
} else {
print("Not called");
}
}
So, in your app.dart you should now route to the page by doing
case WeatherView.routeName:
return const WeatherView(rebuild: true); //Choose if rebuild or not by true and false
Hi I'm new to Flutter and Provider and can't make sense of this error. Basically I'm using MultiProvider to manage the states like below, and this works really great for one of them (Auth) but not other(User) even though I'm using them in the same way.
I get this error.
Note there are actually more providers, but simplified it for sake of simpler code example
Error
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following ProviderNotFoundException was thrown building StartPage(dirty, dependencies: [_InheritedProviderScope<Auth>, _InheritedProviderScope<UserLocation>, _InheritedProviderScope<UserState>, _InheritedProviderScope<BottomNavigationBarProvider>]):
Error: Could not find the correct Provider<User> above this StartPage Widget
To fix, please:
* Ensure the Provider<User> is an ancestor to this StartPage Widget
* Provide types to Provider<User>
* Provide types to Consumer<User>
* Provide types to Provider.of<User>()
* Ensure the correct `context` is being used.
If none of these solutions work, please file a bug at:
Main.dart
class SchoolApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Auth()),
ChangeNotifierProvider(create: (_) => User()),
],
child: HomePage(),
));
}
}
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
UserState _userState = Provider.of<UserState>(context);
switch (_userState.status) {
case UserStatus.UnAuthenticated:
return LoginScreen();
case UserStatus.Authenticated:
return StartPage();
}
}
}
StartPage.dart
class StartPage extends StatelessWidget with ChangeNotifier {
Timer timer;
#override
Widget build(BuildContext context) {
final _auth = Provider.of<Auth>(context);
final _user = Provider.of<User>(context, listen: true);
...
User.dart
class User extends ChangeNotifier{
Firestore db = Firestore.instance;
String _userId, _firstName, _lastName, _school, _email, _description, _employer, _title, _name;
List<String> _ideologies, _interests, _religions;
UserType _userType;
...
Auth.dart
class Auth extends ChangeNotifier {
final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
Future<String> signInWithEmailAndPassword(String email, String password) async {
final AuthResult authResult = await _firebaseAuth.signInWithEmailAndPassword(email: email, password: password);
notifyListeners();
return authResult.user.uid.toString();
}
...
class SchoolApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<Auth>(create: (_) => Auth()),
ChangeNotifierProvider<User>(create: (_) => User()),
],
child: MaterialApp(
title: 'Flutter Demo',
home: HomePage(),
));
}
}
Wrap your MaterialApp with MultiProvider. I might have made some bracket issue in my code above
Try to wrap with Consumer the widget that requires to get date from provider:
Foo(
child: Consumer<Auth, User>(
builder: (context, auth, user, child) {
return YourWidget(a: yourProviderData, child: child);
},
child: Baz(),
),
)
You can try also wrap your code with the widget Builder(builder: (context) => ), to have access to the nearest context reference.
Answering my question for visibility. So found the answer to my question here. https://github.com/rrousselGit/provider/issues/422#issuecomment-632030627
Basically I imported the package in the wrong way, I did
import 'path/file.dart'
Instead of specifying the full path
import 'package:/path/file.dart'
I have a simple Provider class:
import 'package:flutter/foundation.dart';
class AppState with ChangeNotifier {
bool _isLoggedIn = false;
bool get isLoggedIn => _isLoggedIn;
set isLoggedIn(bool newValue) {
_isLoggedIn = newValue;
notifyListeners();
}
}
And in the login class I just set isLoggedIn to true if login is successful:
void _signInWithEmailAndPassword(appState) async {
try {
final FirebaseUser user = await _auth.signInWithEmailAndPassword(
...
);
if (user != null) {
appState.isLoggedIn = true;
appState.userData = user.providerData;
...
}
} catch (e) {
setState(() {
_errorMessage = e.message;
});
}
}
Pressing the back button on Android lets users go back to this page even after successfully logging in. So I wanted to know if Provider.of can be accessed before Widget build and redirect a user if isLoggedIn is true.
Now I have something like:
#override
Widget build(BuildContext context) {
final appState = Provider.of<AppState>(context);
...
This is only one use case for the login view, but I'm sure this functionality can be used in other cases.
If you are going to use the FirebaseUser or Logged in user throughout your app, i would suggest that you add the Provider on the highest level of your app. Example
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp();
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
StreamProvider<FirebaseUser>.value(
stream: FirebaseAuth.instance.onAuthStateChanged, // Provider here
),
],
child: MaterialApp(
title: 'My App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.green,
primarySwatch: Colors.green,
accentColor: Colors.yellow,
),
home: MainPage(),
),
);
}
}
class MainPage extends StatefulWidget {
MainPage({Key key, this.storage}) : super(key: key);
final FirebaseStorage storage;
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage>
with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
final user = Provider.of<FirebaseUser>(context); // gets the firebase user
bool loggedIn = user != null;
return loggedIn ? HomePage() : LoginPage(); // Will check if the user is logged in. And will change anywhere in the app if the user logs in
}
}
References
Fireship 185 Provider
Great Youtube video explaining the code