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

full_screen_image_null_safe 是一个用于在Flutter中实现全屏图片查看功能的插件。它支持与Hero widget结合使用，并且可以在垂直滚动时关闭全屏模式。

安装

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

dependencies:
  full_screen_image_null_safe: any

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

使用示例

下面是一个完整的示例demo，展示了如何使用 full_screen_image_null_safe 插件来显示全屏图片。

示例代码

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

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

class MyApp extends StatelessWidget {
  String lorem = "Lorem ipsum dolor sit amet..."; // 省略了部分文本

  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>[
                  Column(children: [
                    Padding(padding: const EdgeInsets.all(8.0), child: fullScreenImage()),
                    ListTile(title: Text('Full screen image', textAlign: TextAlign.center)),
                  ]),
                  Column(children: [
                    Padding(padding: const EdgeInsets.all(8.0), child: fullScreenHeroWidget()),
                    ListTile(title: Text('Full screen image with hero', textAlign: TextAlign.center)),
                  ]),
                  Column(children: [
                    Padding(padding: const EdgeInsets.all(8.0), child: smallImage()),
                    ListTile(title: Text('Small image with hero', textAlign: TextAlign.center)),
                  ]),
                  Column(children: [
                    Padding(padding: const EdgeInsets.all(8.0), child: customBackgroundColor()),
                    ListTile(title: Text('Custom background', textAlign: TextAlign.center)),
                  ]),
                  Column(children: [
                    Padding(padding: const EdgeInsets.all(8.0), child: nonTransparentWidget()),
                    ListTile(title: Text('None transparent', textAlign: TextAlign.center)),
                  ]),
                ],
              ),
              Column(children: [
                Padding(padding: const EdgeInsets.all(8.0), child: customWidget()),
                ListTile(title: Text('Custom Widget', textAlign: TextAlign.center)),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

主要功能说明

全屏图片显示：通过 FullScreenWidget 包裹图片组件即可实现点击放大查看全屏图片的功能。

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

配合Hero动画使用：可以将 Hero 组件嵌套到 FullScreenWidget 中，以实现平滑过渡效果。

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

自定义背景颜色：可以通过设置 backgroundColor 属性来自定义全屏模式下的背景颜色。

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),
      ),
    ),
  ),
)

非透明背景：如果希望背景不是透明的，可以设置 backgroundIsTransparent 为 false。

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),
      ),
    ),
  ),
)

更多关于Flutter全屏图片显示插件full_screen_image_null_safe的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼

更多关于Flutter全屏图片显示插件full_screen_image_null_safe的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用full_screen_image_null_safe插件来显示全屏图片的示例代码。这个插件可以帮助你轻松地在Flutter应用中实现全屏图片显示功能。

首先，确保你已经在pubspec.yaml文件中添加了full_screen_image_null_safe依赖：

dependencies:
  flutter:
    sdk: flutter
  full_screen_image_null_safe: ^x.y.z  # 请使用最新版本号

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

接下来，你可以在你的Flutter项目中使用这个插件。以下是一个完整的示例代码，展示了如何使用full_screen_image_null_safe插件来显示全屏图片：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FullScreen Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FullScreen Image Example'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                FullScreenImagePage.createFullScreenImagePage(
                  imageUrls[index],
                ),
              );
            },
            child: Image.network(
              imageUrls[index],
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}

在这个示例中，我们有一个简单的GridView，其中显示了几个网络图片。当用户点击某张图片时，FullScreenImagePage会被推送到导航堆栈中，并显示该图片的全屏视图。

注意，FullScreenImagePage.createFullScreenImagePage方法用于创建全屏图片页面。这个方法是由full_screen_image_null_safe插件提供的。

确保你的图片URL是有效的，否则你可能需要处理图片加载失败的情况。此外，如果你希望从本地资源加载图片，你可以使用Image.asset而不是Image.network。

这个示例代码展示了如何使用full_screen_image_null_safe插件的基本功能。你可以根据需要进一步自定义和扩展这个示例。