如何制作多个图像选择器，在颤动中上传和设置容器内的图像? [英] How can I make multiple image picker which upload and set image inside container in flutter?

问题描述

我想制作这种类型的图像选择器，当我点击加号时，它会在我选择适合此容器的图像时打开图像选择器.

I want to make this type of image picker when I clicked on the plus sign it will open image picker when I picked images it will fit into this container.

这是我尝试过的一些代码.

Here is some code I've tried.

在这段代码中，我使用了平面按钮，它将拾取图像并将其显示在平面按钮下.但我想要像我在图片中提到的那样输出.5 种不同的图片上传器.

In this code, I've use flat button it will pick and image and show it under the flat button. but I want output like I mentioned in images. 5 different images uploader.

import 'dart:io';

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

import 'package:image_picker/image_picker.dart';

class BusinessProfilePage extends StatefulWidget {


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

class _BusinessProfilePageState extends State<BusinessProfilePage> {
  Future<File> profilepicture;
  bool aggreeandaccept = false;
  bool accepttudo = false;

  pickprofilepicture(ImageSource source) {
    setState(() {
      profilepicture = ImagePicker.pickImage(source: source);
    });
  }

  Widget _buildbusinessprofilepicture() {
    return new FormField(
      builder: (FormFieldState state) {
        return FlatButton.icon(
          icon: Icon(Icons.image),
          label: Text('Business Profile Picture'),
          //color: Colors.white,
          textColor: Colors.black54,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50),
          ),
          onPressed: () {
            pickprofilepicture(ImageSource.gallery);
          },
        );
      },
    );
  }

  Widget _buildprofileimage() {
    return FutureBuilder<File>(
      future: profilepicture,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 100,
            height: 100,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("BusinessProfile"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            SingleChildScrollView(
              child: SafeArea(
                top: false,
                bottom: false,
                child: Form(
                  child: Scrollbar(
                    child: SingleChildScrollView(
                      dragStartBehavior: DragStartBehavior.down,
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: new Container(
                        margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            _buildbusinessprofilepicture(),
                            _buildprofileimage(),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

推荐答案

您可以使用列表轻松实现这一点，我已经为您创建了示例代码，请查看.

You can easily achieve this using a list, I have created a sample code for you please check this.

import 'package:blog_app/models/ImageUploadModel.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class SingleImageUpload extends StatefulWidget {
  @override
  _SingleImageUploadState createState() {
    return _SingleImageUploadState();
  }
}

class _SingleImageUploadState extends State<SingleImageUpload> {
  List<Object> images = List<Object>();
  Future<File> _imageFile;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
        Expanded(
          child: buildGridView(),
        ),
      ],
    ),
  ),
);
  }

  Widget buildGridView() {
    return GridView.count(
  shrinkWrap: true,
  crossAxisCount: 3,
  childAspectRatio: 1,
  children: List.generate(images.length, (index) {
    if (images[index] is ImageUploadModel) {
      ImageUploadModel uploadModel = images[index];
      return Card(
        clipBehavior: Clip.antiAlias,
        child: Stack(
          children: <Widget>[
           Image.file(
              uploadModel.imageFile,
              width: 300,
              height: 300,
            ),
            Positioned(
              right: 5,
              top: 5,
              child: InkWell(
                child: Icon(
                  Icons.remove_circle,
                  size: 20,
                  color: Colors.red,
                ),
                onTap: () {
                  setState(() {
                    images.replaceRange(index, index + 1, ['Add Image']);
                  });
                },
              ),
            ),
          ],
        ),
      );
    } else {
      return Card(
        child: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            _onAddImageClick(index);
          },
        ),
      );
    }
  }),
);
  }

  Future _onAddImageClick(int index) async {
setState(() {
  _imageFile = ImagePicker.pickImage(source: ImageSource.gallery);
  getFileImage(index);
});
  }

  void getFileImage(int index) async {
//    var dir = await path_provider.getTemporaryDirectory();

_imageFile.then((file) async {
  setState(() {
    ImageUploadModel imageUpload = new ImageUploadModel();
    imageUpload.isUploaded = false;
    imageUpload.uploading = false;
    imageUpload.imageFile = file;
    imageUpload.imageUrl = '';
    images.replaceRange(index, index + 1, [imageUpload]);
  });
 });
 }
 }

ImageUploadModel 类

ImageUploadModel class

class ImageUploadModel {
  bool isUploaded;
  bool uploading;
 File imageFile;
  String imageUrl;

  ImageUploadModel({
    this.isUploaded,
    this.uploading,
    this.imageFile,
    this.imageUrl,
  });
}

这篇关于如何制作多个图像选择器，在颤动中上传和设置容器内的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！