Flutter:无法将http响应转换为podo对象

Question

XKCD.dart

class XKCD {
  final String id;
  final String imageURL;
  final String safeTitle;

  XKCD({this.id, this.imageURL, this.safeTitle});

  factory XKCD.fromJson(Map<String, dynamic> json){
    return XKCD(
    id: json['num'],
    imageURL:json['img'],
    safeTitle:json['safe_title'],
    );
  }
}

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:fluttermvpillustrativeapp/data/xkcd_data.dart';

class ProdXKCDRepo {
  String baseURL = "http://xkcd.com/";

  Future<XKCD> fetchComicPost() async {
    http.Response response = await http.get(baseURL + "info.0.json");
    final responseBody = json.decode(response.body);
    final statusCode = response.statusCode;

    if (response.statusCode == 200) {
      print (XKCD.fromJson(json.decode(response.body)); // No value gets printed
      return XKCD.fromJson(json.decode(response.body));
    }

  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future<XKCD> comicPost;

  @override
  void initState() {
    super.initState();
    comicPost = ProdXKCDRepo().fetchComicPost();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("XKCD comic"),
        actions: <Widget>[
          IconButton(
            icon: new Icon(Icons.file_download),
            tooltip: 'Download',
            onPressed: () {},
          ),
          IconButton(
            icon: new Icon(Icons.share),
            tooltip: 'Share',
            onPressed: () {},
          ),
        ],
      ),
      body: _comicBody(),
    );
  }

  Widget _comicBody() {
    return Center(
      child: FutureBuilder<XKCD>(
        future: comicPost,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            Column(
              children: <Widget>[
                Expanded(
                  child: Container(
                    child: PhotoView(
                      imageProvider: NetworkImage(snapshot.data.imageURL),
                    ),
                  ),
                  flex: 1,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.fast_rewind), onPressed: null),
                    IconButton(icon: Icon(Icons.chevron_left), onPressed: null),
                    IconButton(
                        icon: Icon(Icons.center_focus_strong), onPressed: null),
                    IconButton(
                        icon: Icon(Icons.chevron_right), onPressed: null),
                    IconButton(icon: Icon(Icons.fast_forward), onPressed: null),
                  ],
                )
              ],
            );
          }
          // By default, show a loading spinner.
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

当我在FutureBuilder中使用它时，会得到错误imageURL is null，并且微调器会无限地加载。

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following NoSuchMethodError was thrown building FutureBuilder<XKCD>(dirty, state: _FutureBuilderState<XKCD>#b4c12):
The getter 'imageURL' was called on null.
Receiver: null
Tried calling: imageURL

我不知道我错在哪里。

Answer 1

您忘记在以下位置添加return关键字。

if (snapshot.hasData) { return Column( children: <Widget>[ 

正因为如此，你没有得到更新的UI。

Answer 2

您的错误可以通过在将来的构建器中的列之前添加return语句来修复。

请看下面的代码：

if (snapshot.hasData) {
           return Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  child: Image.network('${snapshot.data.imageURL}'),
                ),
                flex: 1,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  IconButton(icon: Icon(Icons.fast_rewind), onPressed: null),
                  IconButton(icon: Icon(Icons.chevron_left), onPressed: null),
                  IconButton(
                      icon: Icon(Icons.center_focus_strong), onPressed: null),
                  IconButton(icon: Icon(Icons.chevron_right), onPressed: null),
                  IconButton(icon: Icon(Icons.fast_forward), onPressed: null),
                ],
              )
            ],
          );
        }

输出：

​

希望能有所帮助。

完整代码：

Widget _comicBody() {
  return Center(
    child: FutureBuilder<XKCD>(
      future: ProdXKCDRepo().fetchComicPost(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  child: Image.network('${snapshot.data.imageURL}'),
                ),
                flex: 1,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  IconButton(icon: Icon(Icons.fast_rewind), onPressed: null),
                  IconButton(icon: Icon(Icons.chevron_left), onPressed: null),
                  IconButton(
                      icon: Icon(Icons.center_focus_strong), onPressed: null),
                  IconButton(icon: Icon(Icons.chevron_right), onPressed: null),
                  IconButton(icon: Icon(Icons.fast_forward), onPressed: null),
                ],
              )
            ],
          );
        } else if (snapshot.hasError) {
          return Center(
            child: Text('${snapshot.error}'),
          );
        }
        // By default, show a loading spinner.
        return CircularProgressIndicator();
      },
    ),
  );
}