fcs/lib/pages/widgets/multi_img_file.dart

import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/widgets/callbacks.dart';
import 'package:fcs/pages/widgets/right_left_page_rout.dart';
import 'package:fcs/pages/widgets/show_img.dart';
import 'package:fcs/pages/widgets/show_multiple_img.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';

import 'display_image_source.dart';
import 'multi_img_controller.dart';

typedef OnFile = void Function(File);

class MultiImageFile extends StatefulWidget {
  final String? title;
  final bool enabled;
  final ImageSource imageSource;
  final MultiImgController? controller;

  const MultiImageFile(
      {Key? key,
      this.title,
      this.enabled = true,
      this.controller,
      this.imageSource = ImageSource.gallery})
      : super(key: key);
  @override
  _MultiImageFileState createState() => _MultiImageFileState();
}

class _MultiImageFileState extends State<MultiImageFile> {
  List<DisplayImageSource> fileContainers = [];
  @override
  void initState() {
    super.initState();
    fileContainers = widget.controller!.fileContainers;
    widget.controller!.onChange(() {
      setState(() {
        this.fileContainers = widget.controller!.fileContainers;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        widget.enabled
            ? Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  InkWell(
                    onTap: () => {_openImagePicker(false)},
                    child: Stack(
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          child: Icon(
                            MaterialCommunityIcons.image,
                            color: primaryColor,
                            size: 35,
                          ),
                        ),
                        Positioned(
                            right: 0,
                            top: 0,
                            child: actionIcon(
                                color: Colors.green, iconData: Icons.add))
                      ],
                    ),
                  ),
                  InkWell(
                    onTap: () => {_openImagePicker(true)},
                    child: Stack(
                      children: [
                        Container(
                          width: 50,
                          height: 50,
                          child: Icon(
                            MaterialCommunityIcons.camera,
                            color: primaryColor,
                            size: 35,
                          ),
                        ),
                        Positioned(
                            right: 0,
                            top: 0,
                            child: actionIcon(
                                color: Colors.green, iconData: Icons.add))
                      ],
                    ),
                  ),
                ],
              )
            : Container(),
        Container(
          height: 100,
          child: ListView.separated(
            separatorBuilder: (context, index) => Divider(
              color: Colors.black,
            ),
            itemCount: fileContainers.length,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () => Navigator.push(
                    context,
                    RightLeftPageRoute(ShowMultiImage(
                      displayImageSources: fileContainers,
                      initialPage: index,
                    ))),
                child: Stack(alignment: Alignment.topLeft, children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: primaryColor,
                          width: 1.0,
                        ),
                      ),
                      child: fileContainers[index].file == null
                          ? CachedNetworkImage(
                              fit: BoxFit.cover,
                              width: 50,
                              height: 50,
                              imageUrl: fileContainers[index].url!,
                              placeholder: (context, url) => Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  SizedBox(
                                      width: 30,
                                      height: 30,
                                      child: CircularProgressIndicator()),
                                ],
                              ),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error),
                            )
                          : Image.file(
                            fileContainers[index].file!,
                            width: 50,
                            height: 50,
                            fit: BoxFit.cover,
                          ),
                    ),
                  ),
                  widget.enabled
                      ? Positioned(
                          top: 10,
                          right: 0,
                          child: actionIcon(
                              color: Colors.red,
                              iconData: Icons.remove,
                              onTap: () =>
                                  {_fileRemove(fileContainers[index])}),
                        )
                      : Container(),
                ]),
              );
            },
          ),
        ),
      ],
    );
  }

  _openImagePicker(bool camera) async {
    var selectedFile = await ImagePicker().getImage(
        source: camera ? ImageSource.camera : ImageSource.gallery,
        imageQuality: 80,
        maxWidth: 1000);
    if (selectedFile != null) {
      _fileAdded(DisplayImageSource(), File(selectedFile.path));
    }
  }

  _fileAdded(DisplayImageSource fileContainer, File selectedFile) {
    fileContainer.file = selectedFile;
    setState(() {
      fileContainers.add(fileContainer);
      widget.controller!.addFile = fileContainer;
    });
  }

  _fileRemove(DisplayImageSource fileContainer) {
    setState(() {
      widget.controller!.removeFile = fileContainer;
    });
  }

  Widget getFile(DisplayImageSource fileContainer, int index) {
    return Container(
      height: 40,
      padding: EdgeInsets.only(top: 5, bottom: 5),
      child: fileContainer.file == null && fileContainer.url == null
          ? IconButton(
              padding: const EdgeInsets.all(3.0),
              icon: Icon(Icons.attach_file),
              onPressed: () async {
                if (!widget.enabled) return;
                bool camera = false, gallery = false;
                await _dialog(
                    context, () => camera = true, () => gallery = true);
                if (camera || gallery) {
                  var selectedFile = await ImagePicker().getImage(
                      source: camera ? ImageSource.camera : ImageSource.gallery,
                      imageQuality: 80,
                      maxWidth: 1000);
                  if (selectedFile != null) {
                    _fileAdded(fileContainer,
                        File.fromRawPath(await selectedFile.readAsBytes()));
                  }
                }
              },
            )
          : Padding(
              padding: const EdgeInsets.only(left: 3.0),
              child: InkWell(
                onTap: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => ShowImage(
                            imageFile: fileContainer.file!,
                            url: fileContainer.file == null
                                ? fileContainer.url!
                                : '',
                            fileName: widget.title!)),
                  )
                },
                child: Chip(
                  avatar: Icon(Icons.image),
                  onDeleted: !widget.enabled
                      ? null
                      : () {
                          _fileRemove(fileContainer);
                        },
                  deleteIcon: Icon(
                    Icons.close,
                  ),
                  label: Text("${widget.title}" + " - ${index + 1}"),
                ),
              ),
            ),
    );
  }

  Future<void> _dialog(BuildContext context, cameraPress(), photoPress()) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      IconButton(
                          icon: Icon(
                            FontAwesomeIcons.camera,
                            size: 30,
                            color: primaryColor,
                          ),
                          onPressed: () {
                            Navigator.pop(context);
                            cameraPress();
                          }),
                      Text("Camera")
                    ],
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      IconButton(
                          icon: Icon(
                            Icons.photo_library,
                            size: 30,
                            color: primaryColor,
                          ),
                          onPressed: () {
                            Navigator.pop(context);
                            photoPress();
                          }),
                      Text("Gallery")
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  Widget actionIcon({OnTap? onTap, Color? color, IconData? iconData}) {
    return InkWell(
      onTap: onTap,
      child: ClipOval(
        child: Container(
            color: color,
            height: 20,
            width: 20,
            child: Icon(
              iconData,
              color: Colors.white,
              size: 15,
            )),
      ),
    );
  }
}