### TDInput Center-Aligned Input Example

Source: https://tdesign.tencent.com/flutter/components/Input

Demonstrates configuring TDInput for center-aligned text. This example highlights the `contentAlignment` property set to `TextAlign.center`. It includes standard input functionalities like labels, controllers, and change/clear handlers.

```dart
Widget _contentCenter(BuildContext context) {
    return Column(
      children: [
        TDInput(
          leftLabel: '居中',
          controller: controller[24],
          backgroundColor: Colors.white,
          contentAlignment: TextAlign.center,
          hintText: '请输入文字',
          onChanged: (text) {
            setState(() {});
          },
          onClearTap: () {
            controller[24].clear();
            setState(() {});
          },
        ),
        const SizedBox(
          height: 16,
        )
      ],
    );
  }
```

--------------------------------

### TDInput Right-Aligned Input Example

Source: https://tdesign.tencent.com/flutter/components/Input

Provides an example of TDInput configured for right-aligned text using `contentAlignment: TextAlign.end`. Similar to other examples, it includes input fields, controllers, and event handlers for user interaction.

```dart
Widget _contentRight(BuildContext context) {
    return Column(
      children: [
        TDInput(
          leftLabel: '右对齐',
          controller: controller[25],
          backgroundColor: Colors.white,
          contentAlignment: TextAlign.end,
          hintText: '请输入文字',
          onChanged: (text) {
            setState(() {});
          },
          onClearTap: () {
            controller[25].clear();
            setState(() {});
          },
        ),
        const SizedBox(
          height: 16,
        )
      ],
    );
  }
```

--------------------------------

### TDInput Left-Aligned Input Example

Source: https://tdesign.tencent.com/flutter/components/Input

Shows how to configure TDInput for left-aligned text input. It includes a label, controller, background color, hint text, and handlers for text changes and clearing. This is a basic example of TDInput's alignment capabilities.

```dart
Widget _contentLeft(BuildContext context) {
    return Column(
      children: [
        TDInput(
          leftLabel: '左对齐',
          controller: controller[23],
          backgroundColor: Colors.white,
          hintText: '请输入文字',
          onChanged: (text) {
            setState(() {});
          },
          onClearTap: () {
            controller[23].clear();
            setState(() {});
          },
        ),
        const SizedBox(
          height: 16,
        )
      ],
    );
  }
```

--------------------------------

### TDUpload: Loading State Example

Source: https://tdesign.tencent.com/flutter/components/upload

Demonstrates the upload component in a loading state, typically shown while files are being processed or uploaded. This example is configured for multiple file uploads.

```dart
Widget _uploadLoading(BuildContext context) {
    return wrapDemoContainer('上传图片',
        child: TDUpload(
          files: files3,
          multiple: true,
          max: 9,
          onClick: onClick,
          onCancel: onCancel,
          onError: print,
          onValidate: print,
          onChange: ((files, type) => onValueChanged(files3, files, type)),
        ));
  }
```

--------------------------------

### Comprehensive Capsule Slider Examples

Source: https://tdesign.tencent.com/flutter/components/slider

A Flutter widget demonstrating various configurations of capsule-style sliders and range sliders within a column. It includes examples with thumb values, labels, and scales, showcasing different use cases.

```dart
Widget _buildCapsule(BuildContext context) {
    return Column(
      children: [
        TDSlider(
          sliderThemeData: TDSliderThemeData.capsule(
            context: context,
            showThumbValue: true,
            min: 0,
            max: 100,
            scaleFormatter: (value) => value.toInt().toString(),
          ),
          value: 40,
          // divisions: 5,
          onChanged: (value) {},
        ),
        const SizedBox(
          height: 16,
        ),
        TDRangeSlider(
          sliderThemeData: TDSliderThemeData.capsule(
            context: context,
            min: 0,
            max: 100,
            scaleFormatter: (value) => value.toInt().toString(),
          ),
          value: const RangeValues(20, 60),
          // divisions: 5,
          onChanged: (value) {},
        ),
        const SizedBox(
          height: 16,
        ),
        TDSlider(
          sliderThemeData: TDSliderThemeData.capsule(
            context: context,
            min: 0,
            max: 100,
            scaleFormatter: (value) => value.toInt().toString(),
          ),
          leftLabel: '0',
          rightLabel: '100',
          value: 40,
          // divisions: 5,
          onChanged: (value) {},
        ),
        const SizedBox(
          height: 16,
        ),
        TDRangeSlider(
          sliderThemeData: TDSliderThemeData.capsule(
            context: context,
            min: 0,
            max: 100,
            showThumbValue: true,
            scaleFormatter: (value) => value.toInt().toString(),
          ),
          value: const RangeValues(20, 60),
          leftLabel: '0',
          rightLabel: '100',
          // divisions: 5,
          onChanged: (value) {},
        ),
        const SizedBox(
          height: 16,
        ),
        TDSlider(
          sliderThemeData: TDSliderThemeData.capsule(
            context: context,
            showScaleValue: true,
            divisions: 5,
            min: 0,
            max: 100,
            scaleFormatter: (value) => value.toInt().toString(),
          )..updateSliderThemeData((data) => data.copyWith(
                activeTickMarkColor: const Color(0xFFE7E7E7),
                inactiveTickMarkColor: const Color(0xFFE7E7E7),
              )),

```

