Flutter高级工具集插件flutter_advance_util的使用

Flutter高级工具集插件flutter_advance_util的使用

本包包含的所有动画均来自由 Tomiwa Idowu 开发的 Flutter advance 项目。该包的主要目的是简化在几乎每一个 Flutter 应用中实现已构建动画的过程。

特性

🔐 Flutter Advance

欢迎您点赞、fork 和贡献代码。

Petal Menu Animation

Petal Menu Animation

Rainbow Sticks Animation

Rainbow Sticks Animation

Telegram Theme Switcher

Telegram Theme Switcher

Animated Lock

Animated Lock

Animated Progress Bar

Animated Progress Bar

Animated Card

Animated Card

Phone Pattern

Phone Pattern

Water Wave Animation

Water Wave Animation

开发者

Tomiwa Idowu

Twitter LinkedIn

待实现的功能

  • Telegram Theme Switcher
  • Phone Pattern

Beta 实现

  • Water Wave Animation

使用方法

要使用此包，只需导入即可：

import 'package:flutter_advance_util/flutter_advance_util.dart';

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用这些动画。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Advance',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: const App(),
    );
  }
}

class App extends StatefulWidget {
  const App({super.key});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> with TickerProviderStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Advance Animations"),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        children: [
          SolidButton(
            text: "Petal Menu Animation",
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (_) => PetalMenu(
                      initialIndex: 1,
                      petals: [
                        Petal(Colors.blue, child: const CircularProgressIndicator()),
                        Petal(Colors.amber, child: const Placeholder()),
                        Petal(Colors.purple, child: Container(color: Colors.grey, child: const Placeholder())),
                        Petal(Colors.red, child: const Placeholder()),
                        Petal(Colors.yellow, child: const CircularProgressIndicator.adaptive(backgroundColor: Colors.red)),
                        Petal(Colors.indigo, child: const Placeholder())
                      ],
                    ))),
          ),
          const SizedBox(height: 20),
          SolidButton(
            text: "Rainbow Stick Animation",
            onPressed: () => Navigator.of(context).push(
              MaterialPageRoute(
                  builder: (_) => Scaffold(
                        body: RainbowSticksPage(
                            animationController: AnimationController(
                                vsync: this,
                                upperBound: 0.6,
                                duration: const Duration(seconds: 2)),
                            size: MediaQuery.of(context).size),
                      )),
            ),
          ),
          const SizedBox(height: 20),
          SolidButton(
              text: "Animated Lock",
              onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => Scaffold(
                          backgroundColor: Colors.black26,
                          body: AnimatedLock(
                            size: MediaQuery.sizeOf(context),
                            controller: AnimationController(
                              vsync: this,
                              upperBound: 0.6,
                              duration: const Duration(milliseconds: 500),
                            ),
                            lockedColor: Colors.blueGrey,
                            unlockedColor: Colors.green,
                            overlayColor: Colors.black,
                            showSwitch: true,
                          )),
                    ),
                  )),
          const SizedBox(height: 20),
          SolidButton(
            text: "Animated Progress Bar",
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => Scaffold(
                body: AnimatedProgressBar(
                    size: MediaQuery.sizeOf(context),
                    colors: const [Colors.blue, Colors.red]),
              ),
            )),
          ),
          const SizedBox(height: 20),
          SolidButton(
            text: "Animated Card",
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (_) => Scaffold(
                  body: AnimatedCard(
                      actionText: 'Learn more',
                      activeColor: Colors.red,
                      detail: 'A simple animated card.',
                      icon: const Icon(Icons.abc),
                      height: MediaQuery.of(context).size.height * 0.5,
                      width: MediaQuery.of(context).size.width * 0.9)),
            )),
          ),
          const SizedBox(height: 20),
          SolidButton(
            text: "Onboarding Animation",
            onPressed: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (_) => OnboardingAnimationPage(pages: [
                Onboarding(
                    title: "Let's Get Started!",
                    content: "Buckle up, we're about to embark on a thrilling digital journey with App. Swipe, tap, and let's dive into the awesomeness!",
                    imagePath: 'assets/images/feature1.png',
                    backgroundColor: const Color(0xFFFFFFFF),
                    color: const Color(0xFF6BF6FF)),
                Onboarding(
                    title: 'Stay in the Loop, Have a Scoop',
                    content: 'No more FOMO! Get real-time updates and stay in the loop, all while sipping your morning coffee.',
                    imagePath: 'assets/images/feature2.png',
                    backgroundColor: const Color(0xFF6BF6FF),
                    color: const Color(0xFFFFD952)),
                Onboarding(
                    title: 'Discover the Magic',
                    content: "It's like opening a treasure chest of features! Customize your experience, discover hidden gems, and get ready to be amazed.",
                    imagePath: 'assets/images/feature3.png',
                    backgroundColor: const Color(0xFFFFD952),
                    color: const Color(0xffffffff))
              ]),
            )),
          ),
          const SizedBox(height: 20),
          SolidButton(
              text: "Water Wave Animation",
              onPressed: () => Navigator.of(context).push(WaterWaveAnimationPage.route())),
        ],
      ),
    );
  }
}

class SolidButton extends StatelessWidget {
  const SolidButton({
    super.key,
    required this.text,
    required this.onPressed,
  });

  final String text;
  final VoidCallback? onPressed;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
          fixedSize: Size(MediaQuery.sizeOf(context).width, 60)),
      child: Text(text),
    );
  }
}

更多关于Flutter高级工具集插件flutter_advance_util的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter高级工具集插件flutter_advance_util的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_advance_util 是一个为 Flutter 开发者提供的高级工具集插件，旨在简化开发流程并提供一些常见但复杂的功能的实现。这个插件可能包括网络请求、本地存储、设备信息、权限管理、UI 工具等功能的封装。由于 flutter_advance_util 并非 Flutter 官方插件，其具体功能和用法可能会根据不同的版本和开发者而有所不同。

以下是一些常见的使用场景和示例代码，假设 flutter_advance_util 提供了这些功能：

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_advance_util: ^1.0.0  # 请根据实际版本号填写

然后运行 flutter pub get 来安装插件。

2. 网络请求

假设 flutter_advance_util 提供了网络请求的封装：

import 'package:flutter_advance_util/flutter_advance_util.dart';

void fetchData() async {
  var response = await AdvanceUtil().get('https://jsonplaceholder.typicode.com/posts');
  print(response);
}

3. 本地存储

假设插件提供了本地存储的功能：

import 'package:flutter_advance_util/flutter_advance_util.dart';

void saveData() async {
  await AdvanceUtil().saveString('key', 'value');
  var value = await AdvanceUtil().getString('key');
  print(value);
}

4. 设备信息

假设插件提供了获取设备信息的功能：

import 'package:flutter_advance_util/flutter_advance_util.dart';

void getDeviceInfo() async {
  var deviceInfo = await AdvanceUtil().getDeviceInfo();
  print(deviceInfo);
}

5. 权限管理

假设插件提供了权限管理的功能：

import 'package:flutter_advance_util/flutter_advance_util.dart';

void requestPermission() async {
  bool hasPermission = await AdvanceUtil().requestPermission(Permission.camera);
  if (hasPermission) {
    print('Camera permission granted');
  } else {
    print('Camera permission denied');
  }
}

6. UI 工具

假设插件提供了 UI 相关的工具：

import 'package:flutter_advance_util/flutter_advance_util.dart';

void showToast() {
  AdvanceUtil().showToast('Hello, Flutter!');
}
回到顶部