Image Input
A flutter package which.
Getting Started
Import image_input package
import 'package:image_input/image_input.dart';
Profile Avatar
ProfileAvatar(
image: profileAvatarCurrentImage,
radius: 100,
allowEdit: allowEdit,
addImageIcon: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(100),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.add_a_photo),
),
),
removeImageIcon: Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(100),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.close),
),
),
onImageChanged: (XFile? image) {
setState(() {
profileAvatarCurrentImage = image;
});
},
onImageRemoved: () {
setState(() {
profileAvatarCurrentImage = null;
});
},
getImageSource: () {
return showDialog<ImageSource>(
context: context,
builder: (context) {
return SimpleDialog(
children: [
SimpleDialogOption(
child: const Text("Camera"),
onPressed: () {
Navigator.of(context).pop(ImageSource.camera);
},
),
SimpleDialogOption(
child: const Text("Gallery"),
onPressed: () {
Navigator.of(context).pop(ImageSource.gallery);
}),
],
);
},
).then((value) {
return value ?? ImageSource.gallery;
});
},
getPreferredCameraDevice: () {
return showDialog<CameraDevice>(
context: context,
builder: (context) {
return SimpleDialog(
children: [
SimpleDialogOption(
child: const Text("Rear"),
onPressed: () {
Navigator.of(context).pop(CameraDevice.rear);
},
),
SimpleDialogOption(
child: const Text("Front"),
onPressed: () {
Navigator.of(context).pop(CameraDevice.front);
}),
],
);
},
).then(
(value) {
return value ?? CameraDevice.rear;
},
);
},
),
Usage of Profile Avatar
- Use in listview to show profile images.
- use in creating a new user to take profile image input from user.
ImageInput
ImageInput(
images: imageInputImages,
allowEdit: allowEditImageInput,
allowMaxImage: 5,
onImageSelected: (image, index) {
setState(() {
imageInputImages.add(image);
});
},
onImageRemoved: (image, index) {
setState(() {
imageInputImages.remove(image);
});
},
),
Usage of Image Input
- Use to show/preview multiple images from a path
- Use to take input of multiple images from user
Issues
Please file issues, bugs, or feature requests in issue tracker.