在 Flutter 中，发出 HTTP 请求，然后根据响应更新 UI 或打开一个新页面

Question

我正在开发一个 Flutter 应用程序，它充当客户端，通过 API 连接到服务器。该应用发出请求，并根据响应推进状态。

我的问题如下：我可以提出请求，然后根据响应更新 UI 或打开新页面吗？

我使用了 FutureBuilder 如下所示。问题是 FutureBuilder 需要 return 一个 UI。就我而言，如果响应正常，我想打开一个新页面（参见//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();
                    }
                  }
                )
            )
        )
    );
  }
}

Answer 1

是的，如果您想根据异步任务更改 UI 以外的任何事情，则不应使用 FutureBuilder。您应该管理自己的异步。下面是一些帮助您入门的代码：


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');
  }
}

在 Flutter 中，发出 HTTP 请求，然后根据响应更新 UI 或打开一个新页面

In Flutter, make a HTTP request, then depending on response, update the UI or open a new page

flutter

dart

flutter-futurebuilder

flutter-http