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/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_icons/flutter_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 Container(
      height: 130,
      width: 500,
      child: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          color: Colors.black,
        ),
        itemCount:
            widget.enabled ? fileContainers.length + 1 : fileContainers.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          if (index == fileContainers.length) {
            return InkWell(
              onTap: () async {
                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(DisplayImageSource(), File(selectedFile.path));
                  }
                }
              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 200,
                  height: 130,
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: primaryColor,
                      width: 2.0,
                    ),
                  ),
                  child: Icon(SimpleLineIcons.plus),
                ),
              ),
            );
          } else {
            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: 200,
                    height: 130,
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: primaryColor,
                        width: 2.0,
                      ),
                    ),
                    child: fileContainers[index].file == null
                        ? CachedNetworkImage(
                            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.network(fileContainers[index].url,
                        //     width: 50, height: 50)
                        : Image.file(fileContainers[index].file,
                            width: 50, height: 50),
                  ),
                ),
                widget.enabled
                    ? Positioned(
                        top: 0,
                        right: 0,
                        child: Container(
                          height: 50,
                          width: 50,
                          child: IconButton(
                              icon: Icon(
                                Icons.close,
                                color: primaryColor,
                              ),
                              onPressed: () =>
                                  {_fileRemove(fileContainers[index])}),
                        ),
                      )
                    : Container(),
              ]),
            );
          }
        },
      ),
    );
  }

  _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
                                : null,
                            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")
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}