クライアントとして機能し、API 経由でサーバーに接続する Flutter アプリを開発しています。アプリはリクエストを行い、レスポンスに応じて状態を進行させます。
私の質問は次のとおりです: リクエストを作成し、レスポンスに応じて UI を更新するか、新しいページを開くことはできますか?
FutureBuilder
下図のように使用しました。問題は、FutureBuilder
が UI を返す必要があることです。私の場合、応答が OK であれば、新しいページを開きたいと考えています (//todo 行を参照)。使ってみましたが、なかなかうまくいきNavigator.pushReplacement
ません。何か案は?
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();
}
}
)
)
)
);
}
}