flutter_wisetronic/lib/widgets/desktop/desktop_index_main_content_2.dart

import 'package:flutter/material.dart';
import 'package:flutter_wisetronic/generated/l10n.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';

class DesktopIndexMainContent2 extends StatefulWidget {
  final Map<String, dynamic> content;
  const DesktopIndexMainContent2(this.content, {Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return DesktopIndexMainContent2State();
  }
}

class DesktopIndexMainContent2State extends State<DesktopIndexMainContent2> {
  double sideSpace = 0;
  double mainSpace = 1200;

  @override
  Widget build(BuildContext context) {
    if (widget.content == null) {
      return Container();
    }
    if (MediaQuery.of(context).size.width <= 1200) {
      mainSpace = MediaQuery.of(context).size.width;
      sideSpace = 0;
    } else {
      mainSpace = 1200;
      sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
    }
    return Row(
      children: [
        Container(
          width: sideSpace,
        ),
        Container(
          width: mainSpace,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: mainSpace / 2,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0.0),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                            child: Text(
                              '${widget.content['minipos']}',
                              style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.blueGrey,
                              ),
                            ),
                          ),
                          Container(
                            width: mainSpace / 2 - 100.0,
                            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                            child: Text(
                              '${widget.content['point_of_sale_system_solution']}',
                              style: TextStyle(
                                fontSize: 15.0,
                                color: Colors.grey,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 10.0),
                      child: Util.showImage(
                          'http:${widget.content['minipos_image']['image']}',
                          fit: BoxFit.fitWidth
                      ),
                    ),
                    _buildMiniPosFeatures(mainSpace / 2),
                  ],
                ),
              ),
              Container(
                width: mainSpace / 2,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0.0),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                            child: Text(
                              '${widget.content['igoshow']}',
                              style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                                color: Colors.blueGrey,
                              ),
                            ),
                          ),
                          Container(
                            width: mainSpace / 2 - 100.0,
                            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
                            child: Text(
                              '${widget.content['igoshow_solution']}',
                              style: TextStyle(
                                fontSize: 15.0,
                                color: Colors.grey,
                              ),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 10.0),
                      child: Util.showImage(
                          'http:${widget.content['igoshow_image']['image']}',
                          fit: BoxFit.fitWidth
                      ),
                    ),
                    _buildiGoShowFeatures(mainSpace / 2),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          width: sideSpace,
        ),
      ],
    );
  }

  Widget _buildMiniPosFeatures(double width) {
    Column col = Column(
      children: [],
    );
    for (int i = 0; i < (widget.content['minipos_features'] as List).length; i++) {
      col.children.add(Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 5.0),
            child: Icon(
              Icons.circle,
              size: 10.0,
              color: Colors.black87,
            ),
          ),
          Container(
            width: width - 40.0,
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
            child: Text(
              '${(widget.content['minipos_features'] as List)[i]}',
              style: TextStyle(
                color: Colors.black54,
              ),
            ),
          ),
        ],
      ));
    }
    col.children.add(
      GestureDetector(
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0.0),
          child: Text(
            S.of(context).learn_more,
            style: TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
      child: col,
    );
  }

  Widget _buildiGoShowFeatures(double width) {
    Column col = Column(
      children: [],
    );
    for (int i = 0; i < (widget.content['igoshow_features'] as List).length; i++) {
      col.children.add(Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 5.0),
            child: Icon(
              Icons.circle,
              size: 10.0,
              color: Colors.black87,
            ),
          ),
          Container(
            width: width - 40.0,
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
            child: Text(
              '${(widget.content['igoshow_features'] as List)[i]}',
              style: TextStyle(
                color: Colors.black54,
              ),
            ),
          ),
        ],
      ));
    }
    col.children.add(
      GestureDetector(
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 0.0),
          child: Text(
            S.of(context).learn_more,
            style: TextStyle(
              color: Colors.blue,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
    return Container(
      padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
      child: col,
    );
  }

}