I am trying to make an API call using FutureBuilder in flutter but it seems like the request is not sent because I do not see the response printing. here is my future builder:
FutureBuilder(
future: authBloc.login(user, pass),
builder: (context, AsyncSnapshot snapshotItem) {
Map<String, dynamic> data = snapshotItem.data[0];
print(data['response']);
if (data.containsKey('id')) {
saveId(data['id']);
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (BuildContext context) {
return MainPage();
}));
}
if (data.containsKey("response")) {
if (data['response'] == false) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('An Error Has Occurred'),
content: Text(
'Please Make Sure That You Are Entering Valid UserName And Password'),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () =>
Navigator.of(context).pop(),
)
],
);
});
}
}
},
);
the authBloc.login(user, pass), part is login function in another file that makes the API call and I thought it is not necessary to include that file here.
Although I can't see the rest of your code, I think what you are trying to achieve should be done with an method and not a widget. When the user presses submit, call a function that basically contains what you wrote on that builder.
Calling navigator from within the builder is a bad idea. Any builder is expected to be called multiple times and in your case will lead to unexpected behaviour, that might be what you are seeing
Related
The context:
I stumbled upon a minor crash while testing a ListView of Dismissibles in Flutter. When swiping a dismissible, a Dialog is shown using the confirmDismiss option, for confirmation. This all works well, however the UI crashes when testing an unlikely use case. On the page are several options to navigate to other (named) routes. When a dismissible is swiped, and during the animation an option to navigate to a new route is tapped, the crash happens.
How to replicate the crash:
Dismiss the Dismissible
During the animation that follows (the translation of the position of the dismissible), tap on an action that brings you to a
new route. The timeframe to do this is minimal, I've extended it in the example.
The new route loads and the UI freezes
For reference, this is the error message:
AnimationController.reverse() called after AnimationController.dispose()
The culprit is the animation that tries to reverse when it was already disposed:
package:flutter/…/widgets/dismissible.dart:449
Things I've tried:
Initially, I tried checking this.mounted inside the showDialog builder but quickly realised the problem is not situated there.
Another idea was to circumvent the problem by using CancelableOperation.fromFuture and then cancelling it in the dispose() method of the encompassing widget, but that was to no avail.
What can I do solve or at least circumvent this issue?
The code (can also be found and cloned here):
// (...)
class _DimissibleListState extends State<DimissibleList> {
int childSize = 3;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: childSize,
itemBuilder: (context, index) {
if (index == 0) {
return _buildNextPageAction(context);
}
return _buildDismissible();
},
),
);
}
Widget _buildNextPageAction(context) {
return FlatButton(
child: Text("Go to a new page"),
onPressed: () => Navigator.of(context).pushNamed('/other'),
);
}
Dismissible _buildDismissible() {
GlobalKey key = GlobalKey();
return Dismissible(
key: key,
child: ListTile(
title: Container(
padding: const EdgeInsets.all(8.0),
color: Colors.red,
child: Text("A dismissible. Nice."),
),
),
confirmDismiss: (direction) async {
await Future.delayed(const Duration(milliseconds: 100), () {});
return showDialog(
context: context,
builder: (context) {
return Dialog(
child: FlatButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text("Confirm dismiss?"),
),
);
},
);
},
resizeDuration: null,
onDismissed: (direction) => setState(() => childSize--),
);
}
}
I had almost same problem with confirmDismiss ,in my case I was using (await Navigator.push() ) inside of confirmDismiss to navigate to another screen but in return I faced this error :
AnimationController.reverse() called after
AnimationController.dispose()
so to solve my problem inside of confirmDismiss I call a future function out side of confirmDismiss (without await ) and then add return true or false after that function call to finish animation of confirmDismiss.
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
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'm trying to change some variables in different methos in Flutter, but the value isn't changed.
An example is something like:
enum UserPlaceStatusType { NONE, GOING, THERE, OUT, CANCELLED }
class PlaceCardState extends State<PlaceCard> {
UserPlaceStatusType _isOtherPlaceActive = UserPlaceStatusType.NONE;
Widget build(BuildContext context) {
return Card(
child: Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: this._getBody(),
),
bottomNavigationBar: this._getBottomNavigationBar()));
}
List<Widget> _getBody() {
return [
Expanded(child: Text('test'), flex: 3),
Expanded(child: Text('test'), flex: 6),
Expanded(child: this._getActionsMenu(), flex: 1)
];
}
Widget _getActionsMenu() {
return Container(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: IconButton(
icon: Icon(Icons.arrow_forward_ios),
color: Colors.grey[400],
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new ListTile(
leading: new Icon(Icons.train),
title: new Text(Utility.format(
Language.of(context).takePlace, [_place.title])),
onTap: () {
showUserStatusDialog<DialogActions>(
context: context,
//It opens a simple dialog
child: this._getCurrentUserPlaceStatus());
},
),
],
);
});
},
));
}
Widget _getCurrentUserPlaceStatus() {
return new GraphqlProvider(
client: new ValueNotifier(
Client(endPoint: 'GraphQLUrl', cache: new InMemoryCache()),
),
child: new Query(
'The GraphQL Query',
variables: {},
builder: ({
bool loading,
var data,
var error,
}) {
if (data != null && data['getCurrentUserPlaceStatus'] != null) {
this._isOtherPlaceActive = UserPlaceStatusType.THERE;
Navigator.pop(context, DialogActions.cancel);
return Container();
} else {
this._isOtherPlaceActive = UserPlaceStatusType.GOING;
Navigator.pop(context, DialogActions.cancel);
return Container();
}
},
));
}
void showUserStatusDialog<T>({BuildContext context, Widget child}) async {
//here there is a validation but the variable value is the initial one, I mean NONE
if (this._isOtherPlaceActive == UserPlaceStatusType.GOING) {
//Cod to do
return;
}
showDialog<T>(
context: context,
builder: (BuildContext context) => child,
).then<void>((T value) {
if (value != null) {
this._isOtherPlaceActive = UserPlaceStatusType.NONE;
Navigator.pop(context);
}
});
}
}
I changed the variable value through some methods, but when I need to apply the validation, that's the initial value, it isn't changed, and I could not apply SetState method cuz it breaks the modal and throws an exception.
I will appreciate any feedback.
The method setState() can't be called inside a widget directly. I'm curious with your use of GrapQLProvider since it returns an empty Container() widget just to check the status of the data.
While I'm unfamiliar with the use of GraphQL, if the client that you're using inherits either a Stream or Future, it can be used to listen when the query is done.
Here's some snippets as demo. Let _testFuture() as the sample for a Future callback.
Future _testFuture() async{
return null;
}
Future can be listened to inside a Widget. When the request finishes, we have the opportunity to call setState().
_testFuture().then((value) {
// Check for values here
setState(() {
// Update values
});
});
Or if the request is set in a Stream, it's also possible to listen for Stream changes inside a Widget.
_streamController.add(_testFuture());
_streamController.stream.listen((event) {
// Check for values here
setState(() {
// Update values
});
});
This may not be the exact answer that you're looking for, but I hope this can guide you for a solution to your approach. I also found a GraphQL sample that uses ObservableQuery as a Stream that you can try.
Your code is very complex and should be refactored. Please notice how dialogs must be called.
enum DialogResult {ok, cancel}
caller_widget.dart
FlatButton(
child: Text('Open dialog'),
onPressed: () async {
// Call dialog and wait for result (async call)
final dialogResult = await showDialog<DialogResult>(
context: context,
builder: (context) => DialogWidget(),
);
if (dialogResult == DialogResult.ok) {
// do something
}
},
),
dialog_widget.dart
...
FlatButton(
child: Text('Ok'),
onPressed: () => Navigator.pop(context, DialogResult.ok), // DialogResult.ok returns
),
FlatButton(
child: Text('Cancel'),
OnPressed: () => Navigator.pop(context, DialogResult.cancel), // DialogResult.cancel returns
),
So you can return required value from dialog and set it to required variable.
P.S. Try to avoid use of old fashion then process of futures and use async/await.
I am trying to use showDialog in the following manner
showDialog(context: context,child:new Text("Hello Dialgo"));
The above works fine however it states that child parameter has been deprecated and the alternative way is to :
'Instead of using the "child" argument, return the child from a
closure '
'provided to the "builder" argument. This will ensure that the BuildContext '
'is appropriate for widgets built in the dialog.'
I am not sure what that means. Any simple example here would be appreciated.
Change it it
showDialog(
context: context,
builder: (_) => new Text("Hello Dialgo")
);
If you need the context from within the dialog change builder: (_) => to builder: (BuildContext context) =>
Because the Builder is a function handler, we need to create a function which accepts a single argument (BuildContext) and returns a Widget.
Syntax can either be:
(BuildContext context) => new Text('...');
or
(BuildContext context) {
return new Text('...')
}
They are equivalent, though the second one can have more than one line
See an example here: https://github.com/aqwert/flutter_auth_starter/blob/master/lib/core/dialogs/showError_dialog.dart
The child deprecated. If you look the this property, you can this warning.
Instead of using the "child" argument, return the child from a closure provided to the "builder" argument. This will ensure that the BuildContext is appropriate for widgets built in the dialog.
If you want to use builder, only write a function that returns your widget.
Example usage in my loader function
void showLoader(BuildContext context) {
showDialog(context: context, builder: (BuildContext context) => new ProgressHUD(
color: Colors.white,
containerColor: Theme.of(context).primaryColor,
));
}
Usage
// Start to show loader
showLoader(context);
// Do a async job and wait it
await do();
// Hide the loader
Navigator.pop(context);
We can assign text widget to the alert variable, like this:
var alert = new Text("Hello dialog");
Since the child is deprecated:
showDialog(context: context, child: alert);
we can write it like this:
showDialog(context: context, builder: (_) => alert);
If you want to create more complex dialog, you can redefine alert like this:
var alert = new AlertDialog(
title: new Text('App'),
content: new Text(message),
actions: <Widget>[
new FlatButton(onPressed: () {Navigator.pop(context);},
child: new Text('OK'))
],
);
and use it the same as above.
This worked for me.
showDialog(
context: context,
builder: (BuildContext context) => new AlertDialog(
title: new Text('Warning'),
content: new Text('Hi this is Flutter Alert Dialog'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.close),
onPressed: () {
Navigator.pop(context);
})
],
));