Flutter UI组件插件thindek_ui的使用

thindek_ui 是一个用于开发薄层应用（thindek’s mobile applications）的Flutter UI工具包。它提供了丰富的UI组件，可以帮助开发者快速构建美观且功能强大的移动应用。

开始使用

此项目是一个Dart包，属于一个可以轻松在多个Flutter或Dart项目中共享的库模块。如果您刚刚开始学习Flutter，可以通过以下资源快速上手：

• Flutter官方文档 提供了教程、示例、移动开发指南以及完整的API参考。

安装与配置

首先，在您的 pubspec.yaml 文件中添加依赖项：

dependencies:
  thindek_ui: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个简单的示例，展示如何使用 thindek_ui 的组件来构建一个带有圆形头像和按钮计数器的应用程序。

示例代码

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:thindek_ui/thindek_ui.dart'; // 引入thindek_ui包

void main() {
  runApp(MyApp()); // 启动应用程序
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调为蓝色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // 主页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 计数器变量

  void _incrementCounter() {
    setState(() {
      _counter++; // 按钮点击时增加计数器
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 子组件垂直居中
          children: [
            // 使用thindek_ui的圆形头像组件
            TDKCircleAvatar(
              avatar: 'https://pic1.zhimg.com/v2-bfb64b3fe9c3e1a16d0612969d99f05d_xll.jpg', // 头像URL
              length: 200, // 头像直径
              borderWidth: 2, // 边框宽度
              borderColor: Colors.white, // 边框颜色
            ),
            Text('你已经按下了按钮次数：'), // 文本提示
            Text(
              '$_counter', // 显示计数器值
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 点击按钮触发计数器增加
        tooltip: 'Increment', // 工具提示
        child: Icon(Icons.add), // 图标
      ),
    );
  }
}