Flutter UI组件插件auraa_ui的使用

Flutter UI组件插件auraa_ui的使用

通过我们的模块化UI设计组件小部件，您可以轻松创建动态、包容性和惊艳的Flutter界面。这些组件灵感来自于material-tailwind和shadcn/ui、NextUI、Chakra UI。

如何使用

安装

在终端中运行以下命令：

flutter pub add auraa_ui

导入

在您的Dart文件中添加以下导入语句：

import 'package:auraa_ui/aura_ui.dart';

我们的Widget目录

轮播图 (Carousels)

按钮 (Simple, Loading, WithIcon)

轮播图 (Carousels)

更多功能正在开发中 (More are still Coming WIP)

特性

  • 全面的模块化UI设计组件：使用广泛的各种按钮、卡片、表单、导航元素等构建现代且功能丰富的界面。
  • 高度可定制：使用广泛的样式选项来调整组件以满足您的确切需求。
  • 响应式设计：确保不同屏幕尺寸下的最佳用户体验。
  • 注重无障碍性：遵循最佳实践，专为无障碍而设计。
  • 轻量级且性能良好：高效构建，确保流畅的用户交互体验。

额外功能

  • 自定义主题和配色方案：定义自己的视觉风格以实现统一的外观。
  • 暗模式支持：无缝适应用户的偏好设置。

示例代码

下面是一个简单的示例，展示了如何使用auraa_ui插件创建一个带有加载状态的按钮。

import 'package:flutter/material.dart';
import 'package:auraa_ui/aura_ui.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Auraa UI Button Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 创建一个简单的按钮
              AuraButton(
                text: "点击我",
                onPressed: () {
                  print("按钮被点击了！");
                },
              ),
              SizedBox(height: 20),
              // 创建一个带加载状态的按钮
              AuraButton(
                text: "加载中",
                isLoading: true,
                onPressed: null,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter UI组件插件auraa_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件插件auraa_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用Flutter UI组件插件auraa_ui的代码示例。这个示例将展示如何集成并使用auraa_ui中的一些基础组件。

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

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

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

接下来是一个简单的Flutter应用示例，展示了如何使用auraa_ui中的一些组件：

import 'package:flutter/material.dart';
import 'package:auraa_ui/auraa_ui.dart';  // 导入auraa_ui包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auraa UI Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auraa UI Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用AuraaButton
            AuraaButton(
              label: 'Click Me',
              onPressed: () {
                // 按钮点击事件
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button Clicked!')),
                );
              },
              color: Colors.blue,
              textColor: Colors.white,
            ),

            SizedBox(height: 20),

            // 使用AuraaTextField
            AuraaTextField(
              label: 'Enter Text',
              controller: TextEditingController(),
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
            ),

            SizedBox(height: 20),

            // 使用AuraaCard
            AuraaCard(
              elevation: 8,
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'Auraa Card Content',
                      style: TextStyle(fontSize: 20),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了如何使用AuraaButton、AuraaTextField和AuraaCard组件。你可以根据auraa_ui的文档进一步探索更多组件和自定义选项。

  • AuraaButton：一个自定义按钮组件，可以设置标签、点击事件、颜色等属性。
  • AuraaTextField：一个自定义文本输入框组件，可以设置标签、控制器、装饰等属性。
  • AuraaCard：一个自定义卡片组件，可以设置阴影、子组件等属性。

请确保查阅auraa_ui的官方文档，以获取最新的组件列表和详细的使用说明。

回到顶部