Root widget not rebuilding when popping from child - flutter

I have been working on a flutter app where the user starts on a stateful widget with a ListView of items from a SQLite database. The user can tap on an item in the list which navigates to a page where the item can be modified and saved.
When Navigator.pop(context) is used, the app returns to the ListView but doesn't rebuild. The changes made do not show until I force a rebuild (hot reload)
This is a new issue in flutter 1.17.
Root view
class ItemsView extends StatefulWidget {
#override
_ItemsView State createState() => _ItemsViewState();
}
class _ItemsViewState extends State<ItemsView> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<Story>>(
future: DBProvider.db.getAllItems(),
builder: (BuildContext context, AsyncSnapshot<List<Story>> snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data[0])
}
}
)
}
}
Second View
class ModifyView extends StatefulWidget {
#override
_ModifyView State createState() => _ItemsViewState();
}
class _ItemsViewState extends State<ItemsView> {
#override
Widget build(BuildContext context) {
return FutureBuilder<List<Story>>(
future: DBProvider.db.getAllItems(),
builder: (BuildContext context, AsyncSnapshot<List<Story>> snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data[0])
}
}
)
}
}
How can I force the widget to reload?

You can use the Navigator's method then on which you can reload the page or do any other stuff. In below example I am using the screen A to to screen B navigation and When user navigate the from the B to A , we will refresh the view or do any other stuff like below.
From Screen A -> B
Navigator.push(
context,
MaterialPageRoute(
settings: RouteSettings(
name: B), ///// HERE "B" IS THE CLASS NAME
builder: (context) =>
B(),
),
).then((value) {
//// THIS METHOD IS ENVOKE WHEN SCREEN COME FROM B->A, YOU CAN PERFROM CAN TASK HERE
});
Inside the B screen, we need to create the constructor like below
class B extends StatefulWidget {
B () ;
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _B();
}
}
Navigation from B to A
Navigator.pop(context, 1); //// HERE WE ARE PUSHING THE ANY VALUE "1" FOR THE RETURN IN then OF CLASS "A"

Related

Provider to be initialized asynchronously from `initState()` but get `could not find the correct Provider`

