Flutter UI组件插件caravaggio_ui的使用

Flutter UI组件插件CaravaggioUI的使用

CaravaggioUI 是一个全面的UI包，旨在简化您的Flutter应用开发过程。它以灵活性和可定制性为设计理念，提供了大量精美的UI组件，帮助您轻松创建出色的用户界面。

特性

风格 表单 组件
风格部分图像 表单部分图像 组件部分图像

开始使用

在您的 main.dart 文件中初始化 CaravaggioUI 以利用其功能。这一步骤对于无缝访问 CaravaggioUI 的丰富功能至关重要。

void main() {
  CaravaggioUI.initialize(
    primaryColor: const Color(0xFF662D8C),
    secondaryColor: const Color(0xFFED1E79),
  );
  runApp(const MainApp());
}

初始化之后，确保将 MaterialApp 的主题参数设置为 CaravaggioUI 提供的主题数据。这一步保证了整个应用的一致视觉风格。

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Caravaggio UI',
      theme: CaravaggioUI.instance.themeData,
      home: const HomeScreen(),
    );
  }
}

使用

初始化后，通过简单地调用

CaravaggioUI.instance

您可以解锁应用程序的核心主题数据和默认颜色调色板，包括 primaryLight、primaryDark、secondaryLight 和 secondaryDark。这些预定义的颜色提供了一种快速且直观的方式来在整个应用中保持视觉一致性，满足各种设计需求。

ThemeData themeData => CaravaggioUI.instance.themeData;

MaterialColor primary = CarvaggioUI.instance.primary;
MaterialColor secondary = CarvaggioUI.instance.secondary;

Color primaryColor = CarvaggioUI.instance.primaryColor;
Color primaryColorLight = CarvaggioUI.instance.primaryColorLight;
Color primaryColorDark = CarvaggioUI.instance.;

Color secondaryColor = CarvaggioUI.instance.secondaryColor;
Color secondaryColorLight = CarvaggioUI.instance.secondaryColorLight;
Color secondaryColorDark = CarvaggioUI.instance.secondaryColorDark;

泛型

为了实现图形统一，Caravaggio UI 引入了 CText 和 CGradient。这两个类旨在提供简单、直观且易于记忆的方法，以便在应用开发的任何阶段都能轻松使用。

CText

CText 是 TextStyle 的扩展，添加了一系列获取方法，包括尺寸、颜色和样式。调用 CText.style 获取器会创建一个新的 TextStyle，可以应用尺寸：

名称 尺寸
显示大 57
显示中 52
显示小 44
标题大 40
标题中 36
标题小 32
标题大 28
标题中 24
标题小 20
正文大 24
正文中 20
正文小 16
标签大 14
标签中 12
标签小 11

颜色

CText.style.primary
CText.style.primaryLight
CText.style.primaryDark
CText.style.secondary
CText.style.secondaryLight
CText.style.secondaryDark

样式

CText.style.italic
CText.style.bold

因此，您可以选择结合所有这些获取器来形成您喜欢的样式。例如：

CText 样式示例

CGradient

CGradientColorType 是一个枚举，包含 Caravaggio 主题中的所有颜色对。组合是单向的，因为提供了 reverse 方法来反转颜色方向。

CGradientColorType 说明图

CGradientDirection 是一个枚举，暴露了所有可能的渐变方向。同样，默认考虑从左到右，因为 reverse 方法可用。

CGradientDirection 说明图

CGradient 是 LinearGradient 的扩展，它提供了几个获取器，以便以简单、快速和直观的方式提供最常见的线性渐变。默认方向是 CGradientDirection.topLeftToBottomRight，获取器如下：

/// 返回一个主色调浅色渐变。
static LinearGradient get primaryLight => _generate(CGradientColorType.primaryLightToPrimary, CGradientDirection.topLeftToBottomRight);

/// 返回一个主色调深色渐变。
static LinearGradient get primaryDark => _generate(CGradientColorType.primaryToPrimaryDark, CGradientDirection.topLeftToBottomRight);