--------------------------------

### Flutter TDAvatar: Icon Avatar Examples

Source: https://tdesign.tencent.com/flutter/components/avatar

Demonstrates the creation of icon-based avatars using TDAvatar with 'TDAvatarType.icon'. Examples are provided for both standard and square shapes, utilizing the default icon rendering.

```flutter
Widget _buildIconAvatar(BuildContext context){
    return Padding(
      padding: const EdgeInsets.only(left: 16),
      child: Row(
        children: const [
          TDAvatar(
            size: TDAvatarSize.medium,
            type: TDAvatarType.icon,
            ),
          SizedBox(width: 32,),
          TDAvatar(
            size: TDAvatarSize.medium,
            type: TDAvatarType.icon,
            shape: TDAvatarShape.square,
          ),
        ],
      ),
    );
  }
```

--------------------------------

### 引入 TDesign Flutter 依赖

Source: https://tdesign.tencent.com/flutter/getting-started

在 `pubspec.yaml` 文件中添加 `tdesign_flutter` 依赖，并指定版本号。之后运行 `flutter pub get` 来获取依赖。

```yaml
dependencies:
  tdesign_flutter: ^0.1.0
```

--------------------------------

### Flutter SideBar Anchor Navigation Example

Source: https://tdesign.tencent.com/flutter/components/side-bar

Demonstrates how to implement anchor-based navigation using the TDSideBar component in Flutter. It initializes the sidebar with a list of items and associated content pages, allowing users to navigate between sections by selecting sidebar items. This example includes badge display for notifications.

```dart
  Widget _buildAnchorSideBar(BuildContext context) {
    // 锚点用法
    final list = [];
    final pages = [];

    for (var i = 0; i < 20; i++) {
      list.add(SideItemProps(
        index: i,
        label: '选项',
        value: i,
      ));
      pages.add(getAnchorDemo(i));
    }

    pages.add(Container(
      height: MediaQuery.of(context).size.height - itemHeight,
      decoration: const BoxDecoration(color: Colors.white),
    ));

    list[1].badge = const TDBadge(TDBadgeType.redPoint);
    list[2].badge = const TDBadge(
      TDBadgeType.message,
      count: '8',
    );

    var demoHeight = MediaQuery.of(context).size.height;
    _sideBarController.init(list);

    return Row(
      children: [
        SizedBox(
          width: 110,
          child: TDSideBar(
            height: demoHeight,
            style: TDSideBarStyle.normal,
            value: currentValue,
            controller: _sideBarController,
            children: list
                .map((ele) => TDSideBarItem(
                    label: ele.label ?? '',
                    badge: ele.badge,
                    value: ele.value,
                    icon: ele.icon))
                .toList(),
            onChanged: onChanged,
            onSelected: onSelected,
          ),
        ),
        Expanded(
            child: SizedBox(
          height: demoHeight,
          child: SingleChildScrollView(
            controller: _demoScroller,
            child: Column(
              children: pages,
            ),
          ),
        ))
      ],
    );
  }

```

--------------------------------

### TDInput Custom Style Example

Source: https://tdesign.tencent.com/flutter/components/Input

Demonstrates customizing the appearance of TDInput, including background color, label style, text style, and hint text style. This allows for integration into themes with distinct visual requirements.

```dart
Widget _customStyle(BuildContext context) {
    return TDInput(
      leftLabel: '标签文字',
      controller: controller[26],
      backgroundColor: TDTheme.of(context).grayColor12,
      leftLabelStyle: TextStyle(color: TDTheme.of(context).fontWhColor1),
      textStyle: TextStyle(color: TDTheme.of(context).fontWhColor1),
      hintText: '请输入文字',
      hintTextStyle: TextStyle(color: TDTheme.of(context).fontWhColor3),
      onChanged: (text) {
        setState(() {});
      },
      clearBtnColor: TDTheme.of(context).fontWhColor3,
      onClearTap: () {
        controller[26].clear();
        setState(() {});
      },
    );
  }
```

--------------------------------

### Basic TDSearchBar Example

Source: https://tdesign.tencent.com/flutter/components/search

Demonstrates the basic usage of the TDSearchBar component with a placeholder and an onTextChanged callback to capture user input.

```dart
Widget _buildDefaultSearchBar(BuildContext context) {
    return _buildColumnWidgets(
        context,
        TDSearchBar(
          placeHolder: '搜索预设文案',
          onTextChanged: (String text) {
            setState(() {
              inputText = text;
            });
          },
        ));
  }
```

--------------------------------

### TDTabBar: Small Size Example

Source: https://tdesign.tencent.com/flutter/components/tabs

This example demonstrates how to create a TDTabBar with a small size. It initializes a list of TDTab widgets and configures the TDTabBar with specific properties like controller and background color.

```dart
Widget _buildItemWithSizeSmall(BuildContext context) {
    var tabs = [
      const TDTab(
        text: '小尺寸',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
    ];
    return TDTabBar(
        tabs: tabs,
        controller: TabController(length: 4, vsync: this),
        backgroundColor: Colors.white,
        showIndicator: true);
  }
```

