Flutter自定义UI组件插件fancy_element的使用

通过使用 fancy_element 插件，您可以为您的 Flutter 应用程序实现各种炫酷的元素。当前支持的组件包括：

• 容器
  • 卡片容器
  • 渐变容器
  • 按钮容器（Neumorphism）

更多炫酷的组件将会陆续添加。

Fancy Card

FancyCard 可以用来创建一个炫酷的卡片。

FancyCard(
  width: Fancy.width(context), // 获取屏幕宽度
  height: Fancy.height(context) * 0.40, // 设置卡片高度为屏幕高度的40%
  redius: 10, // 设置圆角半径
  child: Center(
    child: Container(
      child: const Text(
        "This Is Fancy Card", // 显示在卡片上的文本
        style: TextStyle(fontSize: 20),
      ),
    ),
  ),
),

Fancy Container

FancyContainer 可以用来创建一个具有渐变效果的容器，并且可以设置标题和副标题。

FancyContainer(
  color1: const Color(0xff0061ff), // 设置渐变颜色1
  color2: const Color(0xff60efff), // 设置渐变颜色2
  onTap: () {}, // 点击事件
),

Neumorphism Container

NeumorphismContainer 用于创建具有 Neumorphism 效果的容器。

const NeumorphismContainer(),

导航到新页面

如果需要导航到新的页面，可以使用以下代码片段：

Go.to(context, const NewPage()); // 导航到新页面
Go.toNamed(context, "/page", argument: {"name": id}); // 使用命名路由导航到新页面
Go.off(context, const NewPage()); // 关闭当前页面并导航到新页面
Go.offAll(context, const NewPage()); // 关闭所有页面并导航到新页面
Go.back(context); // 返回上一个页面

完整示例代码

以下是一个完整的示例代码，展示了如何使用 fancy_element 插件来创建一个包含上述组件的页面。

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

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fancy Element Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用FancyCard组件
            FancyCard(
              width: Fancy.width(context),
              height: Fancy.height(context) * 0.40,
              redius: 10,
              child: Center(
                child: Container(
                  child: const Text(
                    "This Is Fancy Card",
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20), // 添加间距
            // 使用FancyContainer组件
            FancyContainer(
              color1: const Color(0xff0061ff),
              color2: const Color(0xff60efff),
              onTap: () {},
            ),
            SizedBox(height: 20), // 添加间距
            // 使用NeumorphismContainer组件
            NeumorphismContainer(),
          ],
        ),
      ),
    );
  }
}