TDesign Logo

License Version Downloads Ask DeepWiki

English | įŽ€äŊ“中文

TDesign Flutter is a cross-platform UI component library based on Tencent's design system. Built with the Flutter framework, it enables rapid development of beautiful, consistent mobile/web applications with rich pre-built components and theme customization capabilities, supporting iOS, Android, and Web platforms.

🎉 Features

  • Provides Flutter UI component library following TDesign design specifications
  • Supports theme customization to match your App's design style
  • Includes a comprehensive Icon library with custom replacement support
  • Defines color groups according to TDesign specifications (viewable in TColors)
  • Real-time preview of default color values through the color declaration class

📱 Preview

Android: Scan the QR code to download the preview app

Download link: tdesign-flutter-example.apk

iOS: Run the project to preview

https://github.com/Tencent/tdesign-flutter/tree/main/tdesign-component

🚀 Quick Start

Upgrading from 0.2.7? Read the 1.0 migration guide (Chinese) before changing the dependency. Version 1.0 contains breaking API and behavior changes.

Requires Flutter â‰Ĩ 3.32.0 and Dart â‰Ĩ 3.8.0.

Add tdesign_flutter: ^1.0.0 to pubspec.yaml and run flutter pub get. See Getting started for the complete setup.

Minimal Import

import 'package:tdesign_flutter/tdesign_flutter.dart';

The TDesign entry point re-exports Flutter Material widgets, so the same import provides MaterialApp, Scaffold, Text, and TDesign components.

Minimal Usage

Add the button to the widget tree of an existing page:

const TButton(child: Text('Button'))

No additional initialization or theme configuration is required. Omitting onPressed leaves the button disabled.

📚 Documentation

The detailed guides below are currently in Chinese.

🔗 More Examples

For more usage examples, refer to example/lib/page/

🌐 TDesign Component Libraries

TDesign provides component libraries for other platforms and frameworks:

Platform Repository
Vue 2.x tdesign-vue
Vue 3.x tdesign-vue-next
React tdesign-react
Vue 3.x Mobile tdesign-mobile-vue
React Mobile tdesign-mobile-react
WeChat Miniprogram tdesign-miniprogram

🤝 Contributing

Contributions are welcome! Please read the contributing guidelines before submitting your Pull Request.

đŸ’Ŧ Feedback

Create GitHub Issues or scan the QR code to join our user groups:

🙏 Acknowledgements

TDesign Flutter depends on the following component libraries. We appreciate the authors for their open-source contributions:

📄 License

TDesign Flutter is licensed under the MIT License.

Libraries

tdesign_flutter