Flutter “在 null 值上使用空檢查運算符”錯誤

Question

我試圖用新聞 api 創建一個新聞應用程序，但是當 1 個新聞圖塊實際出現時我遇到了一個奇怪的錯誤，但應用程序中也有一條錯誤消息。

我需要有關如何擺脫此錯誤的幫助。

所以下面是我的應用程序的代碼

這是我的主頁代碼

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:medreminder/NewsArticle/components/list_tile.dart';
import 'package:medreminder/NewsArticle/models/article_models.dart';
import 'package:medreminder/NewsArticle/services/api_service.dart';

class NewsHomePage extends StatelessWidget {
  //const NewsHomePage({super.key});

  ApiService client = ApiService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Get.isDarkMode?Colors.grey[600]:Colors.white,
        leading: IconButton(
          onPressed: ()=>Get.back(),
          icon: Icon(Icons.arrow_back_ios,
          color: Get.isDarkMode?Colors.white:Colors.grey
          ),
        ),
        title:  Text("News & Article", style: TextStyle(
          color: Get.isDarkMode?Colors.white:Colors.black
        ),),
      ),
      body: FutureBuilder(
        future: client.getArticle(),
        builder: (BuildContext context, AsyncSnapshot<List<Article>> snapshot) {
          if(snapshot.hasData){
            List<Article>? articles = snapshot.data;
            return ListView.builder(
              itemCount: articles!.length,
              itemBuilder: (context, index) => listTile(articles[index])
            );
          }
          return Center(child: CircularProgressIndicator(),);
        },
      ),
    );
  }
}

我的API服務 class

import 'dart:convert';
import 'package:http/http.dart';
import 'package:medreminder/NewsArticle/models/article_models.dart';

class ApiService {

  final endPointUrl = "https://newsapi.org/v2/top-headlines?country=gb&apiKey=cacee27fff544eb39d5fb29b28ca3788"; 

   Future<List<Article>> getArticle() async{
    Response res = await get(Uri.parse(endPointUrl));

    if(res.statusCode==200){
      Map<String, dynamic> json = jsonDecode(res.body);

      List<dynamic> body = json['articles'];

      List<Article> articles = body.map((dynamic item) => Article.fromJson(item)).toList();
      return articles;
    }else{

      throw("Cant get the News");
    }

  }
}

我的新聞/文章 model class

import 'source_models.dart';
import 'package:medreminder/NewsArticle/components/list_tile.dart';
import 'package:medreminder/NewsArticle/models/source_models.dart';

class Articles {
  List<Articles>? articles;

  Articles({this.articles});

  Articles.fromJson(Map<String, dynamic> json) {
    if (json['articles'] != null) {
      articles = <Articles>[];
      json['articles'].forEach((v) {
        articles!.add(Articles.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    if (articles != null) {
      data['articles'] = articles!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Article {
  Source? source;
  String? author;
  String? title;
  String? description;
  String? url;
  String? urlToImage;
  String? publishedAt;
  String? content;

  Article(
      {source,
      author,
      title,
      description,
      url,
      urlToImage,
      publishedAt,
      content});

  Article.fromJson(Map<String, dynamic> json) {
    source = json['source'] != null ? Source.fromJson(json['source']) : null;
    author = json['author'];
    title = json['title'];
    description = json['description'];
    url = json['url'];
    urlToImage = json['urlToImage'];
    publishedAt = json['publishedAt'];
    content = json['content'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    if (source != null) {
      data['source'] = source!.toJson();
    }
    data['author'] = author;
    data['title'] = title;
    data['description'] = description;
    data['url'] = url;
    data['urlToImage'] = urlToImage;
    data['publishedAt'] = publishedAt;
    data['content'] = content;
    return data;
  }
}

class Source {
  String? id;
  String? name;

  Source({id, name});

  Source.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['id'] = id;
    data['name'] = name;
    return data;
  }
}

最后是我的 custometile class

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:medreminder/NewsArticle/models/article_models.dart';

 Widget listTile(Article article) {
  return Container(
    margin: EdgeInsets.all(12),
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(18),
        boxShadow: [BoxShadow(color: Colors.black, blurRadius: 3)]),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: NetworkImage(article.urlToImage!)),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        SizedBox(height: 9),
        Container(
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(30),
          ),
          child: Text(article.source!.name!),
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          article.title!,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        )
      ],
    ),
  );
}

讓我知道你們是否需要在必要時查看其他代碼。 十分感謝大家

Answer 1

在 API 響應中，一些響應數據有 null 值： article.urlImage是 null，這導致了這個問題。 要處理它，您必須提供不同的容器樣式或默認圖像。

代碼如下：在不同容器樣式的listTile中

article.urlToImage != null
            ? Container(
                decoration: BoxDecoration(
                  image:
                      DecorationImage(image: NetworkImage(article.urlToImage!)),
                  borderRadius: BorderRadius.circular(8),
                ),
              )
            : Container(),

或在默認圖像的listTile中：

Container(
     decoration: BoxDecoration(
         image: DecorationImage(
            image: NetworkImage(article.urlToImage != null
                  ? article.urlToImage!
                  : "Your defualt image here")),
                  borderRadius: BorderRadius.circular(8),
                ),
              )

Answer 2

那是因為你用過？ null 檢查當值為 null 時導致錯誤的運算符嘗試用此替換此運算符。 運算符這樣。

改變這一行

itemCount: articles.,length,

對此

itemCount: articles?.length,

Answer 3

添加 FutureBuilder 返回類型並檢查它！

 body: FutureBuilder<List<Article>>(
        future: client.getArticle(),
        builder: (BuildContext context, AsyncSnapshot<List<Article>> snapshot) {
          if(snapshot.hasData&&snapshot.data!=null&& snapshot.data!.isNotEmpty){
            List<Article>? articles = snapshot.data;
            return ListView.builder(
              itemCount: articles!.length,
              itemBuilder: (context, index) => listTile(articles[index])
            );
          }
          return Center(child: CircularProgressIndicator(),);
        },
      ),
    );