您好,我想在单击加号时制作这种类型的图像选择器,当我选择适合该容器的图像时,它将打开图像选择器。
这是我尝试过的一些代码。
在此代码中,我使用了平面按钮,它将拾取图像并显示在平面按钮下。但我想要输出图像中提到的效果。 5种不同的图片上传器。
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(),
],
),
),
),
),
),
),
),
],
),
),
);
}
}
答案 0 :(得分:1)
您可以使用列表轻松实现此目的,我已经为您创建了示例代码,请检查此内容。
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 ImageUploadModel {
bool isUploaded;
bool uploading;
File imageFile;
String imageUrl;
ImageUploadModel({
this.isUploaded,
this.uploading,
this.imageFile,
this.imageUrl,
});
}
答案 1 :(得分:0)
您可以制作4个自定义按钮(使用InkWell/GestureDetector
),在它们的onTap
中,您可以对所有按钮使用类似这样的逻辑:
// 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;
});
}
});
在图像选择器页面中,您需要将图像传回,使用
Navigator.pop(context, pickedImage);
答案 2 :(得分:0)
希望您对此multi image picker有帮助,可以使用此依赖项来集成它。