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

发布于 1周前 作者 h691938207 来自 Flutter

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

在本教程中，我们将介绍如何使用shine_flutter插件来增强Flutter应用中的视觉效果。通过使用该插件，你可以自定义卡片（Card）以达到你想要的效果。

示例代码

首先，确保你在项目的pubspec.yaml文件中添加了shine_flutter依赖项：

dependencies:
  shine_flutter: ^版本号

然后运行flutter pub get来获取依赖项。

接下来，让我们看看如何使用shine_flutter插件来创建一个带有不同视觉效果的卡片。

示例代码

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

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

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 100,
              width: 100,
              child: CardWidget(
                backgroundColor: Colors.white,
                shape: BoxShape.circle,
                gradient: RadialGradient(colors: [
                  Colors.pink[700]!,
                  Colors.pink[600]!,
                  Colors.pink[500]!,
                  Colors.pink[400]!,
                ]),
                children: const [],
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            const SizedBox(
              height: 100,
              width: 100,
              child: CardWidget(
                backgroundColor: Colors.white,
                children: [],
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            SizedBox(
              height: 100,
              width: 100,
              child: CardWidget(
                backgroundColor: Colors.blueAccent,
                border: Border.all(color: Colors.blue[900]!),
                boxShadow: [
                  BoxShadow(
                    color: Theme.of(context).cardTheme.shadowColor ??
                        Theme.of(context).shadowColor,
                    offset: const Offset(1.0, 3.1),
                    blurRadius: 5,
                    blurStyle: BlurStyle.normal,
                  ),
                  BoxShadow(
                    color: Theme.of(context).cardTheme.shadowColor ??
                        Theme.of(context).shadowColor,
                    offset: const Offset(1.0, -3.1),
                    blurRadius: 5,
                    blurStyle: BlurStyle.normal,
                  ),
                ],
                children: const [],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

详细说明

  1. 导入必要的库：

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

  2. 定义状态类：

    class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 示例代码
          ],
        ),
      ),
    );
  }
}

  3. 创建具有不同视觉效果的卡片：

    SizedBox(
  height: 100,
  width: 100,
  child: CardWidget(
    backgroundColor: Colors.white,
    shape: BoxShape.circle,
    gradient: RadialGradient(colors: [
      Colors.pink[700]!,
      Colors.pink[600]!,
      Colors.pink[500]!,
      Colors.pink[400]!,
    ]),
    children: const [],
  ),
),

    这里我们创建了一个圆形背景颜色为白色，并带有径向渐变的卡片。

  4. 其他卡片示例：

    const SizedBox(
  height: 100,
  width: 100,
  child: CardWidget(
    backgroundColor: Colors.white,
    children: [],
  ),
),

    创建一个简单的白色背景卡片。

  5. 带边框和阴影的卡片：

    SizedBox(
  height: 100,
  width: 100,
  child: CardWidget(
    backgroundColor: Colors.blueAccent,
    border: Border.all(color: Colors.blue[900]!),
    boxShadow: [
      BoxShadow(
        color: Theme.of(context).cardTheme.shadowColor ??
            Theme.of(context).shadowColor,
        offset: const Offset(1.0, 3.1),
        blurRadius: 5,
        blurStyle: BlurStyle.normal,
      ),
      BoxShadow(
        color: Theme.of(context).cardTheme.shadowColor ??
            Theme.of(context).shadowColor,
        offset: const Offset(1.0, -3.1),
        blurRadius: 5,
        blurStyle: BlurStyle.normal,
      ),
    ],
    children: const [],
  ),
),

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

1 回复

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


当然，以下是如何在Flutter项目中使用shine_flutter插件来增强视觉效果的代码案例。shine_flutter插件通常用于创建闪耀或光晕效果，使UI更具吸引力和动感。

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

dependencies:
  flutter:
    sdk: flutter
  shine_flutter: ^最新版本号  # 请替换为最新的版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用ShineWidget来创建闪耀效果。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shine Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShineDemoPage(),
    );
  }
}

class ShineDemoPage extends StatefulWidget {
  @override
  _ShineDemoPageState createState() => _ShineDemoPageState();
}

class _ShineDemoPageState extends State<ShineDemoPage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shine Flutter Demo'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Image.network(
              'https://via.placeholder.com/300', // 替换为你的图片URL
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            ShineWidget(
              animationController: _controller,
              color: Colors.white.withOpacity(0.6),
              size: 100,
              count: 5,
              duration: const Duration(seconds: 2),
              blurRadius: 20,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. ShineWidget被添加到一个包含图片的Stack中。
  2. AnimationController用于控制闪耀效果的动画，repeat(reverse: true)方法使动画来回循环。
  3. ShineWidget的参数配置如下：
    • animationController：控制闪耀动画的控制器。
    • color：闪耀效果的颜色。
    • size：每个闪耀光点的大小。
    • count：闪耀光点的数量。
    • duration：动画的持续时间。
    • blurRadius：光点的模糊半径。

你可以根据需要调整这些参数以达到最佳视觉效果。希望这个示例能够帮助你更好地理解如何在Flutter项目中使用shine_flutter插件。

回到顶部