In Flutter, make a HTTP request, then depending on response, update the UI or open a new page
Yes, you should not use a FutureBuilder if you want to do anything other than changing the UI depending on the async task. You should manage your own async. Here's some code to get you started:
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
bool loaded;
@override
void initState() {
super.initState();
asyncInit();
}
Future<void> asyncInit() async {
final response =
await doTheNetworkRequest() //imagine that this was an http request
if (yes) {
setState(() {
loaded = true;
});
} else {
Navigator.of(context).push(...);
}
}
@override
Widget build(BuildContext context) {
return loaded == true ? Text('Loaded') : Text('Loading');
}
}
Nearchos
Updated on December 29, 2022Comments
-
Nearchos over 1 year
I am developing a Flutter app where it acts as a client, connecting to a server via an API. The app makes requests and depending on the response it progresses the state.
My question is the following: Can I make a request, and then depending on the response, either update the UI or open a new page?
I have used
FutureBuilder
as shown below. The problem is that theFutureBuilder
requires to return a UI. In my case, if the response is OK I want to open a new page (see //todo line). I tried usingNavigator.pushReplacement
but it does not really work. Any ideas?import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'dart:async'; import 'package:flutter/rendering.dart'; import 'model.dart'; class Start extends StatefulWidget { final String title; Start({Key key, @required this.title}) : super(key: key); @override State<StatefulWidget> createState() => new StartState(); } class StartState extends State<Start> { Future<StartReply> _startReply; _makeRequest() { setState(() { _startReply = ...; // actual API request }); } @override Widget build(BuildContext context) { return MaterialApp( title: widget.title, home: Scaffold( appBar: AppBar( title: Text(widget.title), leading: IconButton( icon: Icon(Icons.arrow_back), onPressed: () => Navigator.of(context).pop(false) ), ), body: Center( child: FutureBuilder( future: _startReply, builder: (context, snapshot) { if(snapshot.connectionState == ConnectionState.none) { return ElevatedButton( onPressed: _makeRequest, child: Text("Make request") ); } else if(snapshot.connectionState == ConnectionState.done && snapshot.hasData) { // todo open page here return Text('Started!', style: TextStyle(color: Colors.green, fontStyle: FontStyle.italic)); } else if(snapshot.hasError) { debugPrint('StartReply: ${snapshot.data}'); return Text('Error (${snapshot.error})', style: TextStyle(color: Colors.red, fontStyle: FontStyle.italic)); } else { return CircularProgressIndicator(); } } ) ) ) ); } }
-
griffins almost 3 years
Can I make a request, and then depending on the response, either update the UI or open a new page?
Sure . you can do anything you want, but without letting us know what you're looking for in the UI, or showing sample response we cant help
-