Flutter AI绘画接口插件midjourney_api的使用

功能特性

通过 midjourney_api 插件可以从 MidJourney 展示区获取最新和热门的图像。

开始使用

首先，你需要在你的项目中添加 midjourney_api 依赖。编辑 pubspec.yaml 文件，并添加以下依赖：

dependencies:
  midjourney_api: ^x.x.x

接下来，你可以创建一个简单的应用来展示最近和热门的图像。

示例代码

以下是一个完整的示例代码，展示了如何使用 midjourney_api 插件来获取并显示最近和热门的图像。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

/// 主页包含一个页面视图和底部导航栏
/// 一个部分用于显示热门图像，另一个部分用于显示最近的图像
/// 图像从 MidJourney API 获取并在网格视图中显示
class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final controller = PageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MidJourney'),
      ),
      body: PageView(
        controller: controller,
        children: const [
          TopImages(),
          RecentImages(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.star),
            label: '热门',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.access_time),
            label: '最近',
          ),
        ],
        onTap: (index) {
          controller.animateToPage(
            index,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
      ),
    );
  }
}

/// 显示热门图像的组件
class TopImages extends StatelessWidget {
  const TopImages({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: MidJourneyApi().fetchTop(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final images = snapshot.data as List<String>;
          return GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemCount: images.length,
            itemBuilder: (context, index) {
              return Card(child: Image.network(images[index]));
            },
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

/// 显示最近图像的组件
class RecentImages extends StatelessWidget {
  const RecentImages({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: MidJourneyApi().fetchRecent(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final images = snapshot.data as List<String>;
          return GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemCount: images.length,
            itemBuilder: (context, index) {
              return Card(child: Image.network(images[index]));
            },
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}