https://github.com/rss1102/tdesign-flutter-re
https://github.com/rss1102/tdesign-flutter-re
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rss1102/tdesign-flutter-re
- Owner: RSS1102
- License: mit
- Created: 2025-09-02T10:45:23.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-02T10:45:39.000Z (10 months ago)
- Last Synced: 2025-10-05T07:53:30.176Z (9 months ago)
- Language: Dart
- Size: 42.7 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
English | [įŽäŊä¸æ](README_zh_CN.md)
Tencent TDesign UI component library of Flutter, suitable for use in mobile projects.
# đ Features
- Provides Flutter UI component library in TDesign design style
- Support customizing themes according to App design style
- Provides commonly used Icon library and supports customized replacement
- Define color groups according to the TDesign specification, which can be viewed in TDColors to facilitate the adaptation of components to the TDesign specification.
- The color value declaration class can add default colors and view the default display effect of color values in real time.
# đ¨ Usage
- SDK dependency version
```yaml
dart: ">=2.19.0 <4.0.0"
flutter: ">=3.7.0"
```
- Add the dependency in `pubspec.yaml`
```yaml
dependencies:
tdesign_flutter: ^0.0.6
```
- Import at the top of your file:
```dart
import 'package:tdesign_flutter/tdesign_flutter.dart';
```
- You can configure theme styles such as colors, font sizes, font styles, corner radius, and shadows through a json file.
Retrieve theme data using `TDTheme.of(context)` or `TDTheme.defaultData()`. It is recommended
that components use `TDTheme.of(context)` unless the component does not need to follow local themes,
in which case `TDTheme.defaultData()` can be used.
Examples of using colors, fonts, and corner radius:
```dart
TDTheme.of(context).brandNormalColor
TDTheme.defaultData().fontBodyLarge
```
- TDesign's icons do not follow the theme, they are all in ttf format, usage examples:
```dart
Icon(TDIcons.activity)
```
- For more use examples, please refer to [example/lib/page](tdesign-component/example/lib/page)
# TDesign component libraries
TDesign also provides component libraries for other platforms and frameworks.
- component library for Vue 2.x : [tdesign-vue](https://github.com/Tencent/tdesign-vue)
- component library for Vue 3.x : [tdesign-vue-next](https://github.com/Tencent/tdesign-vue-next)
- component library for React : [tdesign-react](https://github.com/Tencent/tdesign-react)
- component library for Vue 3.x Mobile : [tdesign-mobile-vue](https://github.com/Tencent/tdesign-mobile-vue)
- component library for React Mobile : [tdesign-mobile-react](https://github.com/Tencent/tdesign-mobile-react)
- component library for Wechat miniprogram : [tdesign-miniprogram](https://github.com/Tencent/tdesign-miniprogram)
# Acknowledgements
TDesign Flutter depends on the following component libraries. We appreciate the authors for their open-source contributions:
- [easy_refresh](https://pub-web.flutter-io.cn/packages/easy_refresh)
- [flutter_swiper](https://pub-web.flutter-io.cn/packages/flutter_swiper)
- [flutter_slidable](https://pub-web.flutter-io.cn/packages/flutter_slidable)
- [image_picker](https://pub-web.flutter-io.cn/packages/image_picker)
# Contributing
Contributing is welcome. Read [guidelines for contributing](CONTRIBUTING.md) before submitting your [Pull Request](https://github.com/Tencent/tdesign-flutter/pulls).
# Feedback
Create your [Github issues](https://github.com/Tencent/tdesign-flutter/issues) or scan the QR code below to join our user groups
# License
The MIT License. Please see [the license file](LICENSE) for more information.