Flutter全屏显示图片插件full_screen_image的使用

full_screen_image 是一个用于在Flutter应用中实现图片全屏显示的插件。它支持通过垂直滚动关闭全屏模式，并且可以与Hero widget结合使用，提供流畅的动画效果。

安装

要在你的项目中使用这个插件，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  full_screen_image: any

然后运行 flutter pub get 来安装依赖。

示例代码

以下是一个完整的示例demo，展示了如何使用 full_screen_image 插件来实现不同类型的全屏图片显示。

主要代码

import 'package:flutter/material.dart';
import 'package:full_screen_image/full_screen_image.dart';

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

class MyApp extends StatelessWidget {
  String lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ..."; // 省略部分内容

  Widget fullScreenImage() => FullScreenWidget(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.asset(
            "assets/image1.jpg",
            fit: BoxFit.cover,
          ),
        ),
      );

  Widget fullScreenHeroWidget() => FullScreenWidget(
        child: Hero(
          tag: "customTag",
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Image.asset(
              "assets/image2.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
      );

  Widget smallImage() => FullScreenWidget(
        child: Center(
          child: Hero(
            tag: "smallImage",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget customBackgroundColor() => FullScreenWidget(
        backgroundColor: Colors.purple,
        child: Center(
          child: Hero(
            tag: "customBackground",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget nonTransparentWidget() => FullScreenWidget(
        backgroundColor: Colors.purple,
        backgroundIsTransparent: false,
        child: Center(
          child: Hero(
            tag: "nonTransparent",
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                "assets/image3.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      );

  Widget customWidget() => FullScreenWidget(
        child: SafeArea(
          child: Card(
            elevation: 4,
            child: Container(
              height: 350,
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Hero(
                    tag: "customWidget",
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Image.asset(
                        "assets/image3.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  SizedBox(height: 16),
                  Text('Lorem text', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                  SizedBox(height: 16),
                  Expanded(child: Text(lorem)),
                ],
              ),
            ),
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Full screen widget example')),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              GridView.count(
                primary: false,
                shrinkWrap: true,
                crossAxisCount: 2,
                children: <Widget>[
                  _buildGridItem("Full screen image", fullScreenImage()),
                  _buildGridItem("Full screen image with hero", fullScreenHeroWidget()),
                  _buildGridItem("Small image with hero", smallImage()),
                  _buildGridItem("Custom background", customBackgroundColor()),
                  _buildGridItem("None transparent", nonTransparentWidget()),
                ],
              ),
              _buildListItem("Custom Widget", customWidget()),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildGridItem(String title, Widget widget) {
    return Column(
      children: <Widget>[
        Padding(padding: const EdgeInsets.all(8.0), child: widget),
        ListTile(title: Text(title, textAlign: TextAlign.center)),
      ],
    );
  }

  Widget _buildListItem(String title, Widget widget) {
    return Column(
      children: <Widget>[
        Padding(padding: const EdgeInsets.all(8.0), child: widget),
        ListTile(title: Text(title, textAlign: TextAlign.center)),
      ],
    );
  }
}

说明

• 全屏显示图片：使用 FullScreenWidget 包裹图片组件，图片将自动进入全屏模式。
• 带Hero效果的全屏显示：通过 Hero 组件实现平滑过渡效果。
• 自定义背景颜色：可以通过 backgroundColor 属性设置背景颜色。
• 非透明背景：通过设置 backgroundIsTransparent 为 false 实现非透明背景。
• 自定义Widget：可以在 FullScreenWidget 中嵌入更复杂的布局。

确保你已经准备好相应的图片资源（如 image1.jpg, image2.jpg, image3.jpg），并将其放置在 assets 目录下，并在 pubspec.yaml 中正确配置。

许可证

该插件使用Apache许可证，详情请参见 LICENSE。