/// 返回一个高对比度主色调渐变。
static LinearGradient get primaryHighContrast => _generate(CGradientColorType.primaryLightToPrimaryDark, CGradientDirection.topLeftToBottomRight);

/// 返回一个次色调浅色渐变。
static LinearGradient get secondaryLight => _generate(CGradientColorType.secondaryLightToSecondary, CGradientDirection.topLeftToBottomRight);

/// 返回一个次色调深色渐变。
static LinearGradient get secondaryDark => _generate(CGradientColorType.secondaryToSecondaryDark, CGradientDirection.topLeftToBottomRight);

/// 返回一个高对比度次色调渐变。
static LinearGradient get secondaryHighContrast => _generate(CGradientColorType.secondaryLightToSecondaryDark, CGradientDirection.topLeftToBottomRight);

/// 返回一个从主色调到次色调的渐变。
static LinearGradient get primaryToSecondary => _generate(CGradientColorType.primaryToSecondary, CGradientDirection.topLeftToBottomRight);

/// 返回一个从主色调浅色到次色调浅色的渐变。
static LinearGradient get primaryLightToSecondaryLight => _generate(CGradientColorType.primaryLightToSecondaryLight, CGradientDirection.topLeftToBottomRight);

/// 返回一个从主色调深色到次色调深色的渐变。
static LinearGradient get primaryDarkToSecondaryDark => _generate(CGradientColorType.primaryDarkToSecondaryDark, CGradientDirection.topLeftToBottomRight);

如果找不到所需的线性渐变，可以使用以下方法创建一个：

LinearGradient customGradient = custom(
    colors: CGradientColorType.primaryLightToSecondaryLight,
    direction: CGradientDirection.topLeftToBottomRight,
    opacity: 0.3).reverse;

表单

CButton

CButton 类允许根据 CaravaggioUI 风格轻松快速地创建按钮。它有三种类型的按钮，每种类型都有相应的小版本。

  1. 升级按钮 <code>elevated</code>
  2. 升级小按钮 <code>elevatedSmall</code>
  3. 轮廓按钮 <code>outlined</code>
  4. 轮廓小按钮 <code>outlinedSmall</code>
  5. 文本按钮 <code>text</code>
  6. 文本小按钮 <code>textSmall</code>
CButton.elevated({
    child: Text('Press me'),
    icon: Icon(Icons.star),
    suffixIcon: Icon(Icons.star),
    gradient: CGradients.primaryToSecodnary,
})
CButton 说明图

CTextField, CAutocomplete, CDropdown

Caravaggio 中可用的输入字段有 CTextField、CAutocomplete 和 CDropdown。所有这些字段都可以采用以下形式：

  1. 简单
  2. 带边框
  3. 填充
  4. 带边框填充
CButton 说明图

CTextField

CTextField.simple(
    decoration: CFieldDecoration(
        labelText: "Label here",
        hintText: "Write something here",
        prefixIcon: Icon(Icons.star),
        suffixIcon: Icon(Icons.star),
    ),
    onChanged: (_) => //...do stuff,
),

CAutocomplete

CAutocomplete<String>.simple(
    options: ["Option 1", "Option 2", "Option 3"],
    decoration: CFieldDecoration(
        labelText: "Label here",
        hintText: "Write something here",
        prefixIcon: Icon(Icons.star),
    ),
    optionsValueToMatch: (value) => value.toLowerCase(),
    displayStringForOption: (value) => value,
    searchItems: () => //...do stuff
),

CDropdown

CDropdown<String>.simple(
    items: [
        CDropdownItemModel<String>(value: "item1", text: "Item 1"),
        CDropdownItemModel<String>(value: "item2", text: "Item 2"),
        CDropdownItemModel<String>(value: "item3", text: "Item 3"),
    ],
    decoration: CFieldDecoration(
        labelText: "Label here",
        hintText: "Write something here",
        prefixIcon: Icon(Icons.star),
    ),
    onChanged: (_) => //...do stuff
),

CCheckbox

CCheckbox(controller: CCheckboxController(), label: "Checkbox");

