与提供者一起颤动 - 数据为空

Question

我是flutter的新手，我在flutter和provider中做错了，因为当应用程序启动时我没有provider数据。出了点问题。你能帮我告诉我我做错了什么吗？

这是我的代码

来自 api 的响应

[{"id_imagen":"112","imagen":"20200608201951.jpg","texto":"I love you!!"}]  

service.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:miprincesa/model/image.dart';

import 'package:http/http.dart' as http;

class ImagesServices extends ChangeNotifier {
final String _url = "url api";

ImageList? datos;

bool isLoading = true;

ImagesServices() {
 this.loadImage();
}

Future loadImage() async {
 Map<String, String> headers = {
   'Content-Type': 'application/json;charset=UTF-8',
   'Charset': 'utf-8'
 };

 final url = Uri.https(_url, "endPoint");
 final resp = await http.get(url, headers: headers);

 datos = ImageList.fromJson(jsonDecode(resp.body));
 print("Imagen " + datos!.images[0].imagen);

 notifyListeners();


}
}

我的模型 image.dart

class ImageList {
  final List<Image> images;

  ImageList({
    required this.images,
  });

  factory ImageList.fromJson(List<dynamic> parsedJson) {
    List<Image> data = [];
    data = parsedJson.map((i) => Image.fromJson(i)).toList();

    return new ImageList(images: data);
  }
}

class Image {
  String idImagen;
  String imagen;
  String texto;

  Image({
    required this.idImagen,
    required this.imagen,
    required this.texto,
  });

  factory Image.fromJson(Map<String, dynamic> json) {
    return new Image(
      idImagen: json['idImagen'].toString(),
      imagen: json['imagen'],
      texto: json['texto'],
    );
  }
}

和 main.dart

import 'package:flutter/material.dart';

import 'dart:math';

import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'package:miprincesa/service/services.dart';

void main() => runApp(AppState());

class AppState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider(create: (_) => ImagesServices())],
      child: MaterialApp(
        title: 'Material App',
        debugShowCheckedModeBanner: false,
        home: SafeArea(child: _fondo()),
      ),
    );
  }
}

class _fondo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var images = ['img.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png'];

    return Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(
                  "assets/" + images[Random().nextInt(images.length)]),
              fit: BoxFit.fill),
        ),
        child: Padding(
          padding: const EdgeInsets.all(25.0),
          child: Container(
            decoration: _cardDecoration(),
            child: Container(
              child: _imagenCard(),
            ),
          ),
        ));
  }

  BoxDecoration _cardDecoration() => BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        boxShadow: [
          BoxShadow(
              color: Colors.black,
              //Blur longitud, offset es la posicion
              blurRadius: 15,
              offset: Offset(0, 5))
        ],
      );
}

class _imagenCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);

    final imageService = Provider.of<ImagesServices>(context);

    print(imageService.datos!.images[0].imagen); // Error null value

    return ConstrainedBox(
      constraints:
          BoxConstraints(minHeight: 150.0, maxHeight: queryData.size.height),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: Container(
          alignment: Alignment.topCenter,
          color: Colors.white,
          child: Column(
            children: [
              FadeInImage(
                placeholder: AssetImage('assets/jar-loading.gif'),
                image:
                    NetworkImage('https://via.placeholder.com/400x600/f6f6f6'),
              ),
              SizedBox(
                height: 20,
              ),
              Text("Texto de prueba",
                  style: GoogleFonts.dancingScript(
                      fontSize: 28, fontStyle: FontStyle.italic))
            ],
          ),
        ),
      ),
    );
  }
}

它给了我一个空值异常并且在你得到数据之后

在构建 _imagenCard(dirty, dependencies: [MediaQuery, _InheritedProviderScope]) 时引发了以下 _CastError： 用于空值的空检查运算符

....

I/flutter (7795)：Imagen 20200506093444.jpg

我/颤振（7795）：20200506093444.jpg

我做错了什么或非常错误？

thk

Answer 1

您的 API 调用似乎在您访问数据之前没有完成，这是一种奇怪的行为，因为您正在等待结果。您可以使用FutureBuilder 小部件等待您的 API 调用，并在加载、完成和错误状态下显示特定小部件。

实现：将ConstrainedBox 包裹在FutureBuilder 中。您可能需要在Provider.of<...>(context, //here) 中添加参数listen: false，因为它会在notifyListeners 之后侦听和重建。