air_design 是一个基于 Flutter 的 UI 设计系统插件，旨在帮助开发者快速构建符合设计规范的应用程序界面。它提供了一系列预定义的组件、样式和布局，使得开发者能够更高效地实现设计稿中的 UI 元素。

安装 air_design

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

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

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

使用 air_design

air_design 提供了多种组件和样式，以下是一些常见的使用示例：

1. 使用 AirButton

AirButton 是一个预定义的按钮组件，支持多种样式和状态。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Air Design Example'),
      ),
      body: Center(
        child: AirButton(
          text: 'Click Me',
          onPressed: () {
            print('Button Pressed');
          },
        ),
      ),
    );
  }
}

2. 使用 AirText

AirText 是一个预定义的文本组件，支持多种文本样式。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Air Design Example'),
      ),
      body: Center(
        child: AirText(
          'Hello, Air Design!',
          style: AirTextStyle.headline1,
        ),
      ),
    );
  }
}

3. 使用 AirCard

AirCard 是一个预定义的卡片组件，支持多种布局和样式。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Air Design Example'),
      ),
      body: Center(
        child: AirCard(
          child: Column(
            children: [
              AirText('Card Title', style: AirTextStyle.headline2),
              AirText('This is a card content.', style: AirTextStyle.body1),
            ],
          ),
        ),
      ),
    );
  }
}

4. 使用 AirTheme

AirTheme 是一个主题管理类，可以帮助你快速应用和切换主题。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Air Design Example',
      theme: AirTheme.lightTheme(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Air Design Example'),
      ),
      body: Center(
        child: AirText(
          'Hello, Air Design!',
          style: AirTextStyle.headline1,
        ),
      ),
    );
  }
}

自定义主题

air_design 允许你自定义主题，以适应不同的设计需求。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Air Design Example',
      theme: AirTheme.customTheme(
        primaryColor: Colors.blue,
        accentColor: Colors.orange,
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 16, color: Colors.black87),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Air Design Example'),
      ),
      body: Center(
        child: AirText(
          'Hello, Air Design!',
          style: AirTextStyle.headline1,
        ),
      ),
    );
  }
}