ホームUI ComponentsTencent/tdesign-flutter
// archived 2026-04-10
Tencent

tdesign-flutter

Mobile#Flutter#UI Components#Dart#Design System
GitHub で見る →
1,116

// 概要

TDesign Flutter は、Tencent のデザインシステムに基づいたモバイルおよび Web アプリケーション向けのクロスプラットフォーム UI コンポーネントライブラリです。iOS、Android、Web 全体で一貫したデザインを実現するために、豊富なコンポーネント群、テーマカスタマイズツール、アイコンサポートを提供します。また、ダークモードやカスタムテーマ生成、Flutter の国際化機能との統合といった高度な機能もサポートしています。

// 技術解説

TDesign Flutter は、Tencent のデザインシステム仕様を実装した Flutter フレームワークベースのクロスプラットフォーム UI コンポーネントライブラリです。Android、iOS、および Web 全体で一貫した高品質な UI 開発を実現するため、構築済みのコンポーネント群と柔軟なテーマカスタマイズツールを提供します。このライブラリは、構造化されたテーマ設定システムを通じてデザインの一貫性を重視しており、開発者は JSON や専用のジェネレーターを使用して色、タイポグラフィ、スタイルを管理できます。また、使いやすさとダークモードや国際化といった複雑な要件への対応を両立させています。

// 主要ハイライト

01
TDesign のデザイン仕様に厳密に従った包括的な Flutter UI コンポーネントライブラリを提供します。
02
色、フォント、コンポーネントスタイル用の JSON 設定ファイルを通じて、柔軟なテーマカスタマイズをサポートします。
03
カスタムデザイントークンの作成とエクスポートを簡素化する専用の Theme Generator ツールが含まれています。
04
ダークモードを組み込みでサポートしており、ライトモードとダークモードの配色をシームレスに切り替え可能です。
05
必要に応じて簡単に統合および置換できる堅牢なアイコンライブラリを備えています。
06
TDResourceDelegate クラスを拡張してローカライズされたテキストリソースを注入することで、国際化に対応できます。

// ユースケース

01
一貫性のあるクロスプラットフォームなモバイルおよび Web アプリケーションの迅速な開発
02
JSON 設定や TDesign Theme Generator を使用したアプリケーションテーマのカスタマイズ
03
Flutter プロジェクト内でのダークモードおよび国際化の実装

// クイックスタート

TDesign Flutter を使い始めるには、pubspec.yaml ファイルに依存関係 'tdesign_flutter: ^0.2.7' を追加し、'import 'package:tdesign_flutter/tdesign_flutter.dart';' を使用してパッケージをインポートします。その後、TDThemeData を MaterialApp に注入してアプリケーションのテーマを設定し、ウィジェットツリー内でライブラリのコンポーネントを利用できます。