Flutter无限滚动分页插件riverpod_infinite_scroll_pagination的使用

Flutter无限滚动分页插件riverpod_infinite_scroll_pagination的使用

示例代码

import 'package:flutter/material.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:dio/dio.dart';
import 'package:example/src/env/env.dart';
import 'package:example/src/features/movies/data/tmdb_repository.dart';

part 'tmdb_movie.freezed.dart';
part 'tmdb_movie.g.dart';

[@freezed](/user/freezed)
class TmdbMovie with _$TmdbMovie {
  factory TmdbMovie({
    bool? adult,
    @JsonKey(name: 'backdrop_path') String? backdropPath,
    int? id,
    @JsonKey(name: 'original_language') String? originalLanguage,
    @JsonKey(name: 'original_title') String? originalTitle,
    String? overview,
    double? popularity,
    @JsonKey(name: 'poster_path') String? posterPath,
    @JsonKey(name: 'release_date') String? releaseDate,
    String? title,
    bool? video,
    @JsonKey(name: 'vote_average') double? voteAverage,
    @JsonKey(name: 'vote_count') int? voteCount,
  }) = _TmdbMovie;

  factory TmdbMovie.fromJson(Map<String, dynamic> json) => _$TmdbMovieFromJson(json);
}

class TmdbRepository {
  const TmdbRepository({
    required this.dio,
  });

  final Dio dio;

  Future<PaginatedResponse<TmdbMovie>> getTrendingMovies({
    int page = 1,
    String? query,
  }) async {
    final results = await dio.get<Map<String, dynamic>>({
      'trendin/movie/day?language=en-US&'page=$page${query != null ? '&amp;$query' : ''}',
    });
    return PaginatedResponse.fromJson(
      results.data!,
      dataMapper: TmdbMovie.fromJson,
      dataField: 'results',
      paginationParser: (data) =&gt; Pagination(
        totalNumber: data['total_results'] as int,
        currentPage: data['page'] as int,
        lastPage: data['total_pages'] as int,
      ),
    );
  }
}

[@riverpod](/user/riverpod)
class TrendingMoviesList extends _$TrendingMoviesList with PaginatedDataMixin&lt;TmdbMovie&gt; implements PaginatedNotifier&lt;TmdbMovie&gt; {
  @override
  FutureOr&lt;List&lt;TmdbMovie&gt;&gt build() async {
    return init(
      dataFetcher: PaginatedDataRepository(
        fetcher: ref.watch(tmdbRepositoryProvider).getTrendingMovies,
      ),
    );
  }
}

class MovieList extends ConsumerWidget {
  const MovieList({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final movies = ref.watch(trendingMoviesListProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Trending Movies')),
      body: PaginatedListView(
        state: movies,
        itemBuilder: (_, data) =&gt; MovieItem(movie: data),
        notifier: ref.read(trendingMoviesListProvider.notifier),
      ),
    );
  }
}

使用说明

1. 初始化数据源

   • 首先，我们需要初始化一个 AsyncNotifier 来管理状态。在这个例子中，我们使用了 TrendingMoviesList 提供器来获取 trending movies 的列表。

   import 'package:flutter_riverpod/flutter_riverpod.dart';
   import 'package:riverpod_annotation/riverpod_annotation.dart';
   import 'package:example/src/features/movies/providers/trending_movies_list_provider.dart';
   
   void main() {
     runApp(RiverpodApp());
   }
   
   class RiverpodApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Trending Movies')),
         body: Provider(
           child: MovieList(),
         ),
       );
     }
   }
   

