I have asked before but things have changed, today I realized there is a serious problem with the solution I got before. My algorithm a bit changed.
This is the new code:
#override
Widget build(BuildContext context) {
return Material(
child: FutureBuilder(
future: _future,
builder: (context, snapshot) {
if (snapshot.hasData) {
print('BOOT VALUE IS ${snapshot.data}');
}
return !snapshot.hasData
? SplashScreen()
: snapshot.data ? HomePage() : FirstScreen();
},
),
);
}
With this solution, the BootScreen page functions execute every time while I navigate inside the pages I render conditionally inside FutureBuilder. So it's not best... I need to execute Navigation without any problem inside Future Builder, like this:
#override
Widget build(BuildContext context) {
return Material(
child: FutureBuilder(
future: _future,
builder: (context, snapshot) {
if (snapshot.hasData) {
print('BOOT VALUE IS ${snapshot.data}');
}
return !snapshot.hasData
? SplashScreen()
: snapshot.data
? Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => HomePage()))
: Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => FirstScreen()));
},
),
);
}
It won't work of course, since return values are not a Widget. Any solution?
Edit: Thanks to Remi, I solved like this:
#override
void initState() {
final MainModel model = ScopedModel.of(context);
model.bootUp().then(
(value) => Future.delayed(
Duration(seconds: 1, milliseconds: 500),
() {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
value ? HomePage() : FirstScreen()));
},
),
);
super.initState();
}
Simply do not use FututeBuilder and manipulate the Future directly:
Future future;
future.then((value) {
Navigator.pushNamed(context, "/foo");
});
Bear in mind that you should not do this within the build method. Do this where you create your Future, typically initState
Related
I need to fetch data from a firestore documents where these document contain sub-collection.
user should get details of the listTile on tapping in new page. the thing is I have problem passing the doc id on tapping.
body: StreamBuilder(
stream: Firestore.instance.collection('myMainCollection').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return FirestoreListView(documents: snapshot.data.documents);
},
child: ListView.builder(
itemCount: documents.length,
itemExtent: 90.0,
itemBuilder: (BuildContext context, int index) {
final myListTile = ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => detailCard(documents[index] ),
),
);
},
on the detailPage i have this code:
body: StreamBuilder(
stream: Firestore.instance.collection('myMainCollection').document("TappedDocID").collection('sub-collection').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return FirestoreListView(documents: snapshot.data.documents);
},
),
any idea how to pass the doc id the user taps on ?
What you can do is pass the id in the details page and then in details page fetch the data using the id you passed.
I'm passing and retrieving the same way and it's working for me..
Example:
Pass doc id from list page to details page using navigator:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(
docId: 'theIdYouWantToPass',
),
),
);
In details page:
class DetailsPage extends StatefulWidget {
final String docId;
DetailsPage(
{Key key, #required this.docId})
: super(key: key);
#override
DetailsPageState createState() {
return new DetailsPageState();
}
}
// accessing the doc id in details page like this
class DetailsPageState
extends State<DetailsPage> {
// example if you want to store it in another var
// or you can directly use **this.widget.docId**
var docId = this.widget.docId;
}
There are two dropdown button with the list of countries and types of sport. If on them somsething is chosen it is need to show listTile with the leagues on it is chosen to the country and/or sport and if on them nothing is chosen - show all leagues.
But I get:
Dart Error: Unhandled exception:
setState () called after dispose (): _SportLigPageState # b5830 (lifecycle state: defunct, not mounted)
This is what happens if you see the widget tree (e.g.). This error can occur when a call is made. Dispose () callback. It is necessary to ensure that the object is still in the tree.
This can be a memory card if it’s not. To avoid memory leaks, consider dispose ().
Api with leagues: https://www.thesportsdb.com/api/v1/json/1/all_leagues.php:
class LigList extends StatefulWidget {
#override
_LigListState createState() => _LigListState();
}
class _LigListState extends State<LigList> {
String sport;
String country;
List data;
Future<String> getJsonData() async {
http.Response response;
if (sport != null) {
if (country != null) response = await http
.get(Uri.encodeFull('https://www.thesportsdb.com/api/v1/json/1/all_leagues.php?c=$sport&s=$country'), headers: {"Accept": "application/json"});
else response = await http
.get(Uri.encodeFull('https://www.thesportsdb.com/api/v1/json/1/all_leagues.php?c=$sport'), headers: {"Accept": "application/json"});}
else if (country == null){ response = await http
.get(Uri.encodeFull('https://www.thesportsdb.com/api/v1/json/1/all_leagues.php'), headers: {"Accept": "application/json"});}
else response = await http
.get(Uri.encodeFull('https://www.thesportsdb.com/api/v1/json/1/all_leagues.php?c=$country'), headers: {"Accept": "application/json"});
var convertDatatoJson = json.decode(response.body);
data = convertDatatoJson['leagues'];
return "Success";
}
static const menuItems = countriesList;
final List<DropdownMenuItem<String>> _dropDownItems = menuItems
.map((String CountruValue) =>
DropdownMenuItem<String>(
value: CountruValue,
child: Text(CountruValue),
),
).toList();
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(children: <Widget>[
FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot) {
return DropdownButton(
value: country,
hint: Text("Choose a countre league of which you want to find"),
items: _dropDownItems,
onChanged: (value) {
country = value;
print(country);
setState(() {});
},
);}),
SizedBox(width: 5),
FutureBuilder(
future: _getSports(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return snapshot.hasData
? DropdownButton(
value: sport,
hint: Text("Choose a sport league of which you want to find"),
items: snapshot.data,
onChanged: (value) {
sport = value;
print(sport);
setState(() {});
},
)
: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: CircularProgressIndicator());
}),
Flexible(
child:FutureBuilder(
future: getJsonData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return ListView.separated(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int i) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment
.stretch,
children: <Widget>[
ListTile(
title: Text(data[i]['strLeague']),
subtitle: Text(
data[i]['strSport']),
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (
BuildContext context) =>
new ComandListScreen()
// (data[i])
));
},
),
]
)
)
);
});
}))
]),
),
);
}
}
Any assistance is very much appreciated.
There's a lot of things wrong with your code. The first child in your code is wrapped in a FutureBuilder but you're not using any Future functionality.
FutureBuilder(
builder: (BuildContext context, AsyncSnapshot snapshot) {
return DropdownButton(
value: country,
hint: Text("Choose a countre league of which you want to find"),
items: _dropDownItems,
onChanged: (value) {
country = value;
print(country);
setState(() {}); // Remove this line
},
);}),
In addition to that you also are calling setState() randomly in your onChanged callback with nothing inside of it. I'd suggest you take that widget out of the FutureBuilder and just use the DropdownButton on it's own.
Then also in this line
itemCount: data == null ? 0 : data.length,
You're using data, which is set in the future that you call there. You might want to read up on how to properly use the FutureBuilder widget. Just return the data object from your _getJsonData() Future because it's always returning "Success" anyway. Return the list you want from the Future and then access it using snapshot.data
And lastly there's literally only one setState call in there so remove it and you'll be fine. My assumption is that there's some additional dispose you're calling or navigating away and the app crashes. Will need a lot more info to figure out, but you'll have to fix the way you use Futures and the Future builder so we can ensure it's not because of latent threads coming back and setting the state once you've left the view you were on.
I am trying to use a StreamBuilder to fetch data and I want to display that data using a SliverList all inside a CustomScrollView so I can take advantage of the features that come with the CustomScrollView.
Any ideas on how I can achieve this?
Sure, it's easy, here you have a code sample:
class SampleStreamBuilder extends StatelessWidget {
Stream<List<String>> loadData() async* {
await Future.delayed(Duration(seconds: 3));
yield List.generate(10, (index) => "Index $index");
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<List<String>>(
stream: loadData(),
builder: (context, snapshot) {
return snapshot.hasData
? CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text(snapshot.data[index]),
);
}, childCount: snapshot.data.length),
)
],
)
: Center(
child: CircularProgressIndicator(),
);
},
),
);
}
}
In this case it is fine to rerender the whole CustomScrollView. However if you want to rerender just one Sliver in a CustomScrollView, do it like this:
CustomScrollView(
slivers: <Widget>[
StreamBuilder(
stream: stream,
builder: (ctx, snapshot) {
return SliverToBoxAdapter(
child: Text('sliver box'),
);
},
)
],
),
Remember to always return a Sliver inside the StreamBuilder.
How would I properly access the _runThisFunction(...) within the onTap()?
...
class _DealList extends State<DealList> with AutomaticKeepAliveClientMixin {
void _runThisFunction() async {
print('Run me')
}
#override
Widget build(BuildContext context) {
super.build(context);
return FutureBuilder(
future: _loadingDeals,
builder: (BuildContext context, AsyncSnapshot snapshot) {
return snapshot.connectionState == ConnectionState.done
? RefreshIndicator(
onRefresh: _handleRefresh,
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: snapshot.data['deals'].length,
itemBuilder: (context, index) {
final Map deal = snapshot.data['deals'][index];
return _getDealItem(deal, context);
},
),
)
: Center(
child: CircularProgressIndicator(),
);
},
);
}
}
Container _getDealItem(Map deal, context) {
return new Container(
height: 90.0,
child: Material(
child: InkWell(
child: _getDealRow(deal), // <-- this renders the row with the `deal` object
onTap: () {
// Below call fails
// 'The function isn't defined'
_runThisFunction();
},
),
),
);
}
The reason for that is that you are out of scope.
Little hint: The word "function" always indicates that the function you are trying to call is not part of a class and the keyword "method" shows you that the function you are trying to call is part of a class.
In your case, _runThisFunction is defined inside of _DealList, but you are trying to call it from outside.
You either need to move _getDealItem into _DealList or _runThisFunction out.
/// In this case both methods [_runThisFunction()] and [_getDealItem()] are defined inside [_DealList].
class _DealList extends State<DealList> with AutomaticKeepAliveClientMixin {
void _runThisFunction() ...
Container _getDealItem() ...
}
/// In this case both functions are defined globally.
void _runThisFunction() ...
Container _getDealItem() ...
You wil need to make sure that you also apply the same logic to _getDealRow and other nested calls.
I have the following screen:
import 'package:flutter/material.dart';
import '../models/patient.dart';
import '../components/patient_card.dart';
import '../services.dart';
class Home extends StatefulWidget {
var patients = <Patient>[];
#override
_HomeState createState() => new _HomeState();
}
class _HomeState extends State<Home> {
#override
initState() {
super.initState();
Services.fetchPatients().then((p) => setState(() => widget.patients = p));
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
),
body: new Container(
child: new ListView(
children: widget.patients.map(
(patient) => new PatientCard(patient),
).toList()
)
)
);
}
}
As you can see I do the endpoint call when I overwrite initState() in _HomeState. But it only runs once initially when the app starts. I can't just type r in my terminal and let the app hot reload and call the endpoint again.. I have to use Shift + r to do a full restart first.
So the question is, am I calling the web service in the recommended spot? And if it not... where does it go? Also, shouldn't ListView have a function / property that gets called on "pull to refresh" or something?
As mentioned by #aziza you can use a Stream Builder or if you want to call a function every time widget gets built then you should call it in build function itself. Like in your case.
#override
Widget build(BuildContext context) {
Services.fetchPatients().then((p) => setState(() => widget.patients = p));
return new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
),
body: new Container(
child: new ListView(
children: widget.patients.map(
(patient) => new PatientCard(patient),
).toList()
)
)
);
}
If you want to add pull-to-refresh functionality then wrap your widget in refresh indicator widget. Add your call in onRefresh property.
return new RefreshIndicator(child: //Your Widget Tree,
onRefresh: handleRefresh);
Note that this widget only works with vertical scroll view.
Hope it helps.
Have a look on StreamBuilder. This widget will allow you to deal with async data that are frequently updated and will update the UI accordingly by listening onValue at the end of your stream.
Flutter have FutureBuilder class, you can also create your widget as shown below
Widget build(BuildContext context) {
var futureBuilder = new FutureBuilder(
future: Services.fetchPatients().then((p) => setState(() => widget.patients = p)),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
if (snapshot.data != null) {
return new Container(
child: new ListView(
children: snapshot.data.map(
(patient) => new PatientCard(patient),
).toList()
)
);
}
} else {
return new Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(16.0),
child: new CircularProgressIndicator());
}
});
return new Container(child: futureBuilder);
}
Example project : Flutter - Using the future builder with list view.