Flutter智能色彩识别插件ai_color的使用

名称

AIColor

描述

这是一个包，它将帮助用户仅通过文本描述就能快速找到项目所需的颜色。

Demo

演示视频展示了我们的插件的工作情况

开始使用

创建一个变量实例以便于进一步方便使用：

AIColor aiColor = AIColor("apiKey"); // 将 "apiKey" 替换为你的API密钥

使用方法

使用AIColor实例和FutureBuilder，你可以创建各种Widgets并使用我们的库设置所需的颜色：

Widget newWidget(String text){
  return FutureBuilder(
    future: aiColor.getColor(text), // 获取颜色
    builder: (BuildContext context, AsyncSnapshot<Color?> snapshot) {
      if(snapshot.connectionState == ConnectionState.active ||
          snapshot.connectionState == ConnectionState.waiting){
        return const Center(child: CircularProgressIndicator(),); // 显示加载指示器
      }
      if(snapshot.connectionState == ConnectionState.done){
        if(snapshot.hasError){
          return const Center(child: Text("ERROR")); // 显示错误信息
        }
        else {
          return Center(
            child: Container(
              width: 100,
              height: 100,
              color: snapshot.data, // 设置颜色
            ),
          );
        }
      }
      return const Center(child: Text("wait"),); // 显示等待状态
    },

  );
}

除了getColor函数，你还可以使用updateColor函数，该函数不使用数据库，而是每次发送新的请求到ChatGPT。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用ai_color插件：

import 'package:flutter/material.dart';
import 'package:ai_color/ai_color.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AI Color App'),
        ),
        body: const Center(
          child: ColorTextWidget(),
        ),
      ),
    );
  }
}

class ColorTextWidget extends StatefulWidget {
  const ColorTextWidget({super.key});

  @override
  _ColorTextWidgetState createState() => _ColorTextWidgetState();
}

class _ColorTextWidgetState extends State<ColorTextWidget> {
  String text = '';
  Color colorResult = Colors.white;
  bool colorDefined = false;
  AIColor aiColor = AIColor("apiKey"); // 将 "apiKey" 替换为你的API密钥

  void determineColor() async {
    Color? result = await aiColor.getColor(text);
    setState(() {
      colorDefined = true;
      colorResult = result!;
    });
  }

  void updateColor() async {
    Color? result = await aiColor.updateColor(text);
    setState(() {
      colorDefined = true;
      colorResult = result!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '输入一个单词:',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 10),
            TextField(
              onChanged: (value) {
                setState(() {
                  colorDefined = false;
                  text = value;
                });
              },
              decoration: const InputDecoration(
                hintText: '输入一个单词...',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    determineColor(); // 确定颜色
                  },
                  child: const Text('确定颜色'),
                ),
                const SizedBox(width: 15),
                ElevatedButton(onPressed: () {
                  updateColor(); // 更新颜色
                }, child: const Text('更新颜色'))
              ],
            ),
            const SizedBox(height: 20),
            colorDefined ? newWidget(text) : Container(),
          ],
        ));
  }

  Widget newWidget(String text){
    return FutureBuilder(
      future: aiColor.getColor(text),
      builder: (BuildContext context, AsyncSnapshot<Color?> snapshot) {
        if(snapshot.connectionState == ConnectionState.active ||
            snapshot.connectionState == ConnectionState.waiting){
          return const Center(child: CircularProgressIndicator(),); // 显示加载指示器
        }
        if(snapshot.connectionState == ConnectionState.done){
          if(snapshot.hasError){
            return const Center(child: Text("ERROR")); // 显示错误信息
          }
          else {
            return Center(
              child: Container(
                width: 100,
                height: 100,
                color: snapshot.data, // 设置颜色
              ),
            );
          }
        }
        return const Center(child: Text("wait"),); // 显示等待状态
      },

    );
  }
}