sampleContainer function

Widget sampleContainer(
  1. UIComponent componentData,
  2. BuildContext context,
  3. List<Widget> children,
  4. int? index,
)

Implementation

Widget sampleContainer(UIComponent componentData, BuildContext context,
    List<Widget> children, int? index) {
  int referenceWidth = 720;
  int referenceHeight = 1440;

// Using MediaQuery to get the screen size of the current device
  Size screenSize = MediaQuery.of(context).size;
  double screenWidth = screenSize.width;
  double screenHeight = screenSize.height;

// Calculate the scale factors
  var scaleWidth = screenWidth / referenceWidth;
  var scaleHeight = screenHeight / referenceHeight;

  return Align(
    alignment: alignmentMap[componentData
                .properties![getIndex(index, defaultValue: 1)]
                .verticalAlignment!]?[
            componentData.properties![getIndex(index, defaultValue: 1)]
                .horizontalAlignment!] ??
        Alignment.center,
    child: GestureDetector(
      behavior: HitTestBehavior.deferToChild,
      child: Container(
        margin: EdgeInsets.only(
          top: componentData
                  .properties![getIndex(index, defaultValue: 1)].margin!.top! *
              scaleHeight,
          bottom: componentData.properties![getIndex(index, defaultValue: 1)]
                  .margin!.bottom! *
              scaleHeight,
          left: componentData
                  .properties![getIndex(index, defaultValue: 1)].margin!.left! *
              scaleWidth,
          right: componentData.properties![getIndex(index, defaultValue: 1)]
                  .margin!.right! *
              scaleWidth,
        ),
        constraints: BoxConstraints(
          maxWidth: componentData
                      .properties![getIndex(index, defaultValue: 1)].width! ==
                  "hugContent"
              ? componentData.properties![getIndex(index, defaultValue: 1)]
                          .orientation ==
                      'vertical'
                  ? MediaQuery.of(context).size.width * 0.5
                  : MediaQuery.of(context).size.width
              : MediaQuery.of(context).size.width,
          maxHeight: componentData
                      .properties![getIndex(index, defaultValue: 1)].height! ==
                  "hugContent"
              ? componentData.properties![getIndex(index, defaultValue: 1)]
                          .orientation ==
                      'vertical'
                  ? MediaQuery.of(context).size.height * 0.5
                  : MediaQuery.of(context).size.height
              : MediaQuery.of(context).size.height,
        ),
        height: componentData
                    .properties![getIndex(index, defaultValue: 1)].height! ==
                "hugContent"
            ? null
            : MediaQuery.of(context).size.height,
        width: componentData
                    .properties![getIndex(index, defaultValue: 1)].width! ==
                "hugContent"
            ? null
            : MediaQuery.of(context).size.width,
        padding: EdgeInsets.only(
          top: componentData
                  .properties![getIndex(index, defaultValue: 1)].padding!.top! *
              scaleHeight,
          bottom: componentData.properties![getIndex(index, defaultValue: 1)]
                  .padding!.bottom! *
              scaleHeight,
          left: componentData.properties![getIndex(index, defaultValue: 1)]
                  .padding!.left! *
              scaleWidth,
          right: componentData.properties![getIndex(index, defaultValue: 1)]
                  .padding!.right! *
              scaleWidth,
        ),
        decoration: BoxDecoration(
          color:
              componentData.properties![getIndex(index, defaultValue: 1)].hasBg!
                  ? Color(
                      int.parse(
                            componentData
                                .properties![getIndex(index, defaultValue: 1)]
                                .bgColor!
                                .substring(1),
                            radix: 16,
                          ) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .bgOpacity! /
                          100,
                    )
                  : null,
          image: componentData
                  .properties![getIndex(index, defaultValue: 1)].hasBg!
              ? DecorationImage(
                  colorFilter: ColorFilter.mode(
                    Color(
                      int.parse(
                            componentData
                                .properties![getIndex(index, defaultValue: 1)]
                                .bgColor!
                                .substring(1),
                            radix: 16,
                          ) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .bgOpacity! /
                          100,
                    ),
                    BlendMode.srcOver,
                  ),
                  image: NetworkImage(
                    componentData.properties![getIndex(index, defaultValue: 1)]
                            .bgUrl ??
                        "https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png",
                  ),
                  fit: BoxFit.cover,
                )
              : null,
          borderRadius: BorderRadius.circular(
            componentData
                    .properties![getIndex(index, defaultValue: 1)].roundness! *
                scaleWidth,
          ),
          border: componentData
                  .properties![getIndex(index, defaultValue: 1)].hasBorder!
              ? Border(
                  top: BorderSide(
                    color: Color(
                      int.parse(
                              componentData
                                  .properties![getIndex(index, defaultValue: 1)]
                                  .borderColor!
                                  .substring(1),
                              radix: 16) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .borderOpacity! /
                          100,
                    ),
                    width: componentData
                        .properties![getIndex(index, defaultValue: 1)]
                        .border!
                        .top!,
                  ),
                  bottom: BorderSide(
                    color: Color(
                      int.parse(
                              componentData
                                  .properties![getIndex(index, defaultValue: 1)]
                                  .borderColor!
                                  .substring(1),
                              radix: 16) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .borderOpacity! /
                          100,
                    ),
                    width: componentData
                        .properties![getIndex(index, defaultValue: 1)]
                        .border!
                        .bottom!,
                  ),
                  left: BorderSide(
                    color: Color(
                      int.parse(
                            componentData
                                .properties![getIndex(index, defaultValue: 1)]
                                .borderColor!
                                .substring(1),
                            radix: 16,
                          ) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .borderOpacity! /
                          100,
                    ),
                    width: componentData
                        .properties![getIndex(index, defaultValue: 1)]
                        .border!
                        .left!,
                  ),
                  right: BorderSide(
                    color: Color(
                      int.parse(
                            componentData
                                .properties![getIndex(index, defaultValue: 1)]
                                .borderColor!
                                .substring(1),
                            radix: 16,
                          ) +
                          0xFF000000,
                    ).withOpacity(
                      componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .borderOpacity! /
                          100,
                    ),
                    width: componentData
                        .properties![getIndex(index, defaultValue: 1)]
                        .border!
                        .right!,
                  ),
                )
              : null,
        ),
        child: componentData.properties![getIndex(index, defaultValue: 1)]
                    .orientation! ==
                'vertical'
            ? GestureDetector(
                behavior: HitTestBehavior.deferToChild,
                child: Column(
                  mainAxisAlignment: () {
                    if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .verticalContentAlignment ==
                        "center") {
                      return MainAxisAlignment.center;
                    } else if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .verticalContentAlignment ==
                        "top") {
                      return MainAxisAlignment.start;
                    } else if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .verticalContentAlignment ==
                        "bottom") {
                      return MainAxisAlignment.end;
                    } else {
                      return MainAxisAlignment.center;
                    }
                  }(),
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: () {
                    if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .horizontalContentAlignment ==
                        "center") {
                      return CrossAxisAlignment.center;
                    } else if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .horizontalContentAlignment ==
                        "left") {
                      return CrossAxisAlignment.start;
                    } else if (componentData
                            .properties![getIndex(index, defaultValue: 1)]
                            .horizontalContentAlignment ==
                        "right") {
                      return CrossAxisAlignment.end;
                    } else {
                      return CrossAxisAlignment.center;
                    }
                  }(),
                  children: children
                      .map(
                        (child) => GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          child: child,
                        ),
                      )
                      .toList(),
                ),
              )
            : Wrap(
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: () {
                      if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .horizontalContentAlignment ==
                          "center") {
                        return MainAxisAlignment.center;
                      } else if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .horizontalContentAlignment ==
                          "left") {
                        return MainAxisAlignment.start;
                      } else if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .horizontalContentAlignment ==
                          "right") {
                        return MainAxisAlignment.end;
                      } else {
                        return MainAxisAlignment.center;
                      }
                    }(),
                    crossAxisAlignment: () {
                      if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .verticalContentAlignment ==
                          "center") {
                        return CrossAxisAlignment.center;
                      } else if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .verticalContentAlignment ==
                          "top") {
                        return CrossAxisAlignment.start;
                      } else if (componentData
                              .properties![getIndex(index, defaultValue: 1)]
                              .verticalContentAlignment ==
                          "bottom") {
                        return CrossAxisAlignment.end;
                      } else {
                        return CrossAxisAlignment.center;
                      }
                    }(),
                    children: children
                        .map(
                          (child) => Flexible(
                            child: child,
                          ),
                        )
                        .toList(),
                  ),
                ],
              ),
      ),
    ),
  );
}