CRadioGroup

final List<CRadioItem<String>> items = [
    CRadioItem<String>(value: "option1", label: "Option 1"),
    CRadioItem<String>(value: "option2", label: "Option 2"),
    CRadioItem<String>(value: "option3", label: "Option 3"),
];

final CRadioController<String> controller = CRadioController<String>(initialValue: "option1");

CRadioGroup<String>(
    values: items,
    controller: controller,
    orientation: CRadioGroupOrientation.vertical,
    crossAxisAlignment: CRadioCrossAxisAlignment.start,
),

其他

除了输入字段外，CaravaggioUI 还包括多种用于可视化应用状态的图形元素。

CButton 说明图

CTable

final CTableHeader header = CTableHeader(titles: ["Header 1", "Header 2", "Header 3"]);
final _rows =
    ["Row 1", "Row 1", "Row 1"],
    ["Row 2", "Row 2", "Row 2"],
    ["Row 3", "Row 3", "Row 3"]

final List<CTableRow> rows = _rows.map((row) => CTableRow(values: row)).toList();

CTable(header: header, rows: rows);

圆形指示器

CCircularIndicator.single(
    label: "Value 1",
    currentValue: 64,
    maxValue: 100,
),

CCircularIndicator.double(
    internalLabel: "Value 1",
    currentExternalValue: 64,
    maxExternalValue: 100,
    externalLabel: "Value 2",
    currentInternalValue: 87,
    maxInternalValue: 100,
),

进度指示器

// 圆形进度指示器
CCircularProgressIndicator.primary(),
CCircularProgressIndicator.secondary(),

// 线性进度指示器
CLinearProgressIndicator.primary(),
CLinearProgressIndicator.secondary(),

完整示例代码

import 'dart:developer';

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

const SizedBox _spacer = SizedBox(height: 20);
const SizedBox _spacerSmall = SizedBox(height: 10);
const Icon _icon = Icon(Icons.star);
const Icon _suffixIcon = Icon(Icons.star);
const CFieldDecoration _decoration = CFieldDecoration(
    labelText: "Label here",
    hintText: "Write something here",
    prefixIcon: _icon);
const Text _buttonText = Text("Click here");
const List<String> _options = ["Option 1", "Option 2", "Option 3"];

final CFieldDecoration _textFieldDecoration =
    _decoration.copyWith(suffixIcon: _suffixIcon);
final LinearGradient _gradient = CGradient.primaryToSecondary;
final List<CDropdownItemModel<String>> _items = [
  CDropdownItemModel<String>(value: "item1", text: "Item 1"),
  CDropdownItemModel<String>(value: "item2", text: "Item 2"),
  CDropdownItemModel<String>(value: "item3", text: "Item 3"),
];

final List<String> _headerTexts = ["Header 1", "Header 2", "Header 3"];
final List<List<String>> _rowsTexts = [
  ["Row 1", "Row 1", "Row 1"],
  ["Row 2", "Row 2", "Row 2"],
  ["Row 3", "Row 3", "Row 3"],
];

enum Page { generics, forms, views }

