How can I make multiple image picker which upload and set image inside container in flutter?

Question

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.

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(),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

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 class

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

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