2. 创建模型类和仓库

   • 我们使用 freezed 包来创建电影模型类，并使用 dio 库来处理网络请求。

   import 'package:freezed_annotation/freezed_annotation.dart';
   import 'package:dio/dio.dart';
   import 'package:example/src/features/movies/data/tmdb_repository.dart';
   
   part 'tmdb_movie.freezed.dart';
   part 'tmdb_movie.g.dart';
   
   [@freezed](/user/freezed)
   class TmdbMovie with _$TmdbMovie {
     factory TmdbMovie({
       bool? adult,
       @JsonKey(name: 'backdrop_path') String? backdropPath,
       int? id,
       @JsonKey(name: 'original_language') String? originalLanguage,
       @JsonKey(name: 'original_title') String? originalTitle,
       String? overview,
       double? popularity,
       @JsonKey(name: 'poster_path') String? posterPath,
       @JsonKey(name: 'release_date') String? releaseDate,
       String? title,
       bool? video,
       @JsonKey(name: 'vote_average') double? voteAverage,
       @JsonKey(name: 'vote_count') int? voteCount,
     }) = _TmdbMovie;
   
     factory TmdbMovie.fromJson(Map<String, dynamic> json) =&gt;
       _$TmdbMovieFromJson(json);
   }
   
   class TmdbRepository {
     const TmdbRepository({
       required this.dio,
     });
   
     final Dio dio;
   
     Future&lt;PaginatedResponse&lt;TmdbMovie&gt;&gt; getTrendingMovies({
       int page = 1,
       String? query,
     }) async {
       final results = await dio.get&lt;Map&lt;String, dynamic&gt;&gt;({
         'trendin/movie/day?language=en-US&amp;page=$page${query != null ? '&amp;$query' : ''}',
       });
       return PaginatedResponse.fromJson(
         results.data!,
         dataMapper: TmdbMovie.fromJson,
         dataField: 'results',
         paginationParser: (data) =&gt; Pagination(
           totalNumber: data['total_results'] as int,
           currentPage: data['page'] as int,
           lastPage: data['total_pages'] as int,
         ),
       );
     }
   }
   

3. 设置提供器

   • 创建 TrendingMoviesList 提供器来初始化 TmdbRepository 并进行数据加载。

   import 'package:flutter_riverpod/flutter_riverpod.dart';
   import 'package:riverpod_annotation/riverpod_annotation.dart';
   import 'package:example/src/features/movies/data/tmdb_repository.dart';
   
   part 'tmdb_repository_provider.g.dart';
   
   [@riverpod](/user/riverpod)
   TmdbRepository tmdbRepository(TmdbRepositoryRef ref) {
     return TmdbRepository(
       dio: Dio(
         BaseOptions(
           baseUrl: 'https://api.themoviedb.org/3/',
           headers: <String, dynamic>{
             'Accept': 'application/json',
             'Authorization': 'Bearer ${Env.tmdbApiKey}',
           },
         ),
       ),
     );
   }
   

4. 构建 UI

   • 在 MovieList 消费者 widget 中使用 PaginatedListView 来展示数据。

   import 'package:flutter/material.dart';
   import 'package:flutter_riverpod/flutter_riverpod.dart';
   
   class MovieList extends ConsumerWidget {
     const MovieList({super.key});
   
     @override
     Widget build(BuildContext context, WidgetRef ref) {
       final movies = ref.watch(trendingMoviesListProvider);
   
       return Scaffold(
         appBar: AppBar(title: const Text('Trending Movies')),
         body: PaginatedListView(
           state: movies,
           itemBuilder: (_, data) => MovieItem(movie: data),
           notifier: ref.read(trendingMoviesListProvider.notifier),
         ),
       );
     }
   }
   

5. 添加搜索功能

   • 如果需要添加搜索功能，可以修改 SearchMovies 提供器来处理查询参数。

   import 'package:flutter_riverpod/flutter_riverpod.dart';
   import 'package:riverpod_annotation/riverpod_annotation.dart';
   import 'package:example/src/features/movies/data/tmdb_repository.dart';
   
   part 'search_movies_provider.g.dart';
   
   [@riverpod](/user/riverpod)
   class SearchMovies extends _$SearchMovies with PaginatedDataMixin<TmdbMovie> implements PaginatedNotifier<TmdbMovie> {
     @override
     FutureOr<List<TmdbMovie>> build() async {
       final dataFetcher = PaginatedDataRepository(
         fetcher: ref.watch(tmdbRepositoryProvider).searchMovies,
         queryFilter: queryFilter,
       );
   
       return init(
         dataFetcher: PaginatedDataRepository(
           fetcher: ref.watch(tmdbRepositoryProvider).searchMovies,
           queryFilter: queryFilter,
         ),
       );
     }
   }
   

6. 使用 Slivers 和 Skeleton 动画

   • 可以通过设置 useSliver 参数为 true 来使用 Slivers，并传递一个 ScrollController 实例。