TDesign Flutter

TDesign Flutter provides a comprehensive set of UI components categorized into several functional groups to help build mobile applications. The component library is continuously updated with new types based on business practices.

Available Component Categories:

1. Basic (基础)

Fundamental building blocks for UI construction:

• Button (按钮)
• Divider (分割线)
• Fab (悬浮按钮)
• Icon (图标)
• Link (链接)
• Text (文本)

2. Navigation (导航)

Components for guiding users through the application:

• BackTop (返回顶部)
• Drawer (抽屉)
• Indexes (索引)
• Navbar (导航条)
• SideBar (侧边导航栏)
• Steps (步骤条)
• TabBar (标签栏)
• Tabs (选项卡)

3. Input (输入)

Controls for capturing user data and interaction:

• Calendar (日历)
• Cascader (级联选择器)
• CheckBox (多选框)
• DateTimePicker (日期选择器)
• Form (表单)
• Input (输入框)
• Picker (选择器)
• Radio (单选框)
• Rate (评分)
• Search (搜索框)
• Slider (滑动选择器)
• Stepper (步进器)
• Switch (开关)
• Textarea (多行文本框)
• TreeSelect (树形选择)
• Upload (上传)

4. Data Display (数据展示)

Components for presenting information to the user:

• Avatar (头像)
• Badge (徽章)
• Cell (单元格)
• Collapse (折叠面板)
• TimeCounter (计时器)
• Empty (空状态)
• Footer (页脚)
• Image (图片)
• ImageViewer (图片预览)
• Progress (进度条)
• Result (结果)
• Skeleton (骨架屏)
• Swiper (轮播图)
• Table (表格)
• Tag (标签)

5. Feedback (反馈)

Components for communicating system status or user actions:

• ActionSheet (动作面板)
• Dialog (对话框)
• DropdownMenu (下拉菜单)
• Loading (加载)
• Message (全局提示)
• NoticeBar (消息提醒)
• Popover (弹出气泡)
• Popup (弹出层)
• PullDownRefresh (下拉刷新)
• SwipeCell (滑动操作)
• Toast (轻提示)

Use the type property to switch between different input modes:

• TInputType.normal: Standard text input.
• TInputType.special: Used for specific formats like prices or quantities, often paired with textAlign: TextAlign.end and a rightWidget.
• TInputType.twoLine: A vertical layout style where the label and input are stacked.
• TInputType.cardStyle: A card-based layout.

Other specialized behaviors:

• Password Mode: Use obscureText: true to hide characters. You can toggle this using a rightBtn with a visibility icon.
• Auto-height: Set maxLines: null to allow the input field to expand vertically as the user types.
• Read-only: Set readOnly: true to prevent user editing.

// Password input with toggle
TInput(
  type: TInputType.normal,
  controller: controller[12],
  obscureText: !browseOn,
  leftLabel: '输入密码',
  hintText: '请输入密码',
  rightBtn: browseOn
      ? Icon(TIcons.browse, color: TTheme.of(context).textColorPlaceholder)
      : Icon(TIcons.browse_off, color: TTheme.of(context).textColorPlaceholder),
  onBtnTap: () {
    setState(() {
      browseOn = !browseOn;
    });
  },
  needClear: false,
),

// Auto-expanding height input
TInput(
  leftLabel: '地址',
  controller: controller[27],
  hintText: '请输入地址，高度自适应',
  maxLines: null,
  onChanged: (text) {
    setState(() {});
  },
),

The Checkbox functionality is split between two main components:

1. TCheckbox: The individual checkbox item. It handles its own id, title, subTitle, and onCheckBoxChanged callback.
2. TCheckboxGroupContainer: The parent container that manages the selection state of multiple TCheckbox items. It uses selectIds to track which checkboxes are currently active and can control layout direction, card modes, and styling.

Common Layout Patterns

Vertical List

Use TCheckboxGroupContainer as a wrapper around a list (like ListView.builder) where each item is a TCheckbox with a unique id.

Horizontal Layout

Set the direction property of TCheckboxGroupContainer to Axis.horizontal. You can also provide a fixed list of checkboxes via the directionalTdCheckboxes property.

Card Mode

To display checkboxes as selectable cards instead of standard list items, set cardMode: true on both the TCheckboxGroupContainer and the individual TCheckbox components.

// Example: Vertical Card Style
TCheckboxGroupContainer(
  selectIds: const ['index:1'],
  cardMode: true,
  direction: Axis.vertical,
  directionalTdCheckboxes: const [
    TCheckbox(
      id: 'index:0',
      title: 'Option 1',
      cardMode: true,
    ),
    TCheckbox(
      id: 'index:1',
      title: 'Option 2',
      cardMode: true,
    ),
  ],
)