[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9434":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},9434,"tdesign-flutter","Tencent\u002Ftdesign-flutter","Tencent","A Flutter UI components lib for TDesign.","https:\u002F\u002Ftdesign.tencent.com\u002Fflutter",null,"Dart",1146,181,10,72,0,1,6,11,4,19.78,"MIT License",false,"develop",true,[],"2026-06-12 02:02:07","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftdesign.tencent.com\u002F\" target=\"_blank\">\n    \u003Cimg alt=\"TDesign Logo\" width=\"200\" src=\"https:\u002F\u002Ftdesign.gtimg.com\u002Fsite\u002FTDesign.png\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Fblob\u002Fmain\u002FLICENSE\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Ftencent\u002Ftdesign-flutter\" alt=\"License\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Ftdesign_flutter\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Ftdesign_flutter\" alt=\"Version\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fpub.dev\u002Fpackages\u002Ftdesign_flutter\u002Fscore\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fdm\u002Ftdesign_flutter\" alt=\"Downloads\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdeepwiki.com\u002FTencent\u002Ftdesign-flutter\">\n    \u003Cimg src=\"https:\u002F\u002Fdeepwiki.com\u002Fbadge.svg\" alt=\"Ask DeepWiki\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\nEnglish | [简体中文](.\u002FREADME_zh_CN.md)\n\n**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\u002Fweb applications with rich pre-built components and theme customization capabilities, supporting iOS, Android, and Web platforms.\n\n## 🎉 Features\n\n- Provides Flutter UI component library following TDesign design specifications\n- Supports theme customization to match your App's design style\n- Includes a comprehensive Icon library with custom replacement support\n- Defines color groups according to TDesign specifications (viewable in `TColors`)\n- Real-time preview of default color values through the color declaration class\n\n## 📱 Preview\n\n**Android**: Scan the QR code to download the preview app\n\n\u003Cimg width=\"200\" src=\"https:\u002F\u002Ftdesign.tencent.com\u002Fflutter\u002Fassets\u002Fqrcode\u002Ft_apk_qrcode_0_2_7.png\" \u002F>\n\nDownload link: [tdesign-flutter-example.apk](https:\u002F\u002Ftdesign.gtimg.com\u002Fflutter\u002Ftdesign_flutter_example.apk)\n\n**iOS**: Run the project to preview\n\n[https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Ftree\u002Fmain\u002Ftdesign-component](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Ftree\u002Fmain\u002Ftdesign-component)\n\n## 🔨 Installation\n\n### SDK Requirements\n\n```yaml\ndart: \">=3.2.6 \u003C4.0.0\"\nflutter: \">=3.16.0\"\n```\n\n### Add Dependency\n\nAdd the following to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  tdesign_flutter: ^0.2.7\n```\n\n### Import\n\n```dart\nimport 'package:tdesign_flutter\u002Ftdesign_flutter.dart';\n```\n\n## 📖 Usage\n\n### Theme Configuration\n\nConfigure theme styles (colors, font sizes, font styles, corner radius, shadows) through JSON files. Retrieve theme data using `TTheme.of(context)` or `TTheme.defaultData()`.\n\n> **Recommendation**: Use `TTheme.of(context)` for components that should follow the local theme. Only use `TTheme.defaultData()` for components that don't need to follow local themes.\n\n```dart\n\u002F\u002F Colors\nTTheme.of(context).brandNormalColor\n\n\u002F\u002F Fonts\nTTheme.defaultData().fontBodyLarge\n```\n\n### Icons\n\nTDesign icons are in TTF format and do not follow the theme:\n\n```dart\nIcon(TIcons.activity)\n```\n\n## 🎨 Custom Theme\n\nTDesign Flutter provides two flexible theming approaches:\n\n### Method 1: JSON Configuration\n\nDefine theme properties directly in JSON format:\n\n```dart\nString themeConfig = '''\n{\n  \"myTheme\": {\n    \"color\": {\n      \"brandNormalColor\": \"#D7B386\"\n    },\n    \"font\": {\n      \"fontBodyMedium\": {\n        \"size\": 40,\n        \"lineHeight\": 55\n      }\n    }\n  }\n}\n''';\n\nMaterialApp(\n  theme: ThemeData(\n    extensions: [TThemeData.fromJson('myTheme', themeConfig)!],\n  ),\n  \u002F\u002F ...\n)\n```\n\n> For all available theme keys, see [t_default_theme.dart](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Fblob\u002Fdevelop\u002Ftdesign-component\u002Flib\u002Fsrc\u002Ftheme\u002Ft_default_theme.dart)\n\n### Method 2: Theme Generator (Recommended)\n\nIf you don't want to customize too many colors but still want a beautiful custom theme, the \"Theme Generator\" is a great choice.\n\n> **Note**: Since [v0.2.6](https:\u002F\u002Ftdesign.tencent.com\u002Fflutter\u002Fchangelog), the Theme Generator supports \"Dark Mode\". See [Dark Mode](https:\u002F\u002Ftdesign.tencent.com\u002Fflutter\u002Fdark-mode) for details.\n\n\u003Cvideo controls width=\"100%\">\n  \u003Csource src=\"https:\u002F\u002Ftdesign.gtimg.com\u002Fsite\u002Ftheme\u002Fdemo-cn.mp4\" type=\"video\u002Fmp4\" \u002F>\n\u003C\u002Fvideo>\n\n1. **Generate**: Visit [TDesign Theme Generator](https:\u002F\u002Ftdesign.tencent.com\u002Fvue\u002Fcustom-theme), click the theme generator below, select your desired colors in the generator on the right, and click download.\n\n2. **Convert**: You will get a `theme.css` file. Place it in `tdesign-component\u002Fexample\u002Fshell\u002Ftheme\u002F`, modify `css2JsonTheme.dart` with your file name, theme name, and output path to generate a `theme.json` file.\n\n![img.png](https:\u002F\u002Ftdesign.tencent.com\u002Fflutter\u002Fassets\u002Fdart_modify.png)\n\n3. **Apply**: Load the theme JSON into `TTheme`, and your beautiful custom theme is ready.\n\n```dart\n\u002F\u002F Enable multi-theme support\nTTheme.needMultiTheme();\n\nvar jsonString = await rootBundle.loadString('assets\u002Ftheme.json');\nvar _themeData = TThemeData.fromJson('green', jsonString);\n\u002F\u002F ...\nMaterialApp(\n  title: 'TDesign Flutter Example',\n  theme: ThemeData(\n    extensions: [_themeData]\n  ),\n  home: MyHomePage(title: 'TDesign Flutter Components'),\n);\n```\n\n### Dark Mode Support\n\nTheme configurations generated by the Theme Generator support dark mode colors by default.\n\n```dart\n\u002F\u002F Enable multi-theme support\nTTheme.needMultiTheme();\n\u002F\u002F ...\n\u002F\u002F Set three properties in MaterialApp as follows. If you have custom theme properties, you can modify them using the copyWith() method.\n\u002F\u002F Note: Theme switching needs to be implemented by the business side, e.g., using Provider. See tdesign-flutter\u002Ftdesign-component\u002Fexample\u002Flib\u002Fcomponent_test\u002Fdark_test.dart for reference.\nMaterialApp(\n  theme: _themeData.systemThemeDataLight,\n  darkTheme: _themeData.systemThemeDataDark,\n  themeMode: themeModeProvider.themeMode,\n  \u002F\u002F ...\n)\n```\n\n## 🌍 Internationalization\n\nTDesign Flutter does not have built-in internationalization, but supports integration with Flutter's i18n capabilities. You can extend the `TResourceDelegate` class, which abstracts all text resources inside the components, override the methods to get text for internationalization, and inject it via `TTheme.setResourceBuilder`.\n\n### Quick Setup\n\n1. **Override `TResourceDelegate` class:**\n\n```dart\n\u002F\u002F\u002F Internationalization resource delegate\nclass IntlResourceDelegate extends TResourceDelegate {\n  IntlResourceDelegate(this.context);\n\n  BuildContext context;\n\n  \u002F\u002F\u002F Internationalization requires updating context each time\n  updateContext(BuildContext context) {\n    this.context = context;\n  }\n\n  @override\n  String get cancel => AppLocalizations.of(context)!.cancel;\n\n  @override\n  String get confirm => AppLocalizations.of(context)!.confirm;\n}\n```\n\n2. **Inject `TResourceDelegate` class:**\n\n```dart\nvar delegate = IntlResourceDelegate(context);\nreturn MaterialApp(\n  home: Builder(\n    builder: (context) {\n      \u002F\u002F Set the text delegate. Internationalization only takes effect after MaterialApp is initialized, and context needs to be updated each time.\n      TTheme.setResourceBuilder((context) => delegate..updateContext(context), needAlwaysBuild: true);\n      return MyHomePage(\n        title: AppLocalizations.of(context)?.components ?? '',\n      );\n    },\n  ),\n  \u002F\u002F Set internationalization\n  locale: locale,\n  supportedLocales: AppLocalizations.supportedLocales,\n  localizationsDelegates: AppLocalizations.localizationsDelegates,\n);\n```\n\n3. For Flutter internationalization configuration, please refer to the official documentation: [Internationalizing Flutter apps](https:\u002F\u002Fdocs.flutter.dev\u002Fui\u002Faccessibility-and-internationalization\u002Finternationalization)\n\n## ❓ FAQ\n\n### Text Centering\n\n- **v0.1.4**: After Flutter 3.16, rendering engine changes caused font offset issues with `forceVerticalCenter`. Disable this by setting `kTextForceVerticalCenterEnable=false`.\n\n- **v0.1.5**: Adapted Chinese text centering for both Android and iOS. For other languages, customize by overriding `TTextPaddingConfig`'s `paddingRate` and `paddingExtraRate`. See `TTextPage` for usage.\n\n## 🔗 More Examples\n\nFor more usage examples, refer to [example\u002Flib\u002Fpage\u002F](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Ftree\u002Fdevelop\u002Ftdesign-component\u002Fexample\u002Flib\u002Fpage)\n\n## 🌐 TDesign Component Libraries\n\nTDesign provides component libraries for other platforms and frameworks:\n\n| Platform           | Repository                                                              |\n| ------------------ | ----------------------------------------------------------------------- |\n| Vue 2.x            | [tdesign-vue](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-vue)                   |\n| Vue 3.x            | [tdesign-vue-next](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-vue-next)         |\n| React              | [tdesign-react](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-react)               |\n| Vue 3.x Mobile     | [tdesign-mobile-vue](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-mobile-vue)     |\n| React Mobile       | [tdesign-mobile-react](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-mobile-react) |\n| WeChat Miniprogram | [tdesign-miniprogram](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-miniprogram)   |\n\n## 🤝 Contributing\n\nContributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) before submitting your [Pull Request](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Fpulls).\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=Tencent\u002Ftdesign-flutter\" \u002F>\n\u003C\u002Fa>\n\n## 💬 Feedback\n\nCreate [GitHub Issues](https:\u002F\u002Fgithub.com\u002FTencent\u002Ftdesign-flutter\u002Fissues) or scan the QR code to join our user groups:\n\n\u003Cimg src=\"https:\u002F\u002Ftdesign.tencent.com\u002Fflutter\u002Fassets\u002Fqrcode\u002Ffeedback.png\" width=\"200\" \u002F>\n\n## 🙏 Acknowledgements\n\nTDesign Flutter depends on the following component libraries. We appreciate the authors for their open-source contributions:\n\n- [easy_refresh](https:\u002F\u002Fpub.dev\u002Fpackages\u002Feasy_refresh)\n- [flutter_swiper](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_swiper)\n- [flutter_slidable](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_slidable)\n- [image_picker](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fimage_picker)\n\n## 📄 License\n\nTDesign Flutter is licensed under the [MIT License](LICENSE).\n","TDesign Flutter 是基于腾讯设计体系的跨平台UI组件库。该项目利用Flutter框架，提供了一系列美观且一致性的预构建UI组件和主题定制能力，支持iOS、Android以及Web平台的应用开发。核心功能包括遵循TDesign设计规范的UI组件库、灵活的主题自定义以适应不同应用的设计风格、丰富的图标库支持以及根据TDesign规范定义的颜色组。特别适合需要快速构建具有统一视觉风格的移动或网页应用程序场景使用。",2,"2026-06-11 03:22:37","top_language"]