Flutter 图片浏览器：从零实现，拒绝摆烂

前端

2023-11-03 14:29:05

Flutter 图片浏览器：酷炫还是摆烂？

前言

在 Flutter 开发中，图片浏览器的实现往往让人望而生畏。许多现成的插件虽然好用，却扼杀了我们探索和学习的乐趣。本着“能自己折腾就自己折腾”的原则，让我们踏上零基础打造 Flutter 图片浏览器的奇妙旅程！

效果预览

让我们先睹为快！我们的图片浏览器将实现以下酷炫的效果：

自由展示任意 Widget
支持视频播放
构建优雅的图片浏览体验

从零开始，一步步打造

1. 引入必要的依赖

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:video_player/video_player.dart';

2. 创建图片浏览器 Widget

class ImageBrowser extends StatelessWidget {
  final dynamic data;

  ImageBrowser({required this.data});

  @override
  Widget build(BuildContext context) {
    // 判断数据类型，渲染相应的内容
    if (data is ImageProvider) {
      return PhotoView(
        imageProvider: data,
        heroAttributes: const PhotoViewHeroAttributes(tag: 'image'),
      );
    } else if (data is VideoPlayerController) {
      return VideoPlayer(controller: data);
    } else {
      return Text('不支持的数据类型');
    }
  }
}

3. 使用示例

// 展示图片
ImageBrowser(data: AssetImage('assets/image.jpg'));

// 展示视频
VideoPlayerController controller = VideoPlayerController.network('https://flutter.dev/docs/cookbook/animation/video-player');
ImageBrowser(data: controller);

扩展功能

为了进一步提升图片浏览器的体验，我们可以扩展更多功能：