Question

我正在尝试使用flutter从我的Firestore数据库中提取数据，但出现以下错误：

类型'String'不是类型'ImageProvider'的子类型

我正在使用流生成器并定义了该类，但是它似乎无法识别我需要提取的图像。以下是我用于流构建器的所有代码。

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:ui' as ui;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Profile Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Profile'),
    );
  }
}
class Photo {
  final int photourl;
  final DocumentReference reference;

  Photo.fromMap(Map<String, dynamic> map, {this.reference})
      : photourl = map['photourl'];

  Photo.fromSnapshot(DocumentSnapshot snapshot)
      : this.fromMap(snapshot.data, reference: snapshot.reference);
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final _width = MediaQuery.of(context).size.width;
    final _height = MediaQuery.of(context).size.height;
    return StreamBuilder<DocumentSnapshot>(
        stream: Firestore.instance
            .collection('users')
            .document('testuser')
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Stack(
              children: <Widget>[
                new Container(
                  color: Colors.blue,
                ),
                new Image.network(
                  snapshot.data['photourl'].toString(),
                  fit: BoxFit.fill,
                ),
                new BackdropFilter(
                    filter: new ui.ImageFilter.blur(
                      sigmaX: 6.0,
                      sigmaY: 6.0,
                    ),
                    child: new Container(
                      decoration: BoxDecoration(
                        color: Colors.blue.withOpacity(0.9),
                        borderRadius:         BorderRadius.all(Radius.circular(50.0)),
                      ),
                    )),
                new Scaffold(
                    appBar: new AppBar(
                      title: new Text(widget.title),
                      centerTitle: false,
                      elevation: 0.0,
                      backgroundColor: Colors.transparent,
                    ),
                    drawer: new Drawer(
                      child: new Container(),
                    ),
                    backgroundColor: Colors.transparent,
                    body: new Center(
                      child: new Column(
                        children: <Widget>[
                          new SizedBox(
                            height: _height / 12,
                          ),
                          new CircleAvatar(
                            radius: _width < _height ? _width / 4 : _height / 4,
                            backgroundImage: snapshot.data['photourl'],
                          ),
                          new SizedBox(
                            height: _height / 25.0,
                          ),
                          new Text(
                            snapshot.data['name'],
                            style: new TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: _width / 15,
                                color: Colors.white),
                          ),
                          new Padding(
                            padding: new EdgeInsets.only(
                                top: _height / 30,
                                left: _width / 8,
                                right: _width / 8),
                          ),
                          new Divider(
                            height: _height / 15,
                            color: Colors.white,
                          ),
                          new Row(
                            children: <Widget>[
                              rowCell(
                                  snapshot.data['totalquestions'], 'Answers'),
                              rowCell('£ 673826', 'Earned'),
                            ],
                          ),
                          new Divider(
                              height: _height / 15, color: Colors.white),
                        ],
                      ),
                    ))
              ],
            );
          } else {
            return CircularProgressIndicator();
          }
        });
  }

Answer 1

在Column小部件内，您包含了CircleAvatar并将错误的参数传递给backgroundImage属性。 backgroundImage会使用图片网址的ImageProvider而不是String。

您应该更改此：

CircleAvatar(
    radius: _width < _height ? _width / 4 : _height / 4,
    backgroundImage: snapshot.data['photourl'],
),

对此：

CircleAvatar(
    radius: _width < _height ? _width / 4 : _height / 4,
    backgroundImage: NetworkImage(snapshot.data['photourl']),
),

使用StreamBuilder从Firestore提取数据时出错

1 个答案: