Flutter全屏图片展示插件custom_full_image_screen的使用

Flutter全屏图片展示插件custom_full_image_screen的使用

full_screen_image 包是一个新的 Flutter 包，用于实现全屏图片功能。

开始使用

你是否尝试过将图片设置为全屏？别担心，我们在这里帮助你。我们带来了一个新的库，简单易用，可扩展性强且易于集成。

预览

开发者

开发者联系信息：

• omar.alshyokh@gmail.com
• nabil.alhfz98@gmail.com

完整示例代码

以下是使用 custom_full_image_screen 插件的完整示例代码：

import 'dart:io';

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

// 自定义 HTTP 覆盖类，处理 HTTPS 证书问题
class MyHttpOverrides extends HttpOverrides {
  [@override](/user/override)
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

void main() {
  HttpOverrides.global = new MyHttpOverrides();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: '全屏图片示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Text(
                  '图片资源弹出框',
                  style: TextStyle(color: Colors.blue, fontSize: 18),
                ),
                // 使用 ImageAssetsFullscreen 显示本地图片
                ImageAssetsFullscreen(
                  imagePath: 'assets/default_image.png',
                  imageBorderRadius: 200,
                  imageWidth: 200,
                  imageHeight: 200,
                  iconBackButtonColor: Colors.red,
                  imageDetailsHeight: 500,
                  imageDetailsWidth: 200,
                  hideBackButtonDetails: true,
                  appBarBackgroundColorDetails: Colors.red,
                  backgroundColorDetails: Colors.green,
                  imageDetailsFit: BoxFit.cover,
                  hideAppBarDetails: true,
                  imageFit: BoxFit.fill,
                  withHeroAnimation: true,
                ),
                Divider(
                  height: 25,
                ),
                Text(
                  '网络图片弹出框',
                  style: TextStyle(color: Colors.blue, fontSize: 18),
                ),
                // 使用 ImageNetworkFullscreen 显示网络图片
                ImageNetworkFullscreen(
                  imageUrl: 'https://picsum.photos/id/1/200/300',
                  imageBorderRadius: 20,
                  imageWidth: 200,
                  imageHeight: 200,
                ),
                Divider(
                  height: 25,
                ),
                Text(
                  '缓存图片弹出框',
                  style: TextStyle(color: Colors.blue, fontSize: 18),
                ),
                // 使用 ImageCachedFullscreen 显示缓存图片
                ImageCachedFullscreen(
                  imageUrl: 'https://picsum.photos/200/300',
                  imageBorderRadius: 20,
                  imageWidth: 200,
                  imageHeight: 200,
                  withHeroAnimation: true,
                  placeholder: Container(
                    child: Icon(Icons.check),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error),
                  ),
                  placeholderDetails: Container(),
                ),
                Divider(
                  height: 25,
                ),
                Text(
                  '带有自定义选项的缓存图片弹出框',
                  style: TextStyle(color: Colors.blue, fontSize: 18),
                ),
                // 使用 ImageCachedFullscreen 显示带有自定义选项的缓存图片
                ImageCachedFullscreen(
                  imageUrl: 'https://picsum.photos/id/15/400/600',
                  imageBorderRadius: 20,
                  imageWidth: 200,
                  imageHeight: 200,
                  placeholder: Container(
                    child: Icon(Icons.check),
                  ),
                  errorWidget: Container(
                    child: Icon(
                      Icons.error,
                      size: 68,
                      color: Colors.red,
                    ),
                  ),
                  iconBackButtonColor: Colors.red,
                  imageDetailsHeight: 500,
                  imageDetailsWidth: 200,
                  hideBackButtonDetails: true,
                  appBarBackgroundColorDetails: Colors.red,
                  backgroundColorDetails: Colors.cyan,
                  imageDetailsFit: BoxFit.cover,
                  hideAppBarDetails: true,
                  imageFit: BoxFit.fill,
                  withHeroAnimation: true,
                  placeholderDetails: Center(child: CircularProgressIndicator()),
                ),
                SizedBox(
                  height: 20,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}