8

enter image description here

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

4 Answers 4

Reset to default
22

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

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

Hello there, I appreciate your answer but it will show an error. error is like this : uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:multi_image_picker]
open your build.gradle file in android and change minSdkVersion 16 to minSdkVersion 19
dear after adding this minSdkVersion the I am getting this error : D8: Program type already present: android.support.v4.app.INotificationSideChannel
you can also use ImagePicker in place of MultiImagePIcker, just remove multi image picker and change it to imagepicker
Don't forget import 'dart:io'; otherwise you will get Type 'File' not found error.
|
1

You can make 4 custom buttons (with InkWell/GestureDetector), in their onTap, you can use a logic something like this for all your buttons: 

// when button 1 is pressed, you go to image picker page, // select image from there and when you come back you update _image1 Navigator.push(context, MaterialPageRoute(builder: (_) => ImagePickerPage())).then((pickedImage) { if (pickedImage != null) { setState(() { _image1 = pickedImage; }); } });

In your image picker page, you need to pass the image back, you'd use 

Navigator.pop(context, pickedImage);
Improve this answer

7 Comments

I appreciate your answer but I need this type of UI design in that design I want to pick images and this image has to fit inside these containers.
Once you have pickedImage, you can use it inside Container using child:pickedImage, it should't be tough.
Can you please help me to code this?. please it's my request. Because i am stuck very much in another problem can you please help me to do this. Hope you understand :). it will be very appreciated.
@RutvikGumasana I can surely help you but I am not sure which plugin you are using to pick images and also you didn't share any code, if you can share a minimal code of picking up image (the one that you are using), my job will become easy
i've attached code with the question please check it and help me to get out of this. :)
|
1

I hope you help this multi image picker you can be used this dependency to integrate it.

Improve this answer

1 Comment

I appreciate your answer but I need this type of UI design in that design I want to pick images and this image has to fit inside these containers.
1

You can use file_picker plugin.

It supports all the plaforms and is the best for picking up files/bytes/images/videos/etc... in flutter here is the working demo for this github

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.