Image_Input A Package You need in almost every app

Have you ever found yourself working on a Flutter app, wanting to implement a seamless image input feature but feeling frustrated by the lack of a simple, comprehensive solution?

You’re not alone. Many developers face the challenge of integrating image input functionality that allows users to easily take photos, select images from their gallery, or even use images from URLs. This often requires piecing together multiple packages and writing extensive custom code to achieve a smooth user experience. Enter Image_Input — a package designed to simplify and enhance image input in Flutter apps.

Why Image_Input?

image_input | Flutter package

Image_Input is a versatile package that streamlines the process of integrating image input capabilities into your Flutter applications. Whether you need to capture images using the camera, select from the gallery, or input images via URL, this package has got you covered. It not only reduces the amount of boilerplate code but also ensures a consistent and user-friendly interface.

Key Features

1. Profile Avatar

The ProfileAvatar widget is perfect for applications where users need to upload or change their profile pictures. It provides a circular avatar with customizable options for adding and removing images. Here’s a quick look at how you can implement it:

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

2. ImageInput

The ImageInput widget allows for multiple image selections and displays. It’s perfect for scenarios where users need to upload or preview multiple images, such as in social media apps, e-commerce platforms, or content management systems.

ImageInput(
 images: imageInputImages,
 allowEdit: allowEditImageInput,
 allowMaxImage: 5,
 onImageSelected: (image) {
 setState(() {
 imageInputImages.add(image);
 });
 },
 onImageRemoved: (image, index) {
 setState(() {
 imageInputImages.remove(image);
 });
 },
)

Use Cases

Profile Avatar

• Social Media Apps: Allow users to set and update their profile pictures easily.
• Messaging Apps: Enable users to personalize their avatars.
• User Management Systems: Simplify the process of profile image management.

ImageInput

• E-commerce Platforms: Allow sellers to upload multiple product images.
• Content Creation Apps: Enable users to add and manage images for their posts or projects.
• Photo Galleries: Create rich photo gallery features within your app.

Getting Started

To start using Image_Input in your Flutter project, simply add it to your pubspec.yaml:

dependencies:
 image_input: ^1.0.0

Then, import it into your Dart file:

import ‘package:image_input/image_input.dart’;

From there, you can utilize the ProfileAvatar and ImageInput widgets as shown in the examples above.

Conclusion

Image_Input is a must-have package for Flutter developers who want to simplify the image input process in their apps. Its ease of use, combined with powerful features, makes it an essential tool for creating a seamless user experience. Say goodbye to the hassle of integrating multiple packages and writing extensive code — Image_Input has everything you need to handle image input effortlessly.

Happy coding!

I hope you found this article enjoyable! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!

Follow Me

Aakash Pamnani - Medium

aakash-pamnani - Overview

https://www.linkedin.com/in/aakashpamnani/

x.com

Thank you for taking the time to read this article. If you enjoyed it, feel free to explore more of my articles and consider following me for future updates. Your support is greatly appreciated!