Flutter UI组件库插件aura_ui的使用

Flutter UI组件库插件aura_ui的使用

安装

打开终端并运行以下命令：

$ flutter pub add aura_ui

使用

在你的应用中使用 AuraUI 组件库，首先需要包裹你的应用，并设置亮色和暗色主题。

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

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

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

  static final _lightTheme = ATheme(
    primary: Colors.blue,
    secondary: Colors.blueGrey[200],
    success: Colors.green,
    warning: Colors.yellow,
    error: Colors.red,
    info: Colors.blue,
    background: Colors.white,
    surface100: Colors.white,
    surface200: Colors.grey[100],
    textPrimary: Colors.black,
    textSecondary: Colors.grey,
    divider: Colors.grey[300],
    border: Colors.grey[300],
  );

  static final _darkTheme = ATheme(
    primary: Colors.blue,
    secondary: Colors.blueGrey[700],
    success: Colors.green,
    warning: Colors.yellow,
    error: Colors.red,
    info: Colors.blue,
    background: Colors.black,
    surface100: Colors.grey[900],
    surface200: Colors.grey[800],
    textPrimary: Colors.white,
    textSecondary: Colors.grey,
    divider: Colors.grey[700],
    border: Colors.grey[700],
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AuraUI(
      lightTheme: _lightTheme,
      darkTheme: _darkTheme,
      child: MaterialApp(
        title: 'Example',
        home: const Home(),
      ),
    );
  }
}

现在你可以使用 AuraUI 提供的排版和颜色样式，并轻松切换主题。

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AColor.background,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const ThemeSettings(),
          AText.displayXL("Display XL").styles(
            color: AColor.secondary,
            fontWeight: AFontWeight.bold,
          ),
          AText.displayXL("Display XL 2").styles(
            color: AColor.error,
            fontFamily: AFontFamily.inter,
          ),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        AText.displayXL("Theme Settings").styles(
          color: AColor.textPrimary,
        ),
        Row(
          children: [
            ElevatedButton(
              child: AText("Light Theme"),
              onPressed: () {
                AuraUI.setLightTheme();
              },
            ),
            ElevatedButton(
              child: AText("Dark Theme"),
              onPressed: () {
                AuraUI.setDarkTheme();
              },
            ),
          ],
        ),
      ],
    );
  }
}

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

1 回复

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


aura_ui 是一个 Flutter UI 组件库插件，提供了一系列预定义的 UI 组件，帮助开发者快速构建美观且一致的应用程序界面。以下是如何使用 aura_ui 插件的基本步骤：

1. 添加依赖

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

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

然后，在终端中运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 aura_ui 包：

import 'package:aura_ui/aura_ui.dart';

3. 使用组件

aura_ui 提供了多种 UI 组件，你可以在你的应用中使用这些组件。以下是一些常见组件的使用示例：

按钮组件

AuraButton(
  text: 'Click Me',
  onPressed: () {
    print('Button clicked!');
  },
);

文本输入框

AuraTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Text changed: $value');
  },
);

卡片组件

AuraCard(
  child: Text('This is a card'),
);

对话框

AuraDialog(
  title: 'Alert',
  content: Text('This is a dialog'),
  actions: [
    AuraButton(
      text: 'OK',
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ],
);

加载指示器

AuraLoadingIndicator();

4. 自定义主题

aura_ui 允许你自定义主题以适应你的应用风格。你可以在 MaterialApp 的 theme 属性中使用 AuraThemeData 来定义主题：

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    // 使用 AuraThemeData 自定义主题
    extensions: <ThemeExtension<dynamic>>[
      AuraThemeData(
        primaryColor: Colors.blue,
        secondaryColor: Colors.green,
        // 其他自定义属性
      ),
    ],
  ),
  home: MyHomePage(),
);
回到顶部