void main() {
  CaravaggioUI.initialize(
      primaryColor: const Color(0xFF662D8C),
      secondaryColor: const Color(0xFFED1E79));
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Caravaggio UI',
      theme: CaravaggioUI.instance.themeData,
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Page _selectedPage = Page.forms;

  Widget get _page {
    switch (_selectedPage) {
      case Page.generics:
        return const GenericsSection();
      case Page.forms:
        return const FormsSection();
      case Page.views:
        return const ViewsSection();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Caravaggio UI'),
      ),
      body: _page,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.star), label: 'Generics'),
          BottomNavigationBarItem(
              icon: Icon(Icons.document_scanner), label: 'Forms'),
          BottomNavigationBarItem(
              icon: Icon(Icons.view_comfortable_rounded), label: 'Views'),
        ],
        currentIndex: _selectedPage.index,
        onTap: (int index) {
          setState(() {
            _selectedPage = Page.values[index];
          });
        },
      ),
    );
  }
}

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

  Widget get _textStyles => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _text("CText.style.bodyMedium", CText.style.bodyMedium),
          _text(
              "CText.style.bodyMedium.primary", CText.style.bodyMedium.primary),
          _text("CText.style.bodyMedium.secondary",
              CText.style.bodyMedium.secondary),
          _text("CText.style.bodyMedium.bold", CText.style.bodyMedium.bold),
          _text("CText.style.bodyMedium.italic", CText.style.bodyMedium.italic),
          _text("CText.style.bodyMedium.primary.bold",
              CText.style.bodyMedium.primary.bold),
        ],
      );

  Widget get _textSizes => Table(
        columnWidths: const {
          0: IntrinsicColumnWidth(),
          1: IntrinsicColumnWidth(),
          2: IntrinsicColumnWidth(),
        },
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        children: [
          _row("Display Large", CText.style.displayLarge),
          _row("Display Medium", CText.style.displayMedium),
          _row("Display Small", CText.style.displaySmall),
          _row("Headline Large", CText.style.headlineLarge),
          _row("Headline Medium", CText.style.headlineMedium),
          _row("Headline Small", CText.style.headlineSmall),
          _row("Title Large", CText.style.titleLarge),
          _row("Title Medium", CText.style.titleMedium),
          _row("Title Small", CText.style.titleSmall),
          _row("Body Large", CText.style.bodyLarge),
          _row("Body Medium", CText.style.bodyMedium),
          _row("Body Small", CText.style.bodySmall),
          _row("Label Large", CText.style.labelLarge),
          _row("Label Medium", CText.style.labelMedium),
          _row("Label Small", CText.style.labelSmall),
        ],
      );

  Widget get _gradients => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _gradient("primaryLight", CGradient.primaryLight),
          _gradient("primaryDark", CGradient.primaryDark),
          _gradient("primaryHighContrast", CGradient.primaryHighContrast),
          _gradient("secondaryLight", CGradient.secondaryLight),
          _gradient("secondaryDark", CGradient.secondaryDark),
          _gradient("secondaryHighContrast", CGradient.secondaryHighContrast),
          _gradient("primaryToSecondary", CGradient.primaryToSecondary),
          _gradient("primaryLightToSecondaryLight",
              CGradient.primaryLightToSecondaryLight),
          _gradient("primaryDarkToSecondaryDark",
              CGradient.primaryDarkToSecondaryDark),
          _gradient("reverse", CGradient.primaryToSecondary.reverse),
          _gradient("opacity(0.5)", CGradient.primaryToSecondary.opacity(0.5)),
          _gradient(
              "custom(primaryLightToSecondaryDark, centerLeftToTopRight, opacity)",
              CGradient.custom(
                colors: CGradientColorType.primaryLightToSecondaryDark,
                direction: CGradientDirection.centerLeftToTopRight,
                opacity: 1,
              )),
        ],
      );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Text("Text Styles", style: CText.style.titleLarge),
            _textSizes,
            _spacer,
            Text("Text Sizes", style: CText.style.titleLarge),
            _textStyles,
            _spacer,
            Text("Gradients", style: CText.style.titleLarge),
            _gradients,
          ],
        ),
      ),
    );
  }

  static Text _text(String text, TextStyle style) => Text(text, style: style);

  static TableRow _row(String text, TextStyle style) => TableRow(
        children: [
          Text(text, style: style),
          const SizedBox(width: 20),
          Text(style.fontSize.toString()),
        ],
      );

  static Widget _gradient(String text, LinearGradient gradient) => Container(
        height: 100,
        decoration: BoxDecoration(gradient: gradient),
        child: Center(
            child: Text(text,
                style: CText.style.white, textAlign: TextAlign.center)),
      );
}

class FormsSection extends StatefulWidget {
  const FormsSection({super.key});

  [@override](/user/override)
  State<FormsSection> createState() => _FormsSectionState();
}

