cssd/lib/widgets/ItemScreens/Add/upload_image.dart

import 'package:cssd/providers/items.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class UploaderImage extends StatelessWidget {
  final double deviceBlockSize;
  final ItemProvider providerObject;
  const UploaderImage({
    super.key,
    required this.deviceBlockSize,
    required this.providerObject,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Directionality(
        textDirection: TextDirection.rtl,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 20),
              height: providerObject.catchImages.length != 0 ? 60 : 0,
              child: ImageBox(
                deviceBlockSize: deviceBlockSize,
                itemProvider: providerObject,
              ),
            ),
            SizedBox(
              height: providerObject.catchImages.length != 0 ? 10 : 0,
            ),
            InkWell(
              onTap: () async {
                await loadAssets(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width - 40,
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.black,
                ),
                child: Text(
                  '+ Add an image or file from device',
                  textDirection: TextDirection.ltr,
                  style: TextStyle(color: Colors.white),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> loadAssets(BuildContext context) async {
    var providerObject = Provider.of<ItemProvider>(context, listen: false);
    List<PlatformFile> files = providerObject.catchImages;
    try {
      var datas = await FilePicker.platform.pickFiles(
        type: FileType.custom,
        allowedExtensions: ['jpg', 'png', 'bmp', 'jpeg', 'pdf', 'docx', 'doc'],
        withData: true,
        withReadStream: true,
      );
      files += datas!.files;
    } catch (_) {}

    providerObject.setCatchImages(files);
    providerObject.setImages();
  }
}

class ImageBox extends StatelessWidget {
  const ImageBox({
    Key? key,
    required double deviceBlockSize,
    required ItemProvider itemProvider,
  })  : _deviceBlockSize = deviceBlockSize,
        _providerObject = itemProvider,
        super(key: key);

  final double _deviceBlockSize;
  final ItemProvider _providerObject;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemBuilder: (ctx, index) {
        bool isPdf = _providerObject.catchImages[index].path!.endsWith('pdf');
        bool isWord =
            _providerObject.catchImages[index].path!.endsWith('docx') ||
                _providerObject.catchImages[index].path!.endsWith('doc');

        // print(_providerObject.catchImages[index].path.endsWith('jpg'));
        // .substring(_providerObject.catchImages[index].path.length - 4));
        return ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Container(
            width: 60,
            height: 60,
            child: Stack(
              children: <Widget>[
                Positioned(
                  top: 10,
                  left: 0,
                  child: GestureDetector(
                    onTap: () => isPdf
                        ? print('pdf')
                        : isWord
                            ? print('word')
                            : Navigator.of(context).push(
                                MaterialPageRoute(
                                  builder: (_) => Container(
                                    color: Colors.white,
                                    child: Center(
                                      child: Image.memory(
                                        _providerObject
                                            .catchImages[index].bytes!,
                                        fit: BoxFit.contain,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                    child: isPdf
                        ? Image.asset(
                            'assets/Images/pdf.png',
                            width: 60,
                            height: 60,
                            fit: BoxFit.fill,
                          )
                        : isWord
                            ? Image.asset(
                                'assets/Images/word.png',
                                width: 60,
                                height: 60,
                                fit: BoxFit.fill,
                              )
                            : Image.memory(
                                _providerObject.catchImages[index].bytes!,
                                // asset: _images[index],
                                width: 60,
                                height: 60,
                                fit: BoxFit.contain,
                              ),
                  ),
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  child: GestureDetector(
                    onTap: () {
                      // setState(() {
                      _providerObject.removeImage(index);
                      // });
                    },
                    child: CircleAvatar(
                      backgroundColor: Colors.red,
                      radius: 10,
                      child: Icon(
                        Icons.close,
                        size: 12,
                        color: Colors.white,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      },
      itemCount: _providerObject.catchImages.length,
      separatorBuilder: (BuildContext context, int index) => SizedBox(
        width: 3 * _deviceBlockSize,
      ),
    );
  }
}