Flutter图片加载与显示插件imagekit_io的使用

使用

让我们来看看如何使用ImageKit.io Flutter插件。

ImageKit.io(
  file,
  // folder: "folder_name/nested_folder", (可选)
  privateKey: "PrivateKey", // (保密)
  onUploadProgress: (progressValue) {
    if (kDebugMode) {
      print(progressValue);
    }
  },

).then((ImagekitResponse data) {
  /// 获取从[ImageKit.io]上传的图像文件链接
  /// 然后保存在任何地方。例如[Firebase, MongoDB]等。
  if (kDebugMode) {
    print(data.url!); // (你将从ImageKit获取所有响应数据)
    // print(data.fileId!);
  }
});

你也可以使用图像/视频链接上传到ImageKit.io。

ImageKit.url(
  url,
  // folder: "folder_name/nested_folder", (可选)
  privateKey: "PrivateKey", // (保密)
  onUploadProgress: (progressValue) {
    if (kDebugMode) {
      print(progressValue);
    }
  },

).then((ImagekitResponse data) {
  /// 获取从[ImageKit.io]上传的图像文件链接
  /// 然后保存在任何地方。例如[Firebase, MongoDB]等。
  if (kDebugMode) {
    print(data.url!); // (你将从ImageKit获取所有响应数据)
  }
});

完整示例

以下是完整的示例代码，展示了如何使用imagekit_io插件来选择、上传和显示图片：

import 'dart:html';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:imagekit_io/imagekit_io.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(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  double linearProgress = 0.0;
  Uint8List? file;
  String? fileName;
  String url = "";

  Future pickImage() async {
    try {
      FilePickerResult? result = await FilePicker.platform.pickFiles(type: FileType.image);
      if (result == null) return;
      final Uint8List imageTemp = result.files.first.bytes!;
      setState(() {
        fileName = result.files.first.name;
        file = imageTemp;
      });
    } on PlatformException catch (e) {
      debugPrint(e.toString());
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageKit.io"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(14.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (file != null)
                SizedBox(
                  height: 240,
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            Card(
                              child: Image.memory(
                                file!,
                                height: 200,
                                width: double.infinity,
                              ),
                            ),
                            Text("FileName: $fileName"),
                          ],
                        ),
                      ),
                      if (url.isNotEmpty)
                        Expanded(
                          child: Column(
                            children: [
                              Card(
                                child: Image.network(
                                  url,
                                  height: 200,
                                  width: double.infinity,
                                ),
                              ),
                              const Text("Uploaded Image Preview"),
                            ],
                          ),
                        ),
                    ],
                  ),
                ),
              const SizedBox(height: 10),
              LinearProgressIndicator(value: linearProgress),
              const SizedBox(height: 10),
              const Text(
                'ImageKit.io Upload Progress',
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  pickImage();
                },
                child: const Text("Select Image"),
              )
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ImageKit.io(
            file!,
            fileName: fileName!,
            privateKey: "PrivateKey", // (保密)
            onUploadProgress: (progressValue) {
              if (kDebugMode) {
                print(progressValue);
              }
              setState(() {
                linearProgress = progressValue;
              });
            },
          ).then((ImagekitResponse data) {
            /// 获取从[ImageKit.io]上传的图像文件链接
            /// 然后保存在任何地方。例如[Firebase, MongoDB]等。
            if (kDebugMode) {
              print(data.url!);
              print(data.fileId!);
            }
            setState(() {
              url = data.url!;
            });
          });
        },
        tooltip: 'Submit',
        child: const Icon(Icons.add),
      ),
    );
  }
}