Flutter UI设计插件clean_android_design的使用

clean_android_design 是一个用于 Flutter 的 UI 设计插件，旨在帮助开发者快速构建符合 Android 设计规范的界面。该插件提供了丰富的组件和样式，使开发者能够轻松创建具有 Android 原生外观和感觉的应用程序。

安装 clean_android_design

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

dependencies:
  flutter:
    sdk: flutter
  clean_android_design: ^1.0.0  # 请使用最新版本

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

使用 clean_android_design

clean_android_design 提供了多种组件和工具，以下是一些常见的用法示例：

1. 使用 Material Design 按钮

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clean Android Design Example'),
      ),
      body: Center(
        child: CADPrimaryButton(
          onPressed: () {
            // 按钮点击事件
          },
          text: 'Click Me',
        ),
      ),
    );
  }
}

2. 使用 Material Design 文本输入框

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clean Android Design Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CADTextField(
          labelText: 'Enter your name',
          onChanged: (value) {
            // 文本变化事件
          },
        ),
      ),
    );
  }
}

3. 使用 Material Design 卡片

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clean Android Design Example'),
      ),
      body: Center(
        child: CADCard(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('This is a Material Design card.'),
          ),
        ),
      ),
    );
  }
}

4. 使用 Material Design 对话框

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clean Android Design Example'),
      ),
      body: Center(
        child: CADPrimaryButton(
          onPressed: () {
            showCADDialog(
              context: context,
              title: 'Alert',
              content: 'This is a Material Design dialog.',
              actions: [
                CADDialogAction(
                  text: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ],
            );
          },
          text: 'Show Dialog',
        ),
      ),
    );
  }
}

自定义主题

clean_android_design 还允许你自定义主题，以更好地适应你的应用程序风格。你可以在 MaterialApp 中设置主题：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Clean Android Design Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}