简介

Flutter 跨平台框架自 2018 年开源以来，迅速发展，拥有大量用户。Flutter 采用自绘引擎，可以在不同平台上实现高性能、流畅的用户界面，用户体验出色。此外，Flutter 的跨平台特性使开发者只需编写一次代码，即可在多个平台上运行，减少开发和维护成本。Flutter 以其高效的开发流程、卓越的性能和跨平台能力，成为跨平台应用开发的首选框架。

TDesign作为一款诞生于腾讯内部开源、经过超 500 项内部业务检验的企业级设计体系，汇集了腾讯众多优秀组件库能力和设计研发经验。之前，TDesign 已经支持 Vue2、Vue Next、React 等业界主流技术栈，方便使用者快速开发桌面端、移动端以及小程序等多个版本的应用程序，从而更好地服务设计师和开发者，助力企业提升设计研发效能，为产品体验设计带来新的思路。

TDesignFlutter 不但拥有 Flutter 流畅的跨平台开发体验，而且拥有 TDesign 美观一致的设计资源。二者结合，开发者可以直接使用 TDesign 的组件构建 Flutter 应用，加快开发速度的同时，也确保了应用程序的一致性。在腾讯内部，TDesignFlutter 已支持多个产品线上稳定运行。

产品特性

完整

支持了 Vue 2、Vue 3、React 和移动端 Vue 3、微信小程序的开发，其他技术栈如 Augular、Flutter 正在开发中
TDesign 包含丰富可复用的设计组件资源，如色彩体系、文字系统、动效设计等，覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件
提供辅助设计工具如 Sketch 设计插件，也支持在腾讯 CoDesign、即时设计、Pixso、墨刀等市面常用设计工具中使用

一致

拥有统一的设计价值观和视觉风格，帮助产品在跨端设计和开发过程中保持一致的产品使用体验
各技术栈产物 API 定义和实现保持一致，在构建统一 / 多端覆盖 / 跨技术栈的前端应用时更有优势

易用

提炼不同业务、场景的设计经验，提供通用的设计指南以降低使用门槛
支持使用者通过 Design Token 对设计风格进行扩展
提供 Starter Kit 帮助使用者快速上手

组件概览

TDesignFlutter 已上线 Text、Button、Input 等 29 个基础组件。详情可查阅：https://tdesign.tencent.com/flutter/overview

此外，Collapse (折叠面板)、Upload (上传工具) 等组件已在开发测试中，相信很快可以和大家见面。

常用组件

Text:

支持系统 Text 所有属性，可无缝切换。中文居中处理，并将常用属性扁平化，使用更加方便。

Button:

丰富的主题样式，统一的设计规范。

Icon:

内容丰富的图标，使用 ttf 格式，简单易用，避免失真。

复杂组件:

完善的功能，统一的交互，易用的封装。

快速上手

简单使用

在 pubbspec.yaml 引入依赖。

  dependencies:
    tdesign_flutter: ^0.1.0

在文件头部引入：import 'package:tdesign_flutter/tdesign_flutter.dart';
然后就可以使用 TDesignFlutter 的组件了:

  TDText('测试文本'),
  TDButton(text: '演示按钮'`, theme: TDButtonTheme.primary,`),
  Icon(TDIcons.add_circle)

自定义主题

TDesignFlutter 提供自定义主题的能力，可通过 json 文件配置颜色 / 字体尺寸 / 字体样式 / 圆角 / 阴影等主题样式。通过 TDTheme.of (context) 或者 TDTheme.defaultData () 获取主题数据。

 TDTheme.of(context).brandNormalColor
 TDTheme.defaultData().fontBodyLarge

使用示例：

下列代码不设置特殊主题，使用 TDesingFlutter 默认主题：

TDText(
  '测试文本',
 textColor: TDTheme.of(context).brandNormalColor,
 font: TDTheme.of(context).fontBodyMedium,
),
const TDButton(
 text: '演示按钮',
 theme: TDButtonTheme.primary,
)

设置自定主题如下：

MaterialApp(
 theme: ThemeData(
 extensions: [TDThemeData.fromJson('test', testThemeConfig)!],
  )
 ……
)

String testThemeConfig = '''
  {
    "test": {
        "color": {
            "brandNormalColor": "#D7B386"
        },
        "font": {
            "fontBodyMedium": {
                "size": 40,
                "lineHeight": 55
            }
        }
    }
}
  ''';