Flutter图像生成插件ai_image_generator的使用

Flutter图像生成插件ai_image_generator的使用

初始化

在使用 ai_image_generator 插件之前，需要进行初始化。初始化时需要提供一个API密钥。

void main() async {
  AiImageGenerator.init(
    key: "YOUR_API_KEY",
  );
  runApp(const MyApp());
}

生成图像

使用 generate 方法可以生成图像。该方法接受一个主题字符串作为参数，并返回一个包含生成图像URL的响应对象。

Future<AiResponse> generate(String topic) {
  return AiImageGenerator.i.generate(topic);
}

示例代码

以下是一个完整的示例代码，展示了如何使用 ai_image_generator 插件来生成图像。

import 'dart:developer';

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

void main() {
  AiImageGenerator.init(key: "YOUR_API_KEY");
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AIImageGeneratorScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<AIImageGeneratorScreen> createState() => _AIImageGeneratorScreenState();
}

class _AIImageGeneratorScreenState extends State<AIImageGeneratorScreen> {
  final TextEditingController _controller = TextEditingController(text: "fox");
  AiResponse? response;
  bool _isLoading = false;

  void _generateImage() async {
    setState(() {
      _isLoading = true;
    });

    try {
      response = await AiImageGenerator.i.generate(
        _controller.text,
        n: 1,
      );
      log(response.toString());
      setState(() {});
    } catch (e) {
      // 处理错误
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AI 图像生成器'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                labelText: '输入提示',
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _generateImage,
              child: const Text('生成图像'),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: _isLoading
                  ? const Center(
                      child: CircularProgressIndicator(),
                    )
                  : response != null
                      ? Builder(
                          builder: (context) {
                            final data = response?.data ?? [];
                            if (data.isNotEmpty) {
                              return ListView.builder(
                                itemCount: data.length,
                                itemBuilder: (context, index) {
                                  final item = data.elementAt(index);
                                  return ListTile(
                                    title: SelectableText(item.url ?? ''),
                                  );
                                },
                              );
                            } else {
                              return Center(
                                child: Text(
                                  response?.error?.message ?? "",
                                  textAlign: TextAlign.center,
                                ),
                              );
                            }
                          },
                        )
                      : Container(),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

1. 初始化：

   void main() async {
     AiImageGenerator.init(
       key: "YOUR_API_KEY",
     );
     runApp(const MyApp());
   }
   

   在 main 函数中调用 AiImageGenerator.init 方法并传入API密钥以初始化插件。

2. 生成图像：

   Future<AiResponse> generate(String topic) {
     return AiImageGenerator.i.generate(topic);
   }
   

   定义了一个 generate 方法用于生成图像，传入的主题字符串将用于生成图像。

3. 主界面：

   class AIImageGeneratorScreen extends StatefulWidget {
     const AIImageGeneratorScreen({super.key});
   
     [@override](/user/override)
     State<AIImageGeneratorScreen> createState() => _AIImageGeneratorScreenState();
   }
   

   创建一个名为 AIImageGeneratorScreen 的状态fulWidget，用于展示用户界面。

4. 状态管理：

   class _AIImageGeneratorScreenState extends State<AIImageGeneratorScreen> {
     final TextEditingController _controller = TextEditingController(text: "fox");
     AiResponse? response;
     bool _isLoading = false;
   
     void _generateImage() async {
       setState(() {
         _isLoading = true;
       });
   
       try {
         response = await AiImageGenerator.i.generate(
           _controller.text,
           n: 1,
         );
         log(response.toString());
         setState(() {});
       } catch (e) {
         // 处理错误
       } finally {
         setState(() {
           _isLoading = false;
         });
       }
     }
   

   管理状态，包括加载状态和响应数据。

5. UI布局：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: const Text('AI 图像生成器'),
       ),
       body: Padding(
         padding: const EdgeInsets.all(16.0),
         child: Column(
           children: [
             TextField(
               controller: _controller,
               decoration: const InputDecoration(
                 labelText: '输入提示',
               ),
             ),
             const SizedBox(height: 20),
             ElevatedButton(
               onPressed: _generateImage,
               child: const Text('生成图像'),
             ),
             const SizedBox(height: 20),
             Expanded(
               child: _isLoading
                   ? const Center(
                       child: CircularProgressIndicator(),
                     )
                   : response != null
                       ? Builder(
                           builder: (context) {
                             final data = response?.data ?? [];
                             if (data.isNotEmpty) {
                               return ListView.builder(
                                 itemCount: data.length,
                                 itemBuilder: (context, index) {
                                   final item = data.elementAt(index);
                                   return ListTile(
                                     title: SelectableText(item.url ?? ''),
                                   );
                                 },
                               );
                             } else {
                               return Center(
                                 child: Text(
                                   response?.error?.message ?? "",
                                   textAlign: TextAlign.center,
                                 ),
                               );
                             }
                           },
                         )
                       : Container(),
             ),
           ],
         ),
       ),
     );
   }