Sometimes the widget doesn't render properly. This only happens on the release build irrespective of the platform OS. Not only texts, sometimes other widgets like container, images won't get rendered either. This "blank state" occurs irrespective of the app's life cycle, meaning this happens both when the app is in the background and comes foreground or opened freshly. I can work around in the app normally without any issues but can't see any widgets which I'm supposed to see. We found there are multiple rebuilds happening in the stateful widget which is responsible for the checking and routing the users according to their login status.
Anything wrong in this method?
//initializations (state variable)
Widget widgetToRender = Splash();
var _firestore;
bool isLoading = false;
StreamSubscription userProfileSubscription;
//initalize function
void _intialise(BuildContext context) async {
if (isLoading) {
return;
}
_firestore = Provider.of<FirestoreService>(context);
userProfileSubscription = _firestore.userProfile.listen((userProfile) {
this.setState(() {
isLoading = true;
widgetToRender = App();
});
});
}
//build method
#override
Widget build(BuildContext context) {
if (widget.userSnapshot.connectionState == ConnectionState.active) {
if (widget.userSnapshot.hasData) {
_intialise(context);
} else {
setState((){
widgetToRender = AuthLanding();
})
}
}
return widgetToRender;
}
Flutter is a declarative framework.
You're going against it when you declare widgets like this:
Widget widgetToRender = Splash();
Also, you shouldn't call methods that execute imperative code from your build method:
_intialise(context);
My suggestion is to completely remove this code:
Widget widgetToRender = Splash();
var _firestore;
And rewrite things in a declarative manner. One way to do that is to use a StreamBuilder, and use its builder to return the widgets you want.
Addressing this may solve your rendering problems.
EDIT: step 1 would probably be to remove all imperative code and state variables in the build method:
#override
Widget build(BuildContext context) {
if (widget.userSnapshot.connectionState == ConnectionState.active) {
if (widget.userSnapshot.hasData) {
return App();
} else {
return AuthLanding();
}
}
return Scaffold(body: CircularProgressIndicator());
}
The load lag is because you are only working with widget.userSnapshot.connectionState == ConnectionState.active you will need to add progress indicators as the response from firestore depends on the network status of the user. Please let me know if that helps.
Related
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.
I'm trying to use a GetX Builder in combination with a bool in the controller to display a loading spinner while fetching data and then the data afterwards.
Printing the update to the bool shows it finishes loading and changes the variable but the UI is never updated to reflect this.
Controller
class AuthController extends GetxController {
//final RxBool isLoading = true.obs;
//var isLoading = true.obs;
final Rx<bool> isLoading = Rx<bool>(true);
setLoading(bool status) {
isLoading.value = status;
print(isLoading.value);
update();
}
fetchUserData() async {
setLoading(true);
_firebaseUser.bindStream(_auth.authStateChanges());
if (_auth.currentUser != null) {
bool profileRetrieved =
await FirestoreDB().getUserProfile(_auth.currentUser!.uid).then((_) {
return true;
});
setLoading(!profileRetrieved);
}
}
}
Profile Page
class ProfileCard extends StatelessWidget {
const ProfileCard({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return GetBuilder<AuthController>(
init: AuthController(),
initState: (_) => AuthController().fetchUserData(),
builder: (controller) {
if (controller.isLoading.value) {
return const Center(child: CircularProgressIndicator());
}
return Container(...);
},
);
}
}
That widget is called within another as part of the wider UI. Let me know if you'd need to see that and/or anything else.
As you can see I've tried different ways of setting up the bool and none of them seem to trigger a change of UI in the builder.
Probably doing something stupid but I've tried a few different approaches and looked around for people having similar problems but not been able to crack it.
Thanks in advance.
You are using isLoading as a Rx<bool>. In that case you need to change GetBuilder into GetX. And no need to call update().
GetBuilder is for non-reactive, non-Rx, simple state management
GetX is for reactive, Rx state management
I'm confused about the Flutter documentation on loading text assets.
It states:
Each Flutter app has a rootBundle object for easy access to the main asset bundle. It is possible to load assets directly using the rootBundle global static from package:flutter/services.dart.
However, it’s recommended to obtain the AssetBundle for the current BuildContext using DefaultAssetBundle, rather than the default asset bundle that was built with the app; this approach enables a parent widget to substitute a different AssetBundle at run time, which can be useful for localization or testing scenarios.
I don't understand how I can implement text asset loading the recommended way, while at the same time avoiding to load the assets each time the widget is built.
Consider the following naive example that uses a FutureBuilder to display some text:
#override
Widget build(BuildContext context) {
var greeting = DefaultAssetBundle.of(context).loadString('assets/greeting');
return FutureBuilder<String>(
future: greeting,
builder (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Text(snapshot.requireData);
} else {
return Text('Loading greeting...');
}
}
);
}
In the example, loadString is called whenever the widget is built. This seems inefficient to me.
Also, it goes explicitly against the FutureBuilder documentation, which tells me that:
The future must have been obtained earlier, e.g. during State.initState, State.didUpdateWidget, or State.didChangeDependencies. It must not be created during the State.build or StatelessWidget.build method call when constructing the FutureBuilder. If the future is created at the same time as the FutureBuilder, then every time the FutureBuilder's parent is rebuilt, the asynchronous task will be restarted.
Now, I could go ahead and load my assets in any of the recommended methods, but none of them has a BuildContext. Meaning I'd have to use the rootBundle, which wasn't recommended.
Since I'm new to Flutter, I'm unsure if the documentation is contradicting itself or if there's some obvious thing I'm missing here. Any clarification would be much appreciated.
I came up with the following solution for loading assets the way it's recommended in the Flutter docs.
Load the assets in a Widget's State and assign the Future to a nullable instance variable. This works in conjunction with FutureBuilder. Here's an example:
class MyWidgetState extends State<MyWidget> {
Future<String>? _greeting;
#override
Widget build(BuildContext context) {
// Wrapping `loadString` in a condition such as the following ensures that
// the asset is loaded no more than once. Seems kinda crude, though.
if (_greeting == null) {
_greeting = DefaultAssetBundle.of(context).loadString('assets/greeting');
}
return FutureBuilder<String>(
future: greeting,
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Text(snapshot.requireData);
} else {
return Text('Loading greeting...');
}
});
}
}
This approach ensures that both recommendations from the Flutter docs are honored:
Assets are loaded from the Bundle for the current BuildContext.
Assets are loaded only once, avoiding that FutureBuilder restarts each build.
I would say to you... Remove Future builder.
You can do something like this:
String greeting;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) async {
greeting =
await DefaultAssetBundle.of(context).loadString('assets/greeting');
setState(() {});
});
}
#override
Widget build(BuildContext context) {
if (greeting != null && greeting.isNotEmpty) {
return Text(greeting);
} else {
return Text('Loading greeting...');
}
}
Try this
String greeting;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => loadString());
}
void loadString() async {
if (greeting != null && greeting.isNotEmpty) {
greeting = await DefaultAssetBundle.of(context).loadString('assets/greeting');
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return Text(greeting ?? 'Loading greeting...');
}
If your project has Null Safety then change String greeting to String? greeting
I'm programming a flutter application in which a user is presented with a PageView widget that allows him/her to navigate between 3 "pages" by swiping.
I'm following the setup used in https://medium.com/flutter-community/flutter-app-architecture-101-vanilla-scoped-model-bloc-7eff7b2baf7e, where I use a single class to load data into my model, which should reflect the corresponding state change (IsLoadingData/HasData).
I have a main page that holds all ViewPage widgets. The pages are constructed in the MainPageState object like this:
#override
void initState() {
_setBloc = SetBloc(widget._repository);
_notificationBloc = NotificationBloc(widget._repository);
leftWidget = NotificationPage(_notificationBloc);
middleWidget = SetPage(_setBloc);
currentPage = middleWidget;
super.initState();
}
If we go into the NotificationPage, then the first thing it does is attempt to load data:
NotificationPage(this._notificationBloc) {
_notificationBloc.loadNotificationData();
}
which should be reflected in the build function when a user directs the application to it:
//TODO: Consider if state management is correct
#override
Widget build(BuildContext context) {
return StreamBuilder<NotificationState>(
stream: _notificationBloc.notification.asBroadcastStream(),
//initialData might be problematic
initialData: NotificationLoadingState(),
builder: (context, snapshot) {
if (snapshot.data is NotificationLoadingState) {
return _buildLoading();
}
if (snapshot.data is NotificationDataState) {
NotificationDataState state = snapshot.data;
return buildBody(context, state.notification);
} else {
return Container();
}
},
);
}
What happens is that the screen will always hit "NotificationLoadingState" even when data has been loaded, which happens in the repository:
void loadNotificationData() {
_setStreamController.sink.add(NotificationState._notificationLoading());
_repository.getNotificationTime().then((notification) {
_setStreamController.sink
.add(NotificationState._notificationData(notification));
print(notification);
});
}
The notification is printed whilst on another page that is not the notification page.
What am i doing wrong?
//....
class _SomeState extends State<SomeWidget> {
//....
Stream<int> notificationStream;
//....
#override
void initState() {
//....
notificationStream = _notificationBloc.notification.asBroadcastStream()
super.initState();
}
//....
Widget build(BuildContext context) {
return StreamBuilder<NotificationState>(
stream: notificationStream,
//....
Save your Stream somewhere and stop initialising it every time.
I suspect that the build method is called multiple times and therefore you create a new stream (initState is called once).
Please try let me know if this helped.
I am having a problem where my stream builder is only firing once.
I am trying to configure my bottomNavigationBar to be of a different colour based on the theme selected by the user.
To do this, I have a page whereby the user can decide whether to use the light theme or dark theme. This is saved into the device while shared preferences and then using async, i will stream the current value into my bottomNavigationBar.
The problem occurs when i use a stream builder to create two if statement. Stating that if the value returned from the stream is 0, i will show a "light mode" bottom navigation bar. Else if its 1, i will show a dark theme.
All is well when i run the program for the first time. However upon navigation into the settings page and changing the user preference, the stream builder will not load again. Here are some snapshots of my code
I have tried removing the dispose method whereby the stream will close. However that didn't solve the problem.
The Stream Builder
class mainPagev2 extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _mainPageV2();
}
}
class _mainPageV2 extends State<mainPagev2>
with SingleTickerProviderStateMixin {
// TabController _tabController;
StreamController<int> streamController = new StreamController.broadcast();
#override
void initState() {
super.initState();
// _tabController = TabController(vsync: this, length: _pageList.length);
Stream<int> stream = new Stream.fromFuture(readCurrentTheme());
streamController.addStream(stream);
}
#override
void dispose() {
// _tabController.dispose();
super.dispose();
}
String currentColor = "#ab3334";
#override
Widget build(BuildContext context) {
// TODO: implement build
return StreamBuilder(
stream: streamController.stream,
builder: (context, asyncSnapshot) {
print(asyncSnapshot.data.toString() + "WHssssAT IS THIS");
if (asyncSnapshot.hasData) {
print(asyncSnapshot.error);
if (asyncSnapshot.data == 0) {
//Return light themed Container
currentColor = "#ffffff";
return ThemeContainer(color: currentColor );
} else {
currentColor = "#101424";
//Return dark themed Container
return ThemeContainer(color: currentColor );
}
} else {
//return dark themed
return ThemeContainer(color:currentColor);
}
},
);
//
}
}
Async Code to retrieve the value stored
Future<int> readCurrentTheme() async {
final prefs = await SharedPreferences.getInstance();
final key = 'themeMode';
final value = prefs.getInt(key) ?? 0;
print('read: $value LOOK AT THISSS');
return value;
}
It is expected that the stream builder will fire whenever the value stored is changed!
I don't see in your code a way to read data from SharedPreferences when the value stored is changed. You are effectively reading it once, so the StreamBuilder is only firering once. That makes sense.
To be able to do what you want, you have to use something to tell you widget that a state has changed elsewhere in the application. There a multiple ways to achieve this and I won't make the choice for you as it would be opinion based, so you can check thing like BloC, Provider, ScopedModel, InheritedWidget