--------------------------------

### Flutter SideBar Pagination Example

Source: https://tdesign.tencent.com/flutter/components/side-bar

Illustrates how to implement pagination with the TDSideBar component in Flutter. This example connects sidebar item selection to page changes in a PageView, enabling a paginated navigation experience. It also supports displaying badges on sidebar items.

```dart
  Widget _buildPaginationSideBar(BuildContext context) {
    // 切页用法
    final list = [];
    final pages = [];

    for (var i = 0; i < 100; i++) {
      list.add(SideItemProps(
        index: i,
        label: '选项',
        value: i,
      ));
      pages.add(getPageDemo(i));
    }

    list[1].badge = const TDBadge(TDBadgeType.redPoint);
    list[2].badge = const TDBadge(
      TDBadgeType.message,
      count: '8',
    );

    void setCurrentValue(int value) {
      _pageController.jumpToPage(value);
      if (currentValue != value) {
        currentValue = value;
      }
    }

    var demoHeight = MediaQuery.of(context).size.height;

    return Row(
      children: [
        SizedBox(
          width: 110,
          child: TDSideBar(
            height: demoHeight,
            style: TDSideBarStyle.normal,
            value: currentValue,
            controller: _sideBarController,
            children: list
                .map((ele) => TDSideBarItem(
                    label: ele.label ?? '',
                    badge: ele.badge,
                    value: ele.value,
                    icon: ele.icon))
                .toList(),
            onSelected: setCurrentValue,
          ),
        ),
        Expanded(
            child: SizedBox(
          height: demoHeight,
          child: PageView(
            controller: _pageController,
            scrollDirection: Axis.vertical,
            children: pages,
            physics: const NeverScrollableScrollPhysics(),
          ),
        ))
      ],
    );
  }

```

--------------------------------

### Flutter Text Tab Bar Example (5 Tabs)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Demonstrates how to set up a text-only tab bar with five navigation tabs using TDBottomTabBar. This example assumes an `onTapTab` function is available to manage tab click events. Dependencies include the TDesign Flutter package and BuildContext.

```flutter
Widget _textTypeTabBar5tabs(BuildContext context) {
    return TDBottomTabBar(TDBottomTabBarBasicType.text,
        useVerticalDivider: false,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
        ]);
  }
```

--------------------------------

### TDesign Flutter Combination Buttons Example

Source: https://tdesign.tencent.com/flutter/components/button

Shows how to arrange multiple TDesign Flutter buttons side-by-side using a Row widget. This example includes two fill buttons with different themes.

```dart
Widget _buildCombinationButtons(BuildContext context) {
    return Row(
      children: const [
        SizedBox(
          width: 16,
        ),
        Expanded(
            child: TDButton(
          text: '填充按钮',
          size: TDButtonSize.large,
          type: TDButtonType.fill,
          shape: TDButtonShape.rectangle,
          theme: TDButtonTheme.light,
        )),
        SizedBox(
          width: 16,
        ),
        Expanded(
            child: TDButton(
          text: '填充按钮',
          size: TDButtonSize.large,
          type: TDButtonType.fill,
          shape: TDButtonShape.rectangle,
          theme: TDButtonTheme.primary,
        )),
        SizedBox(
          width: 16,
        ),
      ],
    );
  }
```

--------------------------------

### Toast Usage Examples

Source: https://tdesign.tencent.com/flutter/components/toast

Code examples demonstrating how to use the TDToast component for success, warning, and failure messages, including vertical and horizontal orientations.