I develop an ad app, with a message button on the detailed view.
When the user tap on it, the chats view (stateful widget) is pushed to the screen.
The initState() is there to call the asyncInitMessages() which asynchronously fetches the chats and related message from the distant database. The asyncInitMessages() belongs to the Chats class which extends ChangeNotifier.
/// A chat conversation
class Chats extends ChangeNotifier {
/// Internal, private state of the chat.
void asyncInitMessages(
{required ClassifiedAd ad,
required String watchingUserId,
required bool isOwner}) async {
// blah blah
}
}
The ClassifiedAdMessagesViewstateful widget class implementation is as follows (snipet):
#override
void initState() {
// == Fetch conversation and messages
asyncInitMessages();
}
void asyncInitMessages() async {
// === Update all messages
try {
Provider.of<Chats>(context, listen: false).asyncInitMessages(
ad: widget.ad,
watchingUserId: widget.watchingUser!.uid,
isOwner: _isOwner);
} catch (e) {
if (mounted) {
setState(() {
_error = "$e";
_ready = true;
});
}
}
}
#override
Widget build(BuildContext context) {
// <<<<<<<<<<< The exception fires at the Consumer line right below
return Consumer<Chats>(builder: (context, chats, child) {
return Scaffold(
// ... blah blah
Finally, when running ll that, I got the exception in the build at the Consumer line:
could not find the correct Provider<chats>
Help greatly appreciated.
[UPDATED]
Here is the main (very far up from the messages screen)
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
//if (Firebase.apps.isEmpty) {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
// } else {
// Firebase.app(); // if already initialized, use that one
// }
if (USE_DATABASE_EMULATOR) {
FirebaseDatabase.instance.useDatabaseEmulator(emulatorHost, emulatorPort);
}
runApp(RootRestorationScope(
restorationId: 'root',
child: ChangeNotifierProvider(
create: (context) => StateModel(),
child: const App())));
}
class App extends StatefulWidget {
const App({super.key});
#override
State<App> createState() => _AppState();
}
class _AppState extends State<App> {
#override
Widget build(BuildContext context) {
return PersistedAppState(
storage: const JsonFileStorage(),
child: MultiProvider(
providers: [
ChangeNotifierProvider<ThemeModel>.value(value: _themeModel),
//ChangeNotifierProvider<AuthModel>.value(value: _auth),
],
child: Consumer<ThemeModel>(
builder: (context, themeModel, child) => MaterialApp(
// blah blah
}
}
}
And the component just on top of the
/// Classified ad detail view
class ClassifiedAdDetailView extends StatefulWidget {
final User? watchingUser;
final ClassifiedAd ad;
const ClassifiedAdDetailView(
{Key? key, required this.watchingUser, required this.ad})
: super(key: key);
#override
State<ClassifiedAdDetailView> createState() => _ClassifiedAdDetailViewState();
}
class _ClassifiedAdDetailViewState extends State<ClassifiedAdDetailView>
with TickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => Chats(),
builder: ((context, child) => Scaffold(
// blah blah
ElevatedButton(
onPressed: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ClassifiedAdMessagesView(
ad: ad,
watchingUser: widget.watchingUser)));
}),
Providers must be located in the widget tree above the widget where you want to use them with Consumer or Provider.of. When you push a new route with Navigator, it won't be add the pushed route below the widget from where you push, it will add it at the same level where home of MaterialApp is located.
(I think the error message you get also states that you can't access the providers between routes.)
In general the tree will look like this if you push some routes (check it with the Flutter Widget Inspector):
MaterialApp
home
widget1
widget2
widget21
widget22
page1
widget1
widget2
page2
page3
In your code you create the provider in ClassifiedAdDetailView and then push
ClassifiedAdMessagesView from this in the onPressed method. You won't be access this provider from ClassifiedAdMessagesView because the tree will be like (simplified):
MaterialApp
home
ClassifiedAdDetailView
ClassifiedAdMessagesView
The solution is to "lift the state up" and place the provider above every widget from where you need to access it. It can be a part of your existing Multiprovider above MaterialApp but if it is too far, you need to find a proper place that is above both ClassifiedAdDetailView and ClassifiedAdMessagesView.

Switching beetwen sites using flutter

Flutter don't show any error, just if _rundy = 0 page doesn't switch, 0 reaction. ZmienneClass is class for variables, not any Page which is showing on application. I guess it may be problem with Buildcontext but idk, im beginner with flutter. (ResultPage is resGamePage)
class ZmienneClass extends ChangeNotifier {
void decrementCounter(int liczba, BuildContext context) {
if (_rundy == 0) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => resGamePage(title: "Wyniki")));
void setPlayerCount({required int liczbagraczy}) {
graczepoczatkowi = liczbagraczy;}
}}}
Some resGamePage code
class resGamePage extends StatefulWidget {
const resGamePage({Key? key, value}) : super(key: key);
#override
_resGamePageState createState() => _resGamePageState();
}
class _resGamePageState extends State<resGamePage> {
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [ChangeNotifierProvider.value(value: ZmienneClass())],
child: Scaffold(
You can use push replacement command
Navigator.pushReplacement(
context,
new MaterialPageRoute(
builder: (context) => Disconnect()));
Where Disconnect is the name of your next page stless widget
This code does destroys the current activity and then it loads the next activity
You can use it to go to any page as you said in above diagram
If you are in the FirGamePage then you can go to the SecGamePage by this command by a button click or as per your UI
Hope this solution helps ;)

Using a FutureBuilder in a Flutter stateful widget with RefreshIndicator

I have a Flutter widget which gets data from a server and renders a List. After getting the data, I parse the data and convert it to an internal object in my application, so the function is something like this:
Future<List<Data>> getData(Thing thing) async {
var response = await http.get(Uri.parse(MY_URL));
// do some processing
return data;
}
After that, I've defined a stateful widget which calls this function and takes the future to render a List.
class DataList extends StatefulWidget {
const DataList({Key key}) : super(key: key);
#override
_DataListState createState() => _DataListState();
}
class _DataListState extends State<DataList> {
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Data> values = snapshot.data;
if (values.isEmpty) {
return NoResultsWidget('No results.');
}
return ListView.builder(
itemCount: values.length,
itemBuilder: (BuildContext context, int index) {
return values[index];
},
);
}
#override
Widget build(BuildContext context) {
var data = getSomething().then((thing) => getData(thing));
return FutureBuilder(
future: data,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return CustomErrorWidget('Error');
case ConnectionState.waiting:
return LoadingWidget();
default:
if (snapshot.hasError) {
return CustomErrorWidget('Error.');
} else {
return createListView(context, snapshot);
}
}
},
);
}
}
Now, the code works just fine in this manner. But, when I try to move my data to be a class variable (of type Future<List>) that I update through the initState method, the variable just never updates. Example code below:
class _DataListState extends State<DataList> {
Future<List<Data>> data;
....
#override
void initState() {
super.initState();
updateData();
}
void updateData() {
data = getSomething().then((thing) => getData(thing));
}
....
}
I want to add a refresh indicator to update the data on refresh, and to do that I need to make my data a class variable to update it on refresh, but I can't seem to figure out how to make my data part of the state of the stateful widget and have it work. any help or guides to a github code example would be appreciated.
You need to wrap the assignment of the data variable in setState so that Flutter knows the variable changed and rebuilds your widget.
For example:
void updateData() {
setState(() {
data = getSomething().then((thing) => getData(thing));
});
}

Flutter close child screen and navigate to another screen automatically

I'm using bottom tab-navigation and my screens have the following logic:
Screen A
-> Button Open Screen B
-> Button Open Screen C
Screen B
-> Button Open Child Screen B
-> Button Open Screen C
I can navigate from Screen A to Screen B through code using widget.mainTabController.animateTo(1); and it works great.
What I need now is to navigate from Screen B to Screen A after the Child Screen B has been closed.
class ScreenB extends StatefulWidget {
final TabController mainTabController;
ScreenB(TabController mainTabController)
: this.mainTabController = mainTabController;
#override
_State createState() => _State();
}
class _State extends State<ScreenB>
{
#override
Widget build(BuildContext context) {
// ...
GridView.builder(
// ...
itemBuilder: (BuildContext context, int index)
{
Entry entry = this.entries[index];
return entry.build(context);
}
);
}
}
class Entry extends State<ScreenB>
{
Widget build(BuildContext context)
{
// ...
onTap: () async {
// Opens the Screen B Child
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ScreenBChild(),
),
);
// Should go back to Screen A but does nothing
if (result)
widget.mainTabController.animateTo(0);
);
}
}
After the screen "Child Screen B" has been closed, I'm back to Screen B and the code widget.mainTabController.animateTo(0), although is being triggered, nothing happens, the screen doesn't change. Also no error is thrown in the console.
Solved.
The Entry class must be converted into a Stateless (or Stateful, as you wish) class
The class should receive the mainTabController upon its initialization
We have to apply a Delay before trigger the animation to move to another screen
With that said, the Entry is called like this:
Entry entry = new Entry(mainTabController: widget.mainTabController);
And the class was converted to:
class Entry extends StatelessWidget {
final TabController mainTabController;
Entry({Key key, this.mainTabController}) : super(key: key);
#override
Widget build(BuildContext context)
{
// ...
onTap: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ScreenBChild(),
),
);
if (result)
{
await Future.delayed(Duration(milliseconds: 300), () =>
{
this.mainTabController.animateTo(0);
});
}
}
}
}

