manager-app/lib/Components/image_input_container.dart

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/loading_common.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_app/Screens/Resources/select_resource_modal.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';

class ImageInputContainer extends StatefulWidget {
  final Color color;
  final String label;
  final String initialValue;
  final ValueChanged<ResourceDTO> onChanged;
  final BoxFit imageFit;
  final bool isSmall;
  const ImageInputContainer({
    Key key,
    this.color = kSecond,
    this.label,
    this.initialValue,
    this.onChanged,
    this.imageFit = BoxFit.cover,
    this.isSmall = false,
  }) : super(key: key);

  @override
  _ImageInputContainerState createState() => _ImageInputContainerState();
}

class _ImageInputContainerState extends State<ImageInputContainer> {
  String resourceIdToShow;

  @override
  void initState() {
    resourceIdToShow = widget.initialValue;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      child: Row(
        children: [
          Align(
              alignment: AlignmentDirectional.centerStart,
              child: Text(widget.label, style: TextStyle(fontSize: 25, fontWeight: FontWeight.w300))
          ),
          Padding(
            padding: EdgeInsets.only(left: widget.isSmall ? 15 : 70, top: 10, bottom: 10),
            child: Container(
              width: size.width *0.08,
              height: size.height *0.08,
              child: InkWell(
                onTap: () async {
                  var result = await showSelectResourceModal(
                    "Sélectionner une ressource",
                    1,
                    true,
                    context
                  );

                  if (result != null) {
                    setState(() {
                      resourceIdToShow = result.id;
                    });
                    widget.onChanged(result);
                  }
                },
                child: getElement(widget.initialValue, context, widget.isSmall),
              ),
            ),
          ),
        ],
      ),
    );
  }

  getElement(String initialValue, BuildContext context, bool isSmall) {
    if (resourceIdToShow != null) {
      Size size = MediaQuery.of(context).size;
      final appContext = Provider.of<AppContext>(context);
      return FutureBuilder(
          future: getResource(resourceIdToShow, appContext),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.data != null) {
                return Transform.scale(
                  scale: isSmall ? size.aspectRatio * 0.5: size.aspectRatio * 0.9,
                  child: AspectRatio(
                    aspectRatio: 4/4,
                    child: Container(
                      decoration: boxDecoration(snapshot.data, appContext),
                    ),
                  ),
                );
              } else {
                return Text("No data");
              }

            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(
                  child: Container(
                      height: size.height * 0.1,
                      child: LoadingCommon()
                  )
              );
            }
          }
      );
    } else {
      return Container(
            decoration: BoxDecoration(
              color: widget.color,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 5, right: 5, top: 15, bottom: 15),
              child: Center(
                  child: AutoSizeText(
                    "Choisir une image",
                    style: TextStyle(color: kWhite),
                    maxLines: 1,
                  )
              ),
            )
        );
    }
  }

  Future<ResourceDTO> getResource(String resourceIdToShow, dynamic appContext) async {
    ResourceDTO resource = await appContext.getContext().clientAPI.resourceApi.resourceGetDetail(resourceIdToShow);
    return resource;
  }

  boxDecoration(ResourceDTO resourceDTO, appContext) {
    return BoxDecoration(
      shape: BoxShape.rectangle,
      color: kWhite,
      borderRadius: BorderRadius.circular(30.0),
      image: new DecorationImage(
        fit: widget.imageFit,
        image: resourceDTO.type != null ?  new NetworkImage(
          resourceDTO.type == ResourceType.image ? appContext.getContext().clientAPI.resourceApi.apiClient.basePath+"/api/Resource/"+ resourceDTO.id : resourceDTO.data,
        ) : null,
      ),
      boxShadow: [
        BoxShadow(
          spreadRadius: 0.5,
          blurRadius: 1,
          offset: Offset(0, 1.5), // changes position of shadow
        ),
      ],
    );
  }
}