lucid_ui 是一个 Flutter UI 组件库，提供了丰富的预构建组件，帮助开发者快速构建美观且功能强大的用户界面。它包含了许多常见的 UI 元素，如按钮、表单、卡片、对话框等，并且这些组件通常具有较高的可定制性。

安装 lucid_ui

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

dependencies:
  flutter:
    sdk: flutter
  lucid_ui: ^1.0.0  # 请确保使用最新版本

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

使用 lucid_ui 组件

以下是一些常见组件的使用示例。

1. 按钮 (LucidButton)

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lucid UI Example')),
        body: Center(
          child: LucidButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

2. 表单输入 (LucidTextField)

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lucid UI Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: LucidTextField(
            labelText: 'Enter your name',
            onChanged: (value) {
              print('Name: $value');
            },
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

3. 卡片 (LucidCard)

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lucid UI Example')),
        body: Center(
          child: LucidCard(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('This is a Lucid Card'),
            ),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

4. 对话框 (LucidDialog)

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lucid UI Example')),
        body: Center(
          child: LucidButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) => LucidDialog(
                  title: Text('Alert'),
                  content: Text('This is a Lucid Dialog.'),
                  actions: [
                    LucidButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Close'),
                    ),
                  ],
                ),
              );
            },
            child: Text('Show Dialog'),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

自定义主题

lucid_ui 也支持主题定制。你可以通过 LucidTheme 来定义应用的整体样式。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: LucidTheme.light(),
      darkTheme: LucidTheme.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('Lucid UI Example')),
        body: Center(
          child: LucidButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());