Flutter开发IMDB风格电影应用：解决Null非List子类型异常

问题根源 #

你遇到的异常是因为TrendingMovies组件的trending参数被传入了null，但它被声明为非空的List类型，Dart的空安全机制不允许这种类型转换。通常这个问题出在父组件调用该组件时，TMDB API请求还未完成、请求失败，或者数据解析错误导致传入了null。

解决方案 #

1. 给组件参数添加默认空列表（推荐）

修改TrendingMovies的参数声明和构造函数，确保即使父组件传入null，组件也能拿到一个空列表，避免直接调用trending.length时崩溃：

import 'package:flutter/material.dart';
import 'package:tmdb_movies/utils/text.dart';

class TrendingMovies extends StatelessWidget {
  
  // 声明为非空List，默认值是空列表
  final List trending;
  // 构造函数中给trending设置默认值
  const TrendingMovies({Key? key, this.trending = const []}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          modified_text(size: 25, text: 'Trending Movies', color: Colors.white,),
          SizedBox(height: 10,),
          Container(
            height: 270,
            child: ListView.builder(
              itemCount: trending.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index){
                // 处理poster_path为null的情况，避免NetworkImage报错
                final posterPath = trending[index]['poster_path'];
                return InkWell(
                  onTap: (){},
                  child: Container(
                    width: 140,
                    child: Column(
                      children: <Widget>[
                        Container(
                          height: 200,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: posterPath != null 
                                  ? NetworkImage('https://image.tmdb.org/t/p/w500' + posterPath)
                                  : const AssetImage('assets/placeholder.png') as ImageProvider, // 替换为你的占位图路径
                              fit: BoxFit.cover,
                            )
                          ),
                        ),
                        Container(
                          child: modified_text(
                            text: trending[index]['title'] ?? 'Unknown Title', 
                            color: Colors.white,
                            size: 14,
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }),
          )
        ],
      ),
    );
  }
}

2. 在父组件中确保传入非空列表

如果父组件是从TMDB API获取数据，要在请求完成后再渲染TrendingMovies，同时处理请求失败的情况：

// 父组件示例
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List? trendingMovies;

  @override
  void initState() {
    super.initState();
    fetchTrendingMovies();
  }

  Future<void> fetchTrendingMovies() async {
    // 替换为你的TMDB API请求逻辑
    final response = await http.get(Uri.parse('https://api.themoviedb.org/3/trending/movie/day?api_key=YOUR_API_KEY'));
    if (response.statusCode == 200) {
      setState(() {
        trendingMovies = json.decode(response.body)['results'] ?? [];
      });
    } else {
      setState(() {
        trendingMovies = [];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: trendingMovies == null 
          ? const Center(child: CircularProgressIndicator()) // 加载状态
          : TrendingMovies(trending: trendingMovies!),
    );
  }
}

额外注意点 #

• 处理API返回的poster_path可能为null的情况，避免NetworkImage加载失败；
• 在API请求时添加错误处理，确保即使请求失败也不会传入null；
• 若使用Dart空安全，尽量明确参数的可空性，避免隐式类型转换错误。

内容的提问来源于stack exchange，提问作者Jim Ar Rafi