Flutter视觉效果增强插件glimmer的使用

Glimmer 是一个用于增强 Flutter 应用程序视觉效果的插件。通过使用 Glimmer，您可以为应用中的元素添加动态闪烁或光晕效果。本指南将展示如何在 Flutter 应用中使用 Glimmer 插件。

示例

效果演示

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Glimmer Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Glimmer'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Glimmer(
          isActive: true,
          radius: 24,
          stroke: 8,
          duration: const Duration(seconds: 20),
          stops: const [0.1, 0.3, 0.4],
          colors: const [Colors.red, Colors.yellow, Colors.white],
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              gradient: const LinearGradient(
                colors: [Color(0xFF05053E), Color(0xFF1A065E)],
              ),
              color: const Color(0xFF0D042A),
              borderRadius: BorderRadius.circular(24),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Glimmer(
                  isActive: true,
                  stroke: 2,
                  radius: 24,
                  child: MyElevatedButton(
                    onPressed: () {},
                    child: const Text(
                      "Generate",
                      style: TextStyle(color: Colors.white, fontSize: 18),
                    ),
                  ),
                ),
                const SizedBox(height: 56),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Glimmer(
                      isActive: true,
                      stroke: 2,
                      radius: 24,
                      clockwise: false,
                      colors: const [Colors.yellow, Colors.white, Colors.transparent],
                      child: IconButton(
                        color: Colors.yellow,
                        onPressed: () {},
                        icon: const Icon(Icons.abc),
                      ),
                    ),
                    Glimmer(
                      isActive: true,
                      stroke: 4,
                      clockwise: false,
                      radius: 0,
                      duration: const Duration(seconds: 10),
                      colors: const [Colors.red, Colors.green, Colors.yellow],
                      child: Container(
                        width: 48,
                        height: 48,
                        color: Colors.white,
                        child: const Center(child: Text("10s")),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyElevatedButton extends StatelessWidget {
  final BorderRadiusGeometry? borderRadius;
  final VoidCallback? onPressed;
  final Widget child;

  const MyElevatedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.borderRadius,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final borderRadius = this.borderRadius ?? BorderRadius.circular(24);
    return Container(
      width: 180,
      height: 49,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF05051E),
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(borderRadius: borderRadius),
        ),
        child: child,
      ),
    );
  }
}

更多关于Flutter视觉效果增强插件glimmer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼

更多关于Flutter视觉效果增强插件glimmer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用glimmer插件来增强视觉效果的代码示例。glimmer是一个用于创建闪光、闪烁等视觉效果的插件，能够为你的应用增添一些动态美感。

首先，确保你已经在你的Flutter项目中添加了glimmer依赖。打开你的pubspec.yaml文件，并添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  glimmer: ^x.y.z  # 替换为最新版本号

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

接下来，在你的Flutter应用中使用glimmer插件。以下是一个简单的示例，展示了如何在按钮上应用闪光效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Glimmer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Glimmer Example'),
        ),
        body: Center(
          child: GlimmerButtonExample(),
        ),
      ),
    );
  }
}

class GlimmerButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Glimmer(
      child: ElevatedButton(
        onPressed: () {
          // 按钮点击事件
          print('Button pressed!');
        },
        child: Text('Flashy Button'),
      ),
      duration: 2000, // 闪光持续时间（毫秒）
      color: Colors.white.withOpacity(0.8), // 闪光颜色
      intensity: 100, // 闪光强度
      blur: 10.0, // 模糊半径
      repeat: true, // 是否重复闪光
      repeatCount: -1, // 重复次数（-1表示无限次）
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个带有闪光效果的按钮。Glimmer小部件包裹在ElevatedButton外部，并配置了一些闪光效果的参数，如持续时间、颜色、强度、模糊半径以及是否重复闪光等。

参数解释

duration: 闪光效果的持续时间（以毫秒为单位）。
color: 闪光效果的颜色。
intensity: 闪光效果的强度。
blur: 闪光效果的模糊半径。
repeat: 是否重复闪光效果。
repeatCount: 重复次数，-1表示无限次。

通过这些参数，你可以微调闪光效果，以适应你的应用需求。

注意事项

确保glimmer插件的版本与你的Flutter SDK兼容。
根据需要调整闪光效果的参数，以达到最佳视觉效果。

这个示例展示了如何使用glimmer插件为Flutter应用中的按钮添加闪光效果。你可以根据需要将其应用于其他小部件，以创建更多样化的视觉效果。