Carbon 是一个基于 Flutter 的 UI 组件库，旨在提供一套美观、易用且高度可定制的 UI 组件，帮助开发者快速构建现代化的应用程序。Carbon 的设计灵感来自于 IBM 的 Carbon Design System，因此它遵循了类似的视觉和交互设计原则。

安装 Carbon

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

dependencies:
  flutter:
    sdk: flutter
  carbon: ^0.0.1  # 请使用最新版本

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

使用 Carbon 组件

Carbon 提供了多种 UI 组件，包括按钮、卡片、输入框、对话框等。以下是一些常用组件的使用示例。

1. 按钮 (Button)

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

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

2. 卡片 (Card)

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

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

3. 输入框 (TextField)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carbon TextField Example'),
      ),
      body: Center(
        child: CarbonTextField(
          decoration: InputDecoration(
            labelText: 'Enter your name',
          ),
        ),
      ),
    );
  }
}

4. 对话框 (Dialog)

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carbon Dialog Example'),
      ),
      body: Center(
        child: CarbonButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return CarbonDialog(
                  title: Text('Dialog Title'),
                  content: Text('This is a Carbon Dialog.'),
                  actions: [
                    CarbonButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Close'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Open Dialog'),
        ),
      ),
    );
  }
}

自定义主题

Carbon 允许你自定义主题以适应你的应用程序设计。你可以通过 CarbonTheme 来设置全局主题。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CarbonTheme(
      data: CarbonThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.green,
      ),
      child: MaterialApp(
        title: 'Carbon Example',
        home: MyHomePage(),
      ),
    );
  }
}