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.dart';
import 'package:manager_app/Screens/Resources/fetch_image_for_resource.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;
  const ImageInputContainer({
    Key key,
    this.color = kSecond,
    this.label,
    this.initialValue,
    this.onChanged,
    this.imageFit = BoxFit.cover,
  }) : 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: const EdgeInsets.all(10.0),
            child: Container(
              width: size.width *0.08,
              child: InkWell(
                onTap: () {
                  showSelectResourceModal(
                    "Sélectionner une ressource",
                    (ResourceDTO resource) {
                      widget.onChanged(resource);
                      setState(() {
                        resourceIdToShow = resource.id;
                      });
                    },
                    1,
                    true,
                    context
                  );
                },
                child: getElement(widget.initialValue, context),
              ),
            ),
          ),
        ],
      ),
    );
  }

  getElement(String initialValue, BuildContext context) {
    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) {
              return Transform.scale(
                  scale: size.aspectRatio * 0.3,
                  child: AspectRatio(
                    aspectRatio: 4/4,
                    child: Container(
                      decoration: boxDecoration(snapshot.data, appContext),
                    ),
                  ),
                );
            } else if (snapshot.connectionState == ConnectionState.none) {
              return Text("No data");
            } else {
              return Center(
                  child: Container(
                      height: size.height * 0.1,
                      child: Loading()
                  )
              );
            }
          }
      );
    } 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<ResourceDetailDTO> getResource(String resourceIdToShow, dynamic appContext) async {
    ResourceDetailDTO resource = await appContext.getContext().clientAPI.resourceApi.resourceGetDetail(resourceIdToShow);
    return resource;
  }

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