decide the route based on the initialization phase of flutter_native_splash - flutter

I'm writing a flutter application using flutter 2.10 and I'm debugging it using an Android Emulator
I included the flutter_native_splash plugin from https://pub.dev/packages/flutter_native_splash and I use version 2.0.1+1
the problem that I'm having is that I decide what's the first screen that the user will see based on the initialization phase. I check the stored user token, see his premissions, verify them with the server, and forward him to him relevant route.
since the runApp() function executes in the background while the initialization phase is running I cannot choose the page that will be shown. and if I try to nativgate to a route in the initialization function I get an exception.
as a workaround for now I created an init_home route with FutureBuilder that awaits for a global variable called GeneralService.defaultRoute to be set and then changes the route.
class _InitHomeState extends State<InitHome> {
#override
Widget build(BuildContext context) {
return FutureBuilder<dynamic>(
future: () async {
var waitCount=0;
while (GeneralService.defaultRoute == "") {
waitCount++;
await Future.delayed(const Duration(milliseconds: 100));
if (waitCount>20) {
break;
}
}
if (GeneralService.defaultRoute == "") {
return Future.error("initialization failed");
}
Navigator.of(context).pushReplacementNamed(GeneralService.defaultRoute);
...
any ideas how to resolve this issue properly ?

I use a Stateful widget as Splash Screen.
In the build method, you just return the 'loading' view such as Container with a background color etc. (with texts or whatever you like but just consider it as the loading screen).
In the initState(), you call a function that we can name redirect(). This should be an async function that performs the queries/checks and at the end, calls the Navigator.of(context).pushReplacementNamed etc.
class _SplashState extends State<Splash> {
#override
void initState() {
super.initState();
redirect();
}
#override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
Future<void> redirect() async {
var name = 'LOGIN';
... // make db calls, checks etc
Navigator.of(context).pushReplacementNamed(name);
}
}
Your build function just creates the loading UI, and the redirect function in the initState is the one running in the background and when it has finished computing, calls the Navigator.push to your desired page.

Related

Flutter jsonDecode FlutterSession value is not loading in widget initially. but works on hotload

i am initializing a variable with value from session. but could not print it in the widget. but it is showing after hot load. here is my code :
class _dashboardState extends State<dashboard> {
var logindata;
#override
initState() {
super.initState();
_getSession() async {
logindata = jsonDecode(await FlutterSession().get("login_data"));
}
_getSession();
}
#override
Widget build(BuildContext context) {
print(logindata); // prints null
}
}
Instead of jsonDecode(await FlutterSession().get("login_data"))
if i add any random string or number like
logindata = "Session value";
it prints normally. otherwise on hot load
only i am getting the session value.
what will be the reason?
please do help :(. i am new to flutter.
After following ideas from the comments i have updated the code as follows:
class _dashboardState extends State<dashboard> {
var logindata;
#override
void initState() {
getSessionValue().then((logindata) {
setState(() {
logindata = logindata;
});
});
super.initState();
}
Future<void> getSessionValue() async {
logindata = jsonDecode(await FlutterSession().get("login_data"));
return logindata;
}
#override
Widget build(BuildContext context) {
print(logindata); // first prints null then correct array without hotload.
}
}
here i got first null, then the correct value. but in my case i need the value of an object in the array logindata, that is
logindata["shop_name"] . so in that case i am getting error The method '[]' was called on null. Receiver: null Tried calling: []("shop_name") . What do i do now ? i am really stuck here. :(
Let me explain this first,
lifecycle of State goes like this createState -> initState ->........-> build
so you're right about the order of execution
you're calling getSessionValue() from initState and expecting widget to build right after it, but since getSessionValue() returns a Future after awaiting,
the execution continues and builds the widget not waiting for the returned Future value from getSessionValue(), so it prints null initially, and then when the Future is available youre calling setState and it prints the actual value
there is no notable delay here but the execution flow causes it to behave like this
so what's the solution?... Here comes FutureBuilder to the rescue
it is possible to get different states of a Future using FutureBuilder and you can make changes in the UI accordingly
so in your case, inside build, you can add a FutureBuilder like this,
FutureBuilder(
future: getSessionValue(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none: return Text("none");
case ConnectionState.waiting: return Text("waiting");
case ConnectionState.active: return Text("active");
case ConnectionState.done:
print(logindata); // this will print your result
return Text("${logindata}");
}
})
keep in mind that the builder should always return a widget
as the async operation is running, you can show the progress to the user by
showing the appropriate UI for different states
for eg: when in ConnectionState.waiting, you can show/return a progress bar
Hope this helps, Thank you
That is a normal behaviour since you are having an async function to get the login data (so it will take some time to be there) while the widget will be building , then build method will get executed first which will make the print executed with no data and then when you hot reload it will be executed perfectly , so if you you want to print it right after you get the data you can make the function this way :
_getSession() async {
logindata = jsonDecode(await FlutterSession().get("login_data")).then((value) {print(value);}); }

How to catch async exception in one place (like main) and show it in AlertDialog?

Trouble
I build Flutter app + Dart.
Now i am trying to catch all future exceptions in ONE place (class) AND showAlertDialog.
Flutter Docs proposes 3 solutions to catch async errors:
runZonedGuarded
... async{ await future() }catch(e){ ... }
Future.onError
But no one can achieve all of the goals (in its purest form):
First: can't run in widget's build (need to return Widget, but returns Widget?.
Second: works in build, but don't catch async errors, which were throwed by unawaited futures, and is"dirty" (forces to use WidgetBinding.instance.addPostFrameCallback. I can ensure awaiting futures (which adds to the hassle), but I can't check does ensures it third-part libraries. Thus, it is bad case.
Third: is similar to second. And looks monstrous.
My (bearable) solution
I get first solution and added some details. So,
I created ZonedCatcher, which shows AlertDialog with exception or accumulates exceptions if it doesn't know where to show AlertDialog (BuildContext has not been provided).
AlertDialog requires MaterialLocalizations, so BuildContext is taken from MaterialApp's child MaterialChild.
void main() {
ZonedCatcher().runZonedApp();
}
...
class ZonedCatcher {
BuildContext? _materialContext;
set materialContext(BuildContext context) {
_materialContext = context;
if (_exceptionsStack.isNotEmpty) _showStacked();
}
final List<Object> _exceptionsStack = [];
void runZonedApp() {
runZonedGuarded<void>(
() => runApp(
Application(
MaterialChild(this),
),
),
_onError,
);
}
void _onError(Object exception, _) {
if (_materialContext == null) {
_exceptionsStack.add(exception);
} else {
_showException(exception);
}
}
void _showException(Object exception) {
print(exception);
showDialog(
context: _materialContext!,
builder: (newContext) => ExceptionAlertDialog(newContext),
);
}
void _showStacked() {
for (var exception in _exceptionsStack) {
_showException(exception);
}
}
}
...
class MaterialChild extends StatelessWidget {
MaterialChild(this.zonedCatcher);
final ZonedCatcher zonedCatcher;
#override
Widget build(BuildContext context) {
zonedCatcher.materialContext = context; //!
...
}
}
flaws
At this moment I don't know how organize app with several pages. materialContext can be taken only from MaterialApp childs, but pages are set already at the MaterialApp widget. Maybe, I will inject ZonedCatcher in all pages and building pages will re-set materialContext. But I probably will face with GlobalKey's problems, like reseting materialContext by some pages at the same time on gestures.
It is not common pattern, I have to thoroughly document this moment and this solution makes project harder to understand by others programmists.
This solution is not foreseen by Flutter creators and it can break on new packages with breaking-changes.
Any ideas?
By default, if there is an uncaught exception in a Flutter application, it is passed to FlutterError.onError. This can be overridden with a void Function(FlutterErrorDetails) to provide custom error handling behaviour:
void main() {
WidgetsFlutterBinding.ensureInitialized();
FlutterError.onError = (details) {
print(details.exception); // the uncaught exception
print(details.stack) // the stack trace at the time
}
runApp(MyApp());
}
If you want to show a dialog in this code, you will need access to a BuildContext (or some equivalent mechanism to hook into the element tree).
The standard way of doing this is with a GlobalKey. Here, for convenience (because you want to show a dialog) you can use a GlobalKey<NavigatorState>:
void main() {
WidgetsFlutterBinding.ensureInitialized();
final navigator = GlobalKey<NavigatorState>();
FlutterError.onError = (details) {
navigator.currentState!.push(MaterialPageRoute(builder: (context) {
// standard build method, return your dialog widget
return SimpleDialog(children: [Text(details.exception.toString())]);
}));
}
runApp(MyApp());
}
Note that if you need a BuildContext inside your onError callback, you can also use navigator.currentContext!.
You then need to pass your GlobalKey<NavigatorState> to MaterialApp (or Navigator if you create it manually):
#override
Widget build(BuildContext context) {
return MaterialApp(
navigatorKey: navigatorKey, // pass in your navigator key
// other fields
);
}

Flutter: Provider and how to update records from the DB in the background

I am new to Flutter and I have this simple use case: in my Cloud Firestore DB I have a list of JSON representing events. I want to show them through my Flutter app in a ListView.
My requirements is that the ListView doesn't refresh in real-time but only when a pull-on refresh (implemented using RefreshIndicator) is done by the user or when the app resumes from background
I tried to implement this in 2 ways (I am using provider package for state management):
Using StreamProvider to create a stream of records from the DB. This continuosly updates the list view (basically the widget changes while the user is looking at it and I don't want this)
Using a ChangeNotifierProvider that refers to a EventManager class which holds a List<Event>. This class has a pull method which updates its internal state. I call this method when the user does the pull-on refresh (in the onRefresh callback of RefreshIndicator).
Option 2 seems to work well however I do not know how to implement the refresh when the app resumes from background. As I said I am using provider (and therefore StatelessWidget) and apparently there is no way to bind to these events when using StatelessWidgets
Do you have any suggestions and best practices for this use case?
You need to access Flutters lifecycle methods and fire a callback when the app resumes.
You can add a stateful widget with WidgetsBindingObserver and put that somewhere in the scope of your Provider, but as a parent of whatever widget you use to display the info.
Or you can make your PullToRefresh widget stateful and do the same thing.
class LifeCycleWidget extends StatefulWidget {
#override
_LifeCycleWidgetState createState() => _LifeCycleWidgetState();
}
class _LifeCycleWidgetState extends State<LifeCycleWidget>
with WidgetsBindingObserver {
AppLifecycleState _appLifecycleState;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
refreshOnResume();
}
#override
void didChangeAppLifecycleState(AppLifecycleState state) {
setState(() {
_appLifecycleState = state;
});
refreshOnResume();
}
void refreshOnResume() {
if (_appLifecycleState == AppLifecycleState.resumed) {
print('resumed');
// your refresh method here
}
}
#override
Widget build(BuildContext context) {
return HomePage();
}
}
Add the following to your main method if it's not there already.
WidgetsFlutterBinding.ensureInitialized();
Another way to do it without adding a stateful widget would be with GetX. You can still keep all your Provider stuff but only use the SuperController which provides lifecycle methods. This I can't test because I don't have your Provider code but you can probably get away with creating the class below and initializing the controller somewhere within the scope of the relevant Provider widget with
Get.put(LifeCycleController());
Then call the function in the onResumed override and you can use Get.context if you need context.
class LifeCycleController extends SuperController {
#override
void onDetached() {
debugPrint('on detached');
}
#override
void onInactive() {
debugPrint('on inactive');
}
#override
void onPaused() {
debugPrint('on pause');
}
#override
void onResumed() {
// your refresh function here. Access context with Get.context
debugPrint('on resume');
}
}

Show Snackbar in any screen when task finishes

I have a task that will run in the background (in an isolate) and when it finishes, I want to show a Snackbar. However, the user may navigate to a different screen from the one where the task was initiated. How do I show an 'app-level' Snackbar, not bound to any particular screen?
Edit: I found this: How to show a SnackBar from async executions when no context is available?, has some good information and option 1 (Display errors in page scaffolds) seems to be what I want, but I need to implement all by myself. I was hoping for something built in into Flutter.
I'd give this a try where you go for an abstract base class where you implement the 'listener', which then all your pages extend from instead of e.g. StatelessWidget.
Instead of overriding the normal build method, just override your new special build.
Pseudo code (here with BlocListener):
abstract class MySnackbarShowingPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocListener<SubjectBloc, SubjectState>(
listener: (context, state) {
// TODO: implement snackbar display
},
child: mySpecialBuild(context),
);
}
Widget mySpecialBuild(BuildContext context);
}
class MySpecificPage extends MySnackbarShowingPage {
#override
Widget mySpecialBuild(BuildContext context) {
// TODO: implement mySpecialBuild as your normal page does today
}
}

How to check if widget is visible using FlutterDriver

I am not sure how I would check whether a widget is currently shown or not using FlutterDriver.
Using WidgetTester this is really easy to perform using e.g. findsOneWidget.
However, during integration tests using FlutterDriver, there is no access to a WidgetTester object.
The FlutterDriver.waitFor method does not indicate whether the widget was found in the given duration.
How do I check whether a widget is on screen using FlutterDriver?
Flutter Driver doesn't have explicit method to check if a widget is present / exists, but we can create a custom method which will serve the purpose using waitFor method. For example, I have a simple text widget on screen and I will write a flutter driver test to check if that widget is present or not using a custom method isPresent.
Main code:
body: Center(
child:
Text('This is Test', key: Key('textKey'))
Flutter driver test to check if this widget is present or not is as below:
test('check if text widget is present', () async {
final isExists = await isPresent(find.byValueKey('textKey'), driver);
if (isExists) {
print('widget is present');
} else {
print('widget is not present');
}
});
isPresent is custom method whose definition is as below:
isPresent(SerializableFinder byValueKey, FlutterDriver driver, {Duration timeout = const Duration(seconds: 1)}) async {
try {
await driver.waitFor(byValueKey,timeout: timeout);
return true;
} catch(exception) {
return false;
}
}
Running the test detects the widget is present:
If I comment out the text widget code and then run the test, it detects that widget is not present: