Flutter图片选择加载插件image_picker_loading_jm的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter 图片选择加载插件 image_picker_loading_jm 的使用

image_Picker_loading_jm

[![License: MIT][license_badge]][license_link]

这个包允许我们轻松地使用在 dart.dev 上已经创建和发布的库 "shimmer""cached_network_image"

如何使用

import 'package:image_picker_loading_jm/image_picker_loading_jm.dart';

// 使用示例
ImagePickerLoadingJM(
   imagePickerLoadingJModel: ImagePickerLoadingJModel(
     image: "https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg", // 网络图片URL
     imageError: "assets/image/image.jpeg", // 错误时使用的本地图片路径
     buildBody: (_, provider) => Container(
       height: 300,
       width: 300,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(30),
         image: DecorationImage(
           image: provider, // 提供者对象,用于显示图片
           fit: BoxFit.cover,
         ),
       ),
     ),
   ),
 );

参数

所有参数都是通过 ImagePickerLoadingJModel 模型传递的。

  • image: 必填的字符串,用于获取要显示的图片的 URL 或路径。
  • imageError: 必填的字符串,用于获取错误图片的路径,只能发送资源图片。
  • typeImage: 接收一个 TypeImage 类型的字段,此字段不是必需的,用于知道要在小部件中显示哪种类型的图片(资源或网络)。
  • buildBody: 必填字段,接收 BuildBody 数据类型。

完整示例 Demo

以下是一个完整的示例,展示了如何使用 image_picker_loading_jm 插件来选择和加载图片。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image Picker Loading JM Example')),
        body: Center(
          child: ImagePickerLoadingJM(
            imagePickerLoadingJModel: ImagePickerLoadingJModel(
              image: "https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg",
              imageError: "assets/image/image.jpeg",
              buildBody: (_, provider) => Container(
                height: 300,
                width: 300,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  image: DecorationImage(
                    image: provider,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图片选择加载插件image_picker_loading_jm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片选择加载插件image_picker_loading_jm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用image_picker_loading_jm插件的一个示例。这个插件结合了图片选择和加载功能,并可能在选择图片时显示加载指示器。需要注意的是,由于这个插件并非Flutter官方或广泛知名的第三方插件,具体API和用法可能有所不同,以下示例将基于假设的API进行演示。如果插件的实际API有所不同,请参考插件的官方文档进行调整。

首先,确保你已经在pubspec.yaml文件中添加了image_picker_loading_jm依赖:

dependencies:
  flutter:
    sdk: flutter
  image_picker_loading_jm: ^最新版本号  # 请替换为实际版本号

然后,运行flutter pub get来获取依赖。

接下来,在你的Dart代码中,你可以按照以下方式使用image_picker_loading_jm插件:

import 'package:flutter/material.dart';
import 'package:image_picker_loading_jm/image_picker_loading_jm.dart'; // 假设这是正确的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Picker Loading Demo'),
        ),
        body: Center(
          child: MyImagePicker(),
        ),
      ),
    );
  }
}

class MyImagePicker extends StatefulWidget {
  @override
  _MyImagePickerState createState() => _MyImagePickerState();
}

class _MyImagePickerState extends State<MyImagePicker> {
  File? _imageFile;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        _imageFile == null
            ? Text('No image selected.')
            : Image.file(_imageFile!),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _pickImage,
          child: Text('Pick Image'),
        ),
      ],
    );
  }

  Future<void> _pickImage() async {
    // 显示加载指示器
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return Center(
          child: CircularProgressIndicator(),
        );
      },
    );

    try {
      // 使用image_picker_loading_jm插件选择图片
      // 注意:以下API调用是假设的,实际使用时请参考插件文档
      final pickedFile = await ImagePickerLoadingJm.pickImage(source: ImageSource.gallery);
      
      if (pickedFile != null) {
        setState(() {
          _imageFile = File(pickedFile.path);
        });
      }
    } catch (e) {
      print('Error picking image: $e');
    } finally {
      // 关闭加载指示器对话框
      Navigator.of(context).pop();
    }
  }
}

在这个示例中,我们做了以下几件事:

  1. 添加了image_picker_loading_jm依赖。
  2. 创建了一个简单的Flutter应用,其中包含一个按钮用于选择图片。
  3. 当用户点击按钮时,显示一个加载指示器对话框。
  4. 使用ImagePickerLoadingJm.pickImage方法选择图片(注意:这是假设的方法名,实际使用时请参考插件文档)。
  5. 选择图片成功后,更新UI以显示所选图片。
  6. 无论选择操作成功与否,最后都关闭加载指示器对话框。

请注意,由于image_picker_loading_jm插件的具体实现和API可能有所不同,上述代码中的ImagePickerLoadingJm.pickImage方法和相关调用可能需要根据实际情况进行调整。务必参考插件的官方文档和示例代码以确保正确使用。

回到顶部