class _FormsSectionState extends State<FormsSection> {
  Widget get _buttons {
    return Column(
      children: [
        CButton.elevated(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.elevated(
            suffixIcon: _suffixIcon,
            icon: _icon,
            gradient: _gradient,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.outlined(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.text(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.elevatedSmall(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.elevatedSmall(
            suffixIcon: _suffixIcon,
            icon: _icon,
            gradient: _gradient,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.outlinedSmall(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
        _spacerSmall,
        CButton.textSmall(
            suffixIcon: _suffixIcon,
            icon: _icon,
            onPressed: _onPressed,
            child: _buttonText),
      ],
    );
  }

  Widget get _textFields {
    return Column(
      children: [
        CTextField.simple(
            decoration: _textFieldDecoration, onChanged: _onFieldChanged),
        _spacerSmall,
        CTextField.bordered(
            decoration: _textFieldDecoration, onChanged: _onFieldChanged),
        _spacerSmall,
        CTextField.filled(
            decoration: _textFieldDecoration, onChanged: _onFieldChanged),
        _spacerSmall,
        CTextField.borderedFilled(
            decoration: _textFieldDecoration, onChanged: _onFieldChanged),
      ],
    );
  }

  Widget get _autocomplete {
    return Column(
      children: [
        CAutocomplete<String>.simple(
            options: _options,
            decoration: _decoration,
            optionsValueToMatch: (value) => value.toLowerCase(),
            displayStringForOption: (value) => value,
            searchItems: () {}),
        _spacerSmall,
        CAutocomplete<String>.bordered(
            options: _options,
            decoration: _decoration,
            optionsValueToMatch: _optionsValueToMatch,
            displayStringForOption: (value) => value,
            searchItems: () {}),
        _spacerSmall,
        CAutocomplete<String>.filled(
            options: _options,
            decoration: _decoration,
            optionsValueToMatch: _optionsValueToMatch,
            displayStringForOption: (value) => value,
            searchItems: () {}),
        _spacerSmall,
        CAutocomplete<String>.borderedFilled(
            options: _options,
            decoration: _decoration,
            optionsValueToMatch: _optionsValueToMatch,
            displayStringForOption: (value) => value,
            searchItems: () {}),
      ],
    );
  }

  Widget get _dropdowns {
    return Column(
      children: [
        CDropdown<String>.simple(
            items: _items, decoration: _decoration, onChanged: _onChanged),
        _spacerSmall,
        CDropdown<String>.filled(
            items: _items, decoration: _decoration, onChanged: _onChanged),
        _spacerSmall,
        CDropdown<String>.bordered(
            items: _items, decoration: _decoration, onChanged: _onChanged),
        _spacerSmall,
        CDropdown<String>.borderedFilled(
            items: _items, decoration: _decoration, onChanged: _onChanged),
      ],
    );
  }

  Widget get _checkboxes {
    final CCheckboxController controller = CCheckboxController();
    return CCheckbox(controller: controller, label: "Checkbox");
  }

  Widget get _radiobuttons {
    final List<CRadioItem<String>> items = _options
        .map((value) => CRadioItem<String>(value: value, label: value))
        .toList();
    final CRadioController<String> controller = CRadioController<String>(initialValue: _options.first);
    return Column(
      children: [
        CRadioGroup<String>(
            values: items,
            controller: controller,
            orientation: CRadioGroupOrientation.vertical,
            crossAxisAlignment: CRadioCrossAxisAlignment.start),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            const Text("Buttons", style: TextStyle(fontSize: 24)),
            _buttons,
            _spacer,
            const Text("Text Fields", style: TextStyle(fontSize: 20)),
            _textFields,
            _spacer,
            const Text("Autocomplete", style: TextStyle(fontSize: 20)),
            _autocomplete,
            _spacer,
            const Text("Dropdowns", style: TextStyle(fontSize: 20)),
            _dropdowns,
            _spacer,
            const Text("Checkboxes", style: TextStyle(fontSize: 20)),
            _checkboxes,
            _spacer,
            const Text("Radio buttons", style: TextStyle(fontSize: 20)),
            _radiobuttons,
          ],
        ),
      ),
    );
  }

  void _onPressed() {
    ScaffoldMessenger.of(context)
        .showSnackBar(const SnackBar(content: Text('Button pressed')));
  }

  void _onChanged(String? value) {
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text(value ?? 'No value')));
  }

  void _onFieldChanged(String value) {
    log(value);
  }

  String _optionsValueToMatch(String value) {
    return value.toLowerCase();
  }
}

class ViewsSection extends StatefulWidget {
  const ViewsSection({super.key});

  [@override](/user/override)
  State<ViewsSection> createState() => _ViewsSectionState();
}

class _ViewsSectionState extends State<ViewsSection> {
  Widget get _tables {
    final header = CTableHeader(titles: _headerTexts);
    final rows = _rowsTexts.map((row) => CTableRow(values: row)).toList();

    return CTable(
      header: header,
      rows: rows,
    );
  }

  Widget get _circularIndicators {
    return Column(
      children: [
        CCircularIndicator.single(
            currentValue: 64, maxValue: 100, label: "Value 1"),
        _spacerSmall,
        CCircularIndicator.double(
            currentExternalValue: 64,
            maxExternalValue: 100,
            currentInternalValue: 87,
            maxInternalValue: 100,
            internalLabel: "Value 1",
            externalLabel: "Value 2"),
      ],
    );
  }

  Widget get _progress {
    return Column(
      children: [
        CCircularProgressIndicator.primary(),
        _spacerSmall,
        CCircularProgressIndicator.secondary(),
        _spacerSmall,
        CLinearProgressIndicator.primary(),
        _spacerSmall,
        CLinearProgressIndicator.secondary(),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Text("Tables", style: CText.style.titleLarge),
            _tables,
            _spacer,
            Text("Circular Indicators", style: CText.style.titleLarge),
            _circularIndicators,
            _spacer,
            Text("Progress Indicators", style: CText.style.titleLarge),
            _progress,
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


caravaggio_ui 是一个 Flutter UI 组件库，提供了一系列预构建的组件，帮助开发者快速构建美观且功能丰富的用户界面。以下是如何使用 caravaggio_ui 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 caravaggio_ui 的依赖。

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

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

2. 导入库

在你的 Dart 文件中导入 caravaggio_ui：

import 'package:caravaggio_ui/caravaggio_ui.dart';

3. 使用组件

caravaggio_ui 提供了多种预构建的组件，你可以直接在应用中使用它们。以下是一些常见组件的使用示例：

按钮组件

CaravaggioButton(
  onPressed: () {
    print('Button Pressed');
  },
  text: 'Click Me',
  color: Colors.blue,
)

文本框组件

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

卡片组件

CaravaggioCard(
  child: Text('This is a card'),
  elevation: 5,
)

对话框组件

CaravaggioDialog(
  title: 'Alert',
  content: Text('This is an alert dialog'),
  actions: [
    CaravaggioButton(
      onPressed: () {
        Navigator.pop(context);
      },
      text: 'OK',
    ),
  ],
)

4. 自定义主题

caravaggio_ui 允许你通过自定义主题来统一应用的样式。你可以在 MaterialApp 中设置自定义主题：

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    // 其他主题设置
  ),
  home: MyHomePage(),
)

5. 其他组件

caravaggio_ui 还提供了许多其他组件，如 CaravaggioAppBar、CaravaggioBottomNavigationBar、CaravaggioSnackBar 等。你可以根据需要查阅 官方文档 获取更多信息和示例。

6. 示例代码

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 caravaggio_ui 组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Caravaggio UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CaravaggioAppBar(
        title: Text('Caravaggio UI Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CaravaggioButton(
              onPressed: () {
                print('Button Pressed');
              },
              text: 'Click Me',
              color: Colors.blue,
            ),
            SizedBox(height: 20),
            CaravaggioTextField(
              hintText: 'Enter your name',
              onChanged: (value) {
                print('Text changed: $value');
              },
            ),
            SizedBox(height: 20),
            CaravaggioCard(
              child: Text('This is a card'),
              elevation: 5,
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部