```APIDOC
## Toast Usage Examples

### Success Toast

```dart
Widget _successToast(BuildContext context) {
  return TDButton( 
    onTap: () {
      TDToast.showSuccess('成功文案', context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '成功提示',
  );
}
```

### Success Toast (Vertical)

```dart
Widget _successVerticalToast(BuildContext context) {
  return TDButton(
    onTap: () {
      TDToast.showSuccess('成功文案', direction: IconTextDirection.vertical, context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '成功提示(竖向)',
  );
}
```

### Warning Toast

```dart
Widget _warningToast(BuildContext context) {
  return TDButton(
    onTap: () {
      TDToast.showWarning('警告文案', direction: IconTextDirection.horizontal, context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '警告提示',
  );
}
```

### Warning Toast (Vertical)

```dart
Widget _warningVerticalToast(BuildContext context) {
  return TDButton(
    onTap: () {
      TDToast.showWarning('警告文案', direction: IconTextDirection.vertical, context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '警告提示(竖向)',
  );
}
```

### Failure Toast

```dart
Widget _failToast(BuildContext context) {
  return TDButton(
    onTap: () {
      TDToast.showFail('失败文案', direction: IconTextDirection.horizontal, context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '失败提示',
  );
}
```

### Failure Toast (Vertical)

```dart
Widget _failVerticalToast(BuildContext context) {
  return TDButton(
    onTap: () {
      TDToast.showFail('失败文案', direction: IconTextDirection.vertical, context: context);
    },
    size: TDButtonSize.large,
    type: TDButtonType.outline,
    theme: TDButtonTheme.primary,
    isBlock: true,
    text: '失败提示(竖向)',
  );
}
```
```

--------------------------------

### TDesign Flutter Loading Icon Button Example

Source: https://tdesign.tencent.com/flutter/components/button

Illustrates creating a TDesign Flutter button that displays a loading indicator. The button has text and a loading icon widget.

```dart
TDButton _buildLoadingIconButton(BuildContext context) {
    return TDButton(
      text: '加载中',
      iconWidget: TDLoading(
        size: TDLoadingSize.small,
        icon: TDLoadingIcon.circle,
        iconColor: TDTheme.of(context).whiteColor1,
      ),
      size: TDButtonSize.large,
      type: TDButtonType.fill,
      shape: TDButtonShape.rectangle,
      theme: TDButtonTheme.primary,
    );
  }
```

--------------------------------

### Scrollable NoticeBar Examples

Source: https://tdesign.tencent.com/flutter/components/notice-bar

Showcases how to create a scrolling NoticeBar for longer messages using the 'marquee' property. Includes examples with and without a prefix icon and adjustable speed.

```dart
Widget _scrollNoticeBar(BuildContext context) {
  return const TDNoticeBar(
    context: '提示文字描述提示文字描述提示文字描述提示文字描述提示文字',
    marquee: true,
    speed: 50,
  );
}
```

```dart
Widget _scrollIconNoticeBar(BuildContext context) {
  return const Padding(
    padding: EdgeInsets.only(top: 16),
    child: TDNoticeBar(
      context: '提示文字描述提示文字描述提示文字描述提示文字描述提示文字',
      speed: 50,
      prefixIcon: TDIcons.sound,
      marquee: true,
    ),
  );
}
```

--------------------------------

### Text-Only NoticeBar Example

Source: https://tdesign.tencent.com/flutter/components/notice-bar

Demonstrates the basic usage of the TDNoticeBar component to display a simple text message. This is the most straightforward way to present static information.

```dart
Widget _textNoticeBar(BuildContext context) {
  return const TDNoticeBar(context: '这是一条普通的通知信息');
}
```

--------------------------------

### Flutter Text Tab Bar Example (3 Tabs)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Shows how to implement a text-only tab bar with three navigation tabs using TDBottomTabBar. The example defines the tab configurations and expects a general `onTapTab` function to handle tab presses. Dependencies include the TDesign Flutter package and BuildContext.

```flutter
Widget _textTypeTabBar3tabs(BuildContext context) {
    return TDBottomTabBar(TDBottomTabBarBasicType.text,
        useVerticalDivider: false,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
        ]);
  }
```

--------------------------------

### TDInput Card Style Example

Source: https://tdesign.tencent.com/flutter/components/Input

Demonstrates the card style for TDInput using `TDInputType.cardStyle`. This presentation wraps the input field in a card-like container with a specified width. It includes typical input features and event handlers.

```dart
Widget _cardStyle(BuildContext context) {
    return TDInput(
      type: TDInputType.cardStyle,
      width: MediaQuery.of(context).size.width - 32,
      leftLabel: '标签文字',
      controller: controller[21],
      hintText: '请输入文字',
      backgroundColor: Colors.white,
      onChanged: (text) {
        setState(() {});
      },
      onClearTap: () {
        controller[21].clear();
        setState(() {});
      },
    );
  }
```

--------------------------------

### TDesign Flutter Block Button Example

Source: https://tdesign.tencent.com/flutter/components/button

Demonstrates creating a TDesign Flutter block button that spans the full width. This example uses a fill type, primary theme, and includes an icon.

```dart
TDButton _buildFilledFillButton(BuildContext context) {
    return const TDButton(
      text: '填充按钮',
      icon: TDIcons.app,
      size: TDButtonSize.large,
      type: TDButtonType.fill,
      theme: TDButtonTheme.primary,
      isBlock: true,
    );
  }
```

--------------------------------

### Flutter Icon-Text Tab Bar Example (3 Tabs)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Presents a tab bar component that displays both icons and text using TDBottomTabBar with the `iconText` type. This example includes configurations for selected and unselected icons for each tab, along with text labels. Dependencies include the TDesign Flutter package, BuildContext, and pre-defined icon variables.

```flutter
Widget _iconTextTypeTabBar3tabs(BuildContext context) {
    return TDBottomTabBar(TDBottomTabBarBasicType.iconText,
        useVerticalDivider: false,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签',
            selectedIcon: _selectedIcon,
            unselectedIcon: _unSelectedIcon,
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '',
            selectedIcon: _selectedIcon,
            unselectedIcon: _unSelectedIcon,
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            selectedIcon: _selectedIcon,
            unselectedIcon: _unSelectedIcon,
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
        ]);
  }
```

--------------------------------

### Flutter Text Tab Bar Example (4 Tabs)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Illustrates the creation of a text-only tab bar with four navigation tabs using TDBottomTabBar. Similar to the 3-tab example, it relies on an `onTapTab` function for handling user interactions. Dependencies include the TDesign Flutter package and BuildContext.

```flutter
Widget _textTypeTabBar4tabs(BuildContext context) {
    return TDBottomTabBar(TDBottomTabBarBasicType.text,
        useVerticalDivider: false,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
        ]);
  }
```

--------------------------------

### Card Top Style NoticeBar Example

Source: https://tdesign.tencent.com/flutter/components/notice-bar

Shows how to integrate the TDNoticeBar into a card-like structure, specifically positioned at the top. This example includes custom container styling with borders, shadows, and rounded corners to mimic a card element.

```dart
Widget _cardNoticeBar(BuildContext context) {
  var size = MediaQuery.of(context).size;
  return Container(
    margin: const EdgeInsets.symmetric(horizontal: 16),
    decoration: BoxDecoration(
      color: TDNoticeBarStyle.generateTheme(context).backgroundColor,
      borderRadius: const BorderRadius.all(Radius.circular(9)),
      boxShadow: const [
        BoxShadow(
          color: Color(0x0d000000),
          blurRadius: 8,
          spreadRadius: 2,
          offset: Offset(0, 2),
        ),
        BoxShadow(
          color: Color(0x0f000000),
          blurRadius: 10,
          spreadRadius: 1,
          offset: Offset(0, 8),
        ),
        BoxShadow(
          color: Color(0x1a000000),
          blurRadius: 5,
          spreadRadius: -3,
          offset: Offset(0, 5),
        ),
      ],
    ),
    child: Column(
      children: [
        Container(
          width: size.width - 32,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(12)),
          ),
          clipBehavior: Clip.hardEdge,
          child: const TDNoticeBar(
            context: '这是一条普通的通知信息',
            prefixIcon: TDIcons.error_circle_filled,
            suffixIcon: TDIcons.chevron_right,
          ),
        ),
        Container(
          height: 150,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(12)),
          ),
        )
      ],
    ),
  );
}
```

--------------------------------

### Flutter Icon-Text Tab Bar Example (4 Tabs)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Provides an example of an icon-text tab bar with four tabs using TDBottomTabBar. It shows how to assign selected and unselected icons along with text labels for each tab. This snippet assumes the availability of `_selectedIcon` and `_unSelectedIcon` variables. Dependencies include the TDesign Flutter package and BuildContext.

```flutter
Widget _iconTextTypeTabBar4tabs(BuildContext context) {
    return TDBottomTabBar(TDBottomTabBarBasicType.iconText,
        useVerticalDivider: false,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签',
            selectedIcon: _selectedIcon,
            unselectedIcon: _unSelectedIcon,
            onTap: () {
              onTapTab(context, '标签1');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签',
            selectedIcon: _selectedIcon,

```

--------------------------------

### Flutter TDCellGroup Card Theme Example

Source: https://tdesign.tencent.com/flutter/components/Cell

展示了如何使用 TDCellGroup 组件并设置其主题为 cardTheme，以创建卡片风格的单元格组。此示例依赖于 TDCellGroup 和 TDCell 组件。

```dart
Widget _buildCard(BuildContext context) {
  return const TDCellGroup(
    theme: TDCellGroupTheme.cardTheme,
    cells: [
      TDCell(arrow: true, title: '单行标题'),
      TDCell(arrow: true, title: '单行标题', required: true),
      TDCell(arrow: true, title: '单行标题'),
    ],
  );
}
```

--------------------------------

### TDBottomTabBar with Text Tabs (Flutter)

Source: https://tdesign.tencent.com/flutter/components/tab-bar

Demonstrates a TDBottomTabBar configured for text-based tabs. Each tab has a text label and an onTap action. This example shows a basic setup for text navigation.

```dart
TDBottomTabBar(TDBottomTabBarBasicType.text,
        useVerticalDivider: true,
        navigationTabs: [
          TDBottomTabBarTabConfig(
            tabText: '标签', 
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签', 
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签', 
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
          TDBottomTabBarTabConfig(
            tabText: '标签', 
            onTap: () {
              onTapTab(context, '标签2');
            },
          ),
        ]);
  }
```
```

--------------------------------

### TDUpload: Single File Upload Example

Source: https://tdesign.tencent.com/flutter/components/upload

Demonstrates a basic single file upload using the TDUpload widget. It handles file selection, cancellation, errors, and validation.

```dart
Widget _uploadSingle(BuildContext context) {
    return wrapDemoContainer('单选上传',
        child: TDUpload(
          files: files1,
          onClick: onClick,
          onCancel: onCancel,
          onError: print,
          onValidate: print,
          onChange: ((files, type) => onValueChanged(files1, files, type)),
        ));
  }
```

--------------------------------

### Handle onTap Event for TDRangeSlider in Flutter

Source: https://tdesign.tencent.com/flutter/components/slider

Shows how to implement the `onTap` event for a double-handle TDRangeSlider. This event captures the tap position (start or end), the tap offset, and the value at the tap point. The UI is updated to reflect these details.

```dart
  Widget _buildOnTapDoubleHandle(BuildContext context) {
    final displayRangeDataNotifier = ValueNotifier(
      DisplayRangeData(
        currentPosition: Position.start,
        currentTapValue: 40.0,
        tapOffset: null,
      ),
    );

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ValueListenableBuilder(
          valueListenable: displayRangeDataNotifier,
          builder: (context, data, child) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Position: ${data.currentPosition}'),
                const SizedBox(width: 10),
                Text('Value: ${data.currentTapValue.toStringAsFixed(1)}'),
                const SizedBox(width: 10),
                if (data.tapOffset != null)
                  Text(
                      'Tap at (${data.tapOffset!.dx.toStringAsFixed(0)}, ${data.tapOffset!.dy.toStringAsFixed(0)})'),
              ],
            );
          },
        ),
        const SizedBox(height: 10),
        TDRangeSlider(
          sliderThemeData: TDSliderThemeData(context: context, min: 0, max: 100, showThumbValue: true),
          leftLabel: '0',
          rightLabel: '100',
          value: const RangeValues(10, 60),
          onChanged: (value) {},
          onTap: (position, offset, value) {
            displayRangeDataNotifier.value = DisplayRangeData(
              currentPosition: position,
              currentTapValue: value,
              tapOffset: offset,
            );
            print('onTap offset: $offset, value: $value');
          },
        ),
      ],
    );
  }

```

--------------------------------

### 在文件中引入 TDesign Flutter

Source: https://tdesign.tencent.com/flutter/getting-started

在需要使用 TDesign Flutter 组件的文件顶部，引入 `tdesign_flutter.dart`。这个文件暴露了所有以 `td` 前缀开头的类。

```dart
import 'package:tdesign_flutter/tdesign_flutter.dart'; // 组件库相关的，只需要引入这个文件，里面暴露td前缀所有需要的类
```

--------------------------------

### Handle onThumbTextTap Event for TDRangeSlider in Flutter (Partial)

Source: https://tdesign.tencent.com/flutter/components/slider

This snippet demonstrates the setup for handling the `onThumbTextTap` event on a TDRangeSlider. It includes the UI structure to display tap information, but the actual `onThumbTextTap` implementation for the range slider is incomplete in the provided text.

```dart
  Widget _buildOnThumbTextTapDoubleHandle(BuildContext context) {
    final displayRangeDataNotifier = ValueNotifier(
      DisplayRangeData(
        currentPosition: Position.start,
        currentTapValue: 40.0,
        tapOffset: null,
      ),
    );

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ValueListenableBuilder(
          valueListenable: displayRangeDataNotifier,
          builder: (context, data, child) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Position: ${data.currentPosition}'),

```

--------------------------------

### Flutter SDK版本依赖覆盖配置

Source: https://tdesign.tencent.com/flutter/faq

当使用特定版本的TDesign Flutter或Flutter SDK时，可能需要通过`pubspec.yaml`文件配置`dependency_overrides`来解决版本兼容性问题。这确保了`tdesign_flutter_adaptation`和`image_picker`等库与当前项目环境的匹配。

```yaml
dependency_overrides:
  tdesign_flutter_adaptation: 3.16.0
  image_picker: 1.0.8
```

```yaml
dependency_overrides:
  tdesign_flutter_adaptation: 3.32.0
  image_picker: 1.1.2
```

--------------------------------

### Configure SideBar with Badges in Flutter

Source: https://tdesign.tencent.com/flutter/components/side-bar

This snippet shows how to configure a TDSideBar in Flutter, including adding badges of different types (redPoint, message) to specific items. It uses MediaQuery to get the screen height and a PageView for content display, with `NeverScrollableScrollPhysics` to disable direct scrolling of the PageView.

```dart
list[1].badge = const TDBadge(TDBadgeType.redPoint);
    list[2].badge = const TDBadge(
      TDBadgeType.message,
      count: '8',
    );

    void setCurrentValue(int value) {
      _pageController.jumpToPage(value);
      if (currentValue != value) {
        currentValue = value;
      }
    }

    var demoHeight = MediaQuery.of(context).size.height;

    return Row(
      children: [
        SizedBox(
          width: 110,
          child: TDSideBar(
            height: demoHeight,
            style: TDSideBarStyle.normal,
            value: currentValue,
            controller: _sideBarController,
            children: list
                .map((ele) => TDSideBarItem(
                    label: ele.label ?? '',
                    badge: ele.badge,
                    value: ele.value,
                    icon: ele.icon))
                .toList(),
            onSelected: setCurrentValue,
          ),
        ),
        Expanded(
            child: SizedBox(
          height: demoHeight,
          child: PageView(
            controller: _pageController,
            scrollDirection: Axis.vertical,
            children: pages,
            physics: const NeverScrollableScrollPhysics(),
          ),
        ))
      ],
    );
  }
```
```

--------------------------------

### 加载多套主题

Source: https://tdesign.tencent.com/flutter/getting-started

开启多主题功能，并通过 `rootBundle.loadString` 加载 assets 目录下的 `theme.json` 文件，然后使用 `TDThemeData.fromJson` 创建主题数据，并将其添加到 `MaterialApp` 的 `theme` 中。

```dart
// 开启多套主题功能
TDTheme.needMultiTheme();

var jsonString = await rootBundle.loadString('assets/theme.json');
var _themeData = TDThemeData.fromJson('green', jsonString);
// ……
MaterialApp(
  title: 'TDesign Flutter Example',
  theme: ThemeData(
    extensions: [_themeData]
  ),
  home: MyHomePage(title: 'TDesign Flutter 组件库'),
);
```

--------------------------------

### 注入国际化资源代理

Source: https://tdesign.tencent.com/flutter/getting-started

创建 `IntlResourceDelegate` 实例，并通过 `TDTheme.setResourceBuilder` 将其注入。`needAlwaysBuild: true` 确保在需要时始终构建代理。国际化需要在 `MaterialApp` 初始化后生效。

```dart
var delegate = IntlResourceDelegate(context);
return MaterialApp(
  home: Builder(
    builder: (context) {
      // 设置文案代理,国际化需要在MaterialApp初始化完成之后才生效,而且需要每次更新context
      TDTheme.setResourceBuilder((context) => delegate..updateContext(context), needAlwaysBuild: true);
      return MyHomePage(
        title: AppLocalizations.of(context)?.components ?? '',
      );
    },
  ),
  // 设置国际化处理
  locale: locale,
  supportedLocales: AppLocalizations.supportedLocales,
  localizationsDelegates: AppLocalizations.localizationsDelegates,
);
```

--------------------------------

### Flutter TDRangeSlider: Disabled Double Handle with Scale

Source: https://tdesign.tencent.com/flutter/components/slider

This example presents a disabled TDRangeSlider featuring a scale. The 'showScaleValue' property is active, and 'divisions' are set. Similar to other disabled examples, the lack of an 'onChanged' callback indicates it's not user-interactive.

```flutter
Widget _buildDisableDoubleHandleWithScale(BuildContext context) {
    return TDRangeSlider(
      sliderThemeData: TDSliderThemeData(
        context: context,
        showScaleValue: true,
        divisions: 5,
        min: 0,
        max: 100,
        scaleFormatter: (value) => value.toInt().toString(),
      ),
      value: const RangeValues(20, 60),
    );
  }
```

--------------------------------

### TDesign Flutter FAB: 图标加文字悬浮按钮

Source: https://tdesign.tencent.com/flutter/components/fab

展示一个包含图标和文字的TDesign Flutter悬浮按钮（TDFab）。适用于需要更具体操作说明的场景。该组件依赖于tdesign_flutter库。

```dart
Widget _buildTextFab(BuildContext context) {
    return _buildRowDemo([
      const TDFab(
        theme: TDFabTheme.primary,
        text: 'Floating',
      )
    ]);
  }
```

--------------------------------

### NoticeBar with Entrance Button Examples

Source: https://tdesign.tencent.com/flutter/components/notice-bar

Shows how to include interactive elements like buttons or navigation icons as the 'right' content in the TDNoticeBar. This allows for direct actions related to the notice.

```dart
Widget _entranceNoticeBar1(BuildContext context) {
  return const TDNoticeBar(
    context: '这是一条普通的通知信息',
    prefixIcon: TDIcons.error_circle_filled,
    right: TDButton(
      text: '文字按钮',
      type: TDButtonType.text,
      theme: TDButtonTheme.primary,
      size: TDButtonSize.extraSmall,
      height: 22,
      padding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
    ),
  );
}
```

```dart
Widget _entranceNoticeBar2(BuildContext context) {
  return const Padding(
    padding: EdgeInsets.only(top: 16),
    child: TDNoticeBar(
      context: '这是一条普通的通知信息',
      prefixIcon: TDIcons.error_circle_filled,
      suffixIcon: TDIcons.chevron_right,
    ),
  );
}
```

--------------------------------

### TDInput Label Outside Card Style Example

Source: https://tdesign.tencent.com/flutter/components/Input

Shows how to position the label text outside and above the input field when using the card style (`TDCardStyle.topText`). This example also includes a clear button and an icon button with a tap handler for additional functionality.

```dart
Widget _labelOutStyle(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(top: 16, bottom: 24),
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      child: TDInput(
        type: TDInputType.cardStyle,
        cardStyle: TDCardStyle.topText,
        width: MediaQuery.of(context).size.width - 32,
        cardStyleTopText: '标签文字',
        controller: controller[22],
        hintText: '请输入文字',
        rightBtn: Icon(
          TDIcons.error_circle_filled,
          color: TDTheme.of(context).fontGyColor3,
        ),
        onBtnTap: () {
          TDToast.showText('点击右侧按钮', context: context);
        },
        onChanged: (text) {
          setState(() {});
        },
        onClearTap: () {
          controller[22].clear();
          setState(() {});
        },
      ),
    );
  }
```

--------------------------------

### Custom Styled NoticeBar Example

Source: https://tdesign.tencent.com/flutter/components/notice-bar

Illustrates how to customize the appearance of the TDNoticeBar using the 'style' property. This example changes the background color.

```dart
Widget _customNoticeBar(BuildContext context) {
  return TDNoticeBar(
    context: '这是一条普通的通知信息',
    prefixIcon: TDIcons.notification,
    suffixIcon: TDIcons.chevron_right,
    style: TDNoticeBarStyle(backgroundColor: TDTheme.of(context).grayColor3),
  );
}
```

--------------------------------

### TDesign Flutter FAB: 纯图标悬浮按钮

Source: https://tdesign.tencent.com/flutter/components/fab

展示一个纯图标的TDesign Flutter悬浮按钮（TDFab）。该组件用于需要一个可点击图标来触发操作的场景。它依赖于tdesign_flutter库。

```dart
Widget _buildPureIconFab(BuildContext context) {
    return _buildRowDemo([
      const TDFab(
        theme: TDFabTheme.primary,
      )
    ]);
  }
```

--------------------------------

### TDTabBar: Card Outline Style Example

Source: https://tdesign.tencent.com/flutter/components/tabs

This example illustrates how to use the card outline style for the TDTabBar. The outlineType is set to TDTabBarOutlineType.card, and the indicator is not shown.

```dart
Widget _buildItemWithOutlineCard(BuildContext context) {
    var tabs = [
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
    ];
    return TDTabBar(
        tabs: tabs,
        outlineType: TDTabBarOutlineType.card,
        controller: TabController(length: 4, vsync: this),
        backgroundColor: Colors.white,
        showIndicator: false);
  }
```

--------------------------------

### TDTabBar: Large Size Example

Source: https://tdesign.tencent.com/flutter/components/tabs

This example shows how to create a TDTabBar with a large size. Each TDTab is explicitly set to TDTabSize.large, and the TDTabBar is configured for display.

```dart
Widget _buildItemWithSizeBig(BuildContext context) {
    var tabs = [
      const TDTab(
        text: '大尺寸',
        size: TDTabSize.large,
      ),
      const TDTab(
        text: '选项',
        size: TDTabSize.large,
      ),
      const TDTab(
        text: '选项',
        size: TDTabSize.large,
      ),
      const TDTab(
        text: '选项',
        size: TDTabSize.large,
      ),
    ];
    return TDTabBar(
        tabs: tabs,
        controller: TabController(length: 4, vsync: this),
        backgroundColor: Colors.white,
        showIndicator: true);
  }
```

--------------------------------

### Flutter Basic TDesign Input Field

Source: https://tdesign.tencent.com/flutter/components/Input

Demonstrates a basic TDesign Input widget with a label, hint text, and clear functionality. It uses a TextEditingController to manage input.

```dart
Widget _basicTypeBasic(BuildContext context) {
    return Column(
      children: [
        TDInput(
          leftLabel: 'Label Text',
          controller: controller[0],
          backgroundColor: Colors.white,
          hintText: 'Please enter text',
          onChanged: (text) {
            setState(() {});
          },
          onClearTap: () {
            controller[0].clear();
            setState(() {});
          },
        ),
        const SizedBox(
          height: 16,
        )
      ],
    );
  }
```

--------------------------------

### TDTabBar: Capsule Outline Style Example

Source: https://tdesign.tencent.com/flutter/components/tabs

This example demonstrates how to apply a capsule outline style to the TDTabBar. The outlineType property is set to TDTabBarOutlineType.capsule, and the indicator is hidden.

```dart
Widget _buildItemWithOutlineNormal(BuildContext context) {
    var tabs = [
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
      const TDTab(
        text: '选项',
      ),
    ];
    return TDTabBar(
        tabs: tabs,
        outlineType: TDTabBarOutlineType.capsule,
        controller: TabController(length: 4, vsync: this),
        backgroundColor: Colors.white,
        showIndicator: false);
  }
```

--------------------------------

### Flutter Horizontal Checkbox Example

Source: https://tdesign.tencent.com/flutter/components/checkbox

Shows how to configure checkboxes horizontally using TDCheckboxGroupContainer with direction set to Axis.horizontal. This example includes circular checkboxes with specific styling and spacing.

```dart
Widget _horizontalCheckbox(BuildContext context) {
    return TDCheckboxGroupContainer(
      selectIds: const ['1'],
      direction: Axis.horizontal,
      directionalTdCheckboxes: const [
        TDCheckbox(
          id: '0',
          title: '多选标题',
          style: TDCheckboxStyle.circle,
          insetSpacing: 12,
          showDivider: false,
        ),
        TDCheckbox(
          id: '1',
          title: '多选标题',
          style: TDCheckboxStyle.circle,
          insetSpacing: 12,
          showDivider: false,
        ),
        TDCheckbox(
          id: '2',
          title: '上限四字',
          style: TDCheckboxStyle.circle,
          insetSpacing: 12,
          showDivider: false,
        ),
      ],
    );
  }
```

--------------------------------

### Flutter TDImage Square Type Example

Source: https://tdesign.tencent.com/flutter/components/image

Provides an example of the TDImage widget set to the square type. This type displays the image in a square aspect ratio, clipping excess parts if necessary.

```dart
Widget _imageSquare(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: TDText(
            '方形',
            font: TDTheme.of(context).fontBodyMedium,
            textColor: TDTheme.of(context).fontGyColor2.withOpacity(0.6),
          ),
        ),
        const TDImage(
          assetUrl: 'assets/img/image.png',
          type: TDImageType.square,
        ),
      ],
    );
  }
```

--------------------------------

### Import TDesign Flutter Components

Source: https://tdesign.tencent.com/flutter/components/icon

This snippet shows how to import all TDesign Flutter components into your project. It's a necessary step before using any TDesign widgets.

```dart
import 'package:tdesign_flutter/tdesign_flutter.dart';
```