Flutter独特功能插件uniquepackage的使用

开始使用

一个设计用于展示404错误页面的Flutter插件，提供了可定制的组件，集成了图片和Lottie动画。它允许开发者为网页和移动应用创建视觉上吸引人的错误页面，从而提升用户体验。

特性通常包括：

• 图片支持：10种不同的404错误页面图片
• Lottie动画：10种不同的Lottie动画

安装

要使用uniquepackage包，请在你的pubspec.yaml文件的dependencies部分添加以下行：

dependencies:
  uniquepackage: ^<最新版本>

404 Lottie 动画

Animation 1	Animation 2	Animation 3	Animation 4	Animation 5

Animation 1	Animation 2	Animation 3	Animation 4	Animation 5

使用uniquepackage进行动画

你可以通过自定义GIF尺寸来显示带有动画效果的错误页面。以下是一个示例：

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

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 主页面类
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 未来构建器用于加载动画
  FutureBuilder<Widget> getAnimatedErrorPage() {
    return FutureBuilder<Widget>(
      future: PageNotFound.animatedError10(
        context: context,
        gifHeight: 200.0, // 自定义GIF高度
        gifWidth: 200.0,  // 自定义GIF宽度
      ),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          return snapshot.data!;
        } else {
          return const Center(child: Text('Something went wrong.'));
        }
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: getAnimatedErrorPage(),
      ),
    );
  }
}

404 错误图片

Image 1	Image 2	Image 3	Image 4	Image 5

Image 1	Image 2	Image 3	Image 4	Image 5

使用uniquepackage显示错误图片

你可以使用uniquepackage来显示错误图片。以下是一个示例：

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

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// 主页面类
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 未来构建器用于加载错误图片
  FutureBuilder<Widget> getErrorPage() {
    return FutureBuilder<Widget>(
      future: PageNotFound.errorTemplate1(
        context: context,
      ),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Error: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          return snapshot.data!;
        } else {
          return const Center(child: Text('Something went wrong.'));
        }
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: getErrorPage(),
      ),
    );
  }
}