Canton UI

Canton UI 元素和资源，用于 Flutter。

应用中的示例

描述

这包括主题（颜色、排版等）、自定义方法、按钮、文本输入、颜色选择器等。所有这些都是为了尽量减少我在重做简单工具和 UI 上花费的时间，同时仍能自定义我的屏幕以符合我的风格。请注意，此包在不久的将来不会在 pub.dev 上发布。

入门

要使用此包并访问其内容，请将此依赖项添加到您的 pubspec.yaml 文件中

dependencies:
    canton_ui: <latest_version>

然后简单地使用此代码导入该包

import 'package:canton_ui/canton_ui.dart';

顺便说一句，在使用此包时 package:flutter/material.dart 已经被导入了，所以不需要再次导入？

使用方法

注意：该包非常灵活，这意味着您不必使用包中的所有元素。您可以将其与 Material 和 Cupertino 元素混合使用，没有任何问题，但某些元素除外。

CantonApp

替换 MaterialApp。推荐使用此项而不是 MaterialApp，以实现主题和浅色/深色模式切换。

CantonApp(
    title: kAppTitle,
    primaryLightColor: CantonColors.blue // Or any other color,
    primaryLightVariantColor: CantonColors.blue[200]! // Or any other color,
    primaryDarkColor: CantonDarkColors.blue // Or any other color,
    primaryDarkVariantColor: CantonDarkColors.blue[200]! // Or any other color,
    home: YourMainAppWidget(),
)

CantonScaffold

将此用作 Scaffold() 小部件的替代品。添加了内边距和其他元素。

CantonScaffold(
    body: Column(
        children: [...]
    )
)

颜色

您可以在 lib/config/themes/(light_theme or dark_theme)/(light or dark)_color_palette.dart 中查看所有颜色

不建议直接使用颜色，而应通过 Theme.of(context).colorScheme 访问

这是为了允许在正确的情况下使用浅色和深色（当应用程序处于浅色模式或深色模式时）。此规则也存在例外，例如在设置 CantonApp 时。

CantonColors.blue

CantonColors.pink[300]

CantonDarkColors.green

ViewHeader

CantonUI 使用 ViewHeader 而不是导航栏，您可以在其中自定义前导和操作按钮

ViewHeaderOne(
    title: ...,
    button: ..., // Placed on right side
)


ViewHeaderTwo(
    title: ...,
    backButton: ...,
    isBackButtonClear: ...,
    buttonOne: ...,
    buttonTwo: ...,
)

按钮

CantonUI 有多种按钮可供选择。

ActionButton()

BackButton()

HeaderButton() // Commonly used in ViewHeaders

NullButton() // Great spacer widget

PrimaryButton() // Default button, great for all use cases, highly customizeable

TextInput

CantonUI 提供标准的文本输入和标签文本输入字段（在笔记应用程序中使用）。这两种输入都高度可定制，开箱即用，外观精美。

CantonTextInput() // obscureText is required if isTextFormField is true

CantonTagTextInput()

加载

默认加载旋转器

Loading()

RefreshList

如果您正在制作需要下拉刷新的应用程序（例如新闻应用程序或需要调用 API 的应用程序），那么此小部件将满足您的需求。

RefreshList(
    child: ...
)

响应式

如果您需要创建需要适应不同屏幕尺寸的用户界面，那么您可以使用 Responsive 小部件来处理。

注意： mobile 和 tablet 是必需的。

Responsive(
    desktop: YourDesktopWidget() // Screens larger than 1100px width,
    tablet: YourTabletWidget() // Screens between 650 - 1149 px width,
    mobile: YourMobileWidget() // Screens between 0 - 649 px width,
)

所有功能

  • 空安全：此包支持空安全。
  • 颜色系统：归功于 Primer 颜色系统，这是它们的修改版本。
  • 排版系统：归功于 Primer 排版系统。
  • 按钮：可调整大小的主按钮、小/标题按钮和带有所需自定义的回退按钮。
  • 文本输入：自定义文本字段、文本表单字段和标签文本字段。
  • 边框：边框自定义。
  • 加载图标：加载图标/小部件。
  • 动画（开发中）：流畅的动画，提供俏皮而专业的风格。
  • 自定义方法：易于使用的自定义方法。
  • 图标系统：利用 Iconly 图标、Feather 图标和 Cupertino 图标的图标系统。
  • 自定义字体：包括 Inter UI 和 Times New Roman 的衬线和无衬线字体。
  • 浅色主题：简洁的浅色主题。
  • 深色主题：简洁的深色主题，所有元素都已修改。
  • 动态设备主题：根据当前设备自动适应浅色模式和深色模式。

依赖项

flutter_riverpod: ^0.14.0+3
flutter_slidable: ^0.6.0
flutter_feather_icons: ^2.0.0+1
flutter_spinkit: ^5.0.0
flutter_svg: ^0.22.0
page_transition: ^2.0.2
liquid_pull_to_refresh: ^3.0.0
cupertino_icons: ^1.0.3

Figma

链接到 figma 上的设计系统，以查看 UI 元素

社交媒体

如果您有任何疑问，可以在这里联系我

GitHub

查看 Github