Triggering initial event in BLoC

example_states:
abstract class ExampleState extends Equatable {
const ExampleState();
}
class LoadingState extends ExampleState {
//
}
class LoadedState extends ExampleState {
//
}
class FailedState extends ExampleState {
//
}
example_events:
abstract class ExampleEvent extends Equatable {
//
}
class SubscribeEvent extends ExampleEvent {
//
}
class UnsubscribeEvent extends ExampleEvent {
//
}
class FetchEvent extends ExampleEvent {
//
}
example_bloc:
class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
#override
ExampleState get initialState => LoadingState();
#override
Stream<ExampleState> mapEventToState(
ExampleEvent event,
) async* {
if (event is SubscribeEvent) {
//
} else if (event is UnsubscribeEvent) {
//
} else if (event is FetchEvent) {
yield LoadingState();
try {
// network calls
yield LoadedState();
} catch (_) {
yield FailedState();
}
}
}
}
example_screen:
class ExampleScreenState extends StatelessWidget {
// ignore: close_sinks
final blocA = ExampleBloc();
#override
Widget build(BuildContext context) {
return Scaffold(
body: BlocBuilder<ExampleBloc, ExampleState>(
bloc: blocA,
// ignore: missing_return
builder: (BuildContext context, state) {
if (state is LoadingState) {
blocA.add(Fetch());
return CircularProgressBar();
}
if (state is LoadedState) {
//...
}
if (state is FailedState) {
//...
}
},
),
);
}
}
As you can see in example_bloc, initial state is LoadingState() and in build it shows circular progress bar. I use Fetch() event to trigger next states. But I don't feel comfortable using it there. What I want to do is:
When app starts, it should show LoadingState and start networking calls, then when it's all completed, it should show LoadedState with networking call results and FailedState if something goes wrong. I want to achieve these without doing
if (state is LoadingState) {
blocA.add(Fetch());
return CircularProgressBar();
}
Your discomfort really has reason - no event should be fired from build() method (build() could be fired as many times as Flutter framework needs)
Our case is to fire initial event on Bloc creation
Possibilities overview
case with inserting Bloc with BlocProvider - this is preferred way
create: callback is fired only once when BlocProvider is mounted & BlocProvider would close() bloc when BlocProvider is unmounted
class ExampleScreenState extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: BlocProvider(
create: (context) => ExampleBloc()..add(Fetch()), // <-- first event,
child: BlocBuilder<ExampleBloc, ExampleState>(
builder: (BuildContext context, state) {
...
},
),
),
);
}
}
case when you create Bloc in State of Statefull widget
class _ExampleScreenStateState extends State<ExampleScreenState> {
ExampleBloc _exampleBloc;
#override
void initState() {
super.initState();
_exampleBloc = ExampleBloc();
_exampleBloc.add(Fetch());
// or use cascade notation
// _exampleBloc = ExampleBloc()..add(Fetch());
}
#override
void dispose() {
super.dispose();
_exampleBloc.close(); // do not forget to close, prefer use BlocProvider - it would handle it for you
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: BlocBuilder<ExampleBloc, ExampleState>(
bloc: _exampleBloc,
builder: (BuildContext context, state) {
...
},
),
);
}
}
add first event on Bloc instance creation - this way has drawbacks when testing because first event is implicit
class ExampleBloc extends Bloc<ExampleEvent, ExampleState> {
...
ExampleBloc() {
add(Fetch());
}
}
// insert it to widget tree with BlocProvider or create in State
BlocProvider( create: (_) => ExampleBloc(), ...
// or in State
class _ExampleScreenStateState extends State<ExampleScreenState> {
final _exampleBloc = ExampleBloc();
...
PS feel free to reach me in comments
Sergey Salnikov has a great answer. I think I can add another suggestion however.
In my main.dart file I am using a MultiBlocProvider to create all my blocs for use further down the tree. Like so
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: <BlocProvider<dynamic>>[
BlocProvider<OneBloc>(create: (_) => OneBloc()),
BlocProvider<TwoBloc>(create: (_) => TwoBloc()),
],
child: MaterialApp( // Rest of your app )
Then when I need to call an event when I load a page, in this case I wanted to fetch some data depending on a list tile selected, and I needed more options than FutureBuilder can provide me, I simple used initState(); and called the bloc provider and added an event.
class _ExampleScreenState extends State<ExampleScreen> {
#override
void initState() {
super.initState();
BlocProvider.of<OneBloc>(context)
.add(FetchData);
}
It works because the bloc has already been provided from the root widget.
In simple terms:
Using BlocProvider, call it during creation.
BlocProvider(create: (context) => ExampleBloc()..add(Fetch()))
Using BlocState, use it as
class _ExampleScreenStateState extends State<ExampleScreenState> {
ExampleBloc _exampleBloc;
#override
void initState() {
super.initState();
_exampleBloc = ExampleBloc()..add(Fetch());
}
#override
void dispose() {
super.dispose();
_exampleBloc.close();
}