ui_sketch

import 'package:flutter/material.dart';

class DFDimension {
  MediaQueryData _queryData;
  DFDimension(BuildContext context) {
    _queryData = MediaQuery.of(context);
  }

  double get width {
    return _queryData.size.width;
  }

  double get height {
    return _queryData.size.height;
  }

  double setHeight(double percentage) {
    if (percentage == 0) {
      return 0;
    }
    return height * (percentage / 100);
  }

  double setWidth(double percentage) {
    if (percentage == 0) {
      return 0;
    }
    return width * (percentage / 100);
  }
}


class DFFontSizer {
  num _shortestSide;
  DignityFinanceFontSizer(BuildContext context) {
    _shortestSide = MediaQuery.of(context).size.shortestSide;
  }

  num sp(double percentage) {
    return ((_shortestSide) * (percentage / 1000)).ceil().toDouble();
  }
}

class DFInsets {
  DignityFinanceDimension sizer;

  DignityFinanceInsets(BuildContext context) {
    sizer = DignityFinanceDimension(context);
  }

  static DignityFinanceInsets init(BuildContext context) {
    return DignityFinanceInsets(context);
  }

  EdgeInsets get zero {
    return EdgeInsets.zero;
  }

  EdgeInsets all(double inset) {
    return EdgeInsets.all(sizer.setWidth(inset));
  }

  EdgeInsets only({
    double left = 0,
    double top = 0,
    double right = 0,
    double bottom = 0,
  }) {
    return EdgeInsets.only(
      top: sizer.setHeight(top),
      left: sizer.setWidth(left),
      bottom: sizer.setHeight(bottom),
      right: sizer.setWidth(right),
    );
  }

  EdgeInsets fromLTRB(
    double left,
    double top,
    double right,
    double bottom,
  ) {
    return EdgeInsets.fromLTRB(
      sizer.setWidth(left),
      sizer.setHeight(top),
      sizer.setWidth(right),
      sizer.setHeight(bottom),
    );
  }

  EdgeInsets symmetric({
    double vertical = 0,
    double horizontal = 0,
  }) {
    return EdgeInsets.symmetric(
      vertical: sizer.setHeight(vertical),
      horizontal: sizer.setWidth(horizontal),
    );
  }
}


class DFSizedBox extends StatelessWidget {
  final double height;
  final double width;
  final Widget child;

  DFSizedBox({this.height = 0, this.width = 0, this.child});

  @override
  Widget build(BuildContext context) {
    final sizer = DignityFinanceDimension(context);
    return SizedBox(height: sizer.setHeight(height), width: sizer.setWidth(width), child: child,);
  }
}

class UIPage extends StatelessWidget with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    final sizer = DFDimension(context);
    final fontSizer = DFFontSizer(context);
    final insets = DFInsets(context);
    return Scaffold(
      backgroundColor: dignityFinanceWhite,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: sizer.setHeight(12),
            backgroundColor: dignityFinanceWhite,
            elevation: 0,
            leading: Icon(
              CupertinoIcons.back,
              color: dignityFinanceBlack,
              size: fontSizer.sp(60),
            ),
            actions: <Widget>[
              IconButton(
                  icon: Icon(
                    CupertinoIcons.search,
                    color: dignityFinanceBlack,
                  ),
                  onPressed: () {})
            ],
            flexibleSpace: FlexibleSpaceBar(
              title: DFText(
                "Order",
                style: headerMediumText.copyWith(color: dignityFinanceBlack),
              ),
              centerTitle: false,
              titlePadding: insets.symmetric(
                horizontal: 5,
              ),
            ),
          ),
          SliverPadding(
            padding: insets.symmetric(
              vertical: 2,
              horizontal: 5,
            ),
            sliver: SliverList(
              delegate: SliverChildListDelegate(
                [
                  Table(
                    columnWidths: {
                      0: FlexColumnWidth(4),
                      1: FlexColumnWidth(.5),
                      2: FlexColumnWidth(4),
                      3: FlexColumnWidth(.5),
                      4: FlexColumnWidth(4),
                      5: FlexColumnWidth(.5),
                      6: FlexColumnWidth(4),
                    },
                    children: [
                      TableRow(children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(
                              fontSizer.sp(300),
                            ),
                            border: Border.all(
                              color: dignityFinanceLightGrey,
                            ),
                          ),
                          padding: insets.symmetric(
                            horizontal: 3,
                            vertical: 2,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: dignityFinanceLightGrey,
                                  ),
                                  shape: BoxShape.circle,
                                ),
                                padding: insets.all(2),
                                child: Center(
                                  child: Icon(
                                    Icons.fastfood,
                                    size: fontSizer.sp(50),
                                  ),
                                ),
                              ),
                              DFSizedBox(
                                height: 3,
                              ),
                              DFText("All")
                            ],
                          ),
                        ),
                        DFSizedBox(width: 1),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(
                              fontSizer.sp(300),
                            ),
                            color: dignityFinanceYellow,
                            border: Border.all(
                              color: dignityFinanceLightGrey,
                            ),
                          ),
                          padding: insets.symmetric(
                            horizontal: 3,
                            vertical: 2,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: dignityFinanceWhite,
                                ),
                                padding: insets.all(2),
                                child: Center(
                                  child: Icon(
                                    Icons.fastfood,
                                    size: fontSizer.sp(50),
                                  ),
                                ),
                              ),
                              DFSizedBox(
                                height: 3.2,
                              ),
                              DFText("All")
                            ],
                          ),
                        ),
                        DFSizedBox(width: 1),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(
                              fontSizer.sp(300),
                            ),
                            border: Border.all(
                              color: dignityFinanceLightGrey,
                            ),
                          ),
                          padding: insets.symmetric(
                            horizontal: 3,
                            vertical: 2,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: dignityFinanceLightGrey,
                                  ),
                                  shape: BoxShape.circle,
                                ),
                                padding: insets.all(2),
                                child: Center(
                                  child: Icon(
                                    Icons.fastfood,
                                    size: fontSizer.sp(50),
                                  ),
                                ),
                              ),
                              DFSizedBox(
                                height: 3,
                              ),
                              DFText("All")
                            ],
                          ),
                        ),
                        DFSizedBox(width: 1),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(
                              fontSizer.sp(300),
                            ),
                            border: Border.all(
                              color: dignityFinanceLightGrey,
                            ),
                          ),
                          padding: insets.symmetric(
                            horizontal: 3,
                            vertical: 2,
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: dignityFinanceLightGrey,
                                  ),
                                  shape: BoxShape.circle,
                                ),
                                padding: insets.all(2),
                                child: Center(
                                  child: Icon(
                                    Icons.fastfood,
                                    size: fontSizer.sp(50),
                                  ),
                                ),
                              ),
                              DFSizedBox(
                                height: 3,
                              ),
                              DFText("All")
                            ],
                          ),
                        ),
                      ])
                    ],
                  ),
                ],
              ),
            ),
          ),
          SliverPadding(
            padding: insets.symmetric(
              vertical: 2,
              horizontal: 5,
            ),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: sizer.setHeight(2),
                crossAxisSpacing: sizer.setWidth(2),
                childAspectRatio: 3 / 4.3,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, idx) {
                  return Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          decoration: BoxDecoration(
                            color: dignityFinanceAsh,
                            borderRadius: BorderRadius.circular(
                              fontSizer.sp(40),
                            ),
                          ),
                          padding: insets.symmetric(
                            vertical: 2,
                            horizontal: 5,
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              RichText(
                                text: TextSpan(
                                  children: [
                                    TextSpan(text: "4.8"),
                                    TextSpan(
                                      text: "\u2605",
                                      style: lightText.copyWith(
                                        color: dignityFinanceYellow,
                                        fontSize: fontSizer.sp(30),
                                      ),
                                    ),
                                  ],
                                  style: lightText.copyWith(
                                    fontSize: fontSizer.sp(30),
                                    color: dignityFinanceText,
                                  ),
                                ),
                                textAlign: TextAlign.center,
                              ),
                              DFSizedBox(height: 1),
                              Expanded(
                                child: Stack(
                                  children: <Widget>[
                                    Positioned.fill(
                                      child: CircleAvatar(
                                        backgroundColor:
                                            dignityFinanceDarkYellow,
                                      ),
                                    ),
                                    Positioned(
                                      bottom: 0,
                                      left: 0,
                                      right: 0,
                                      child: Container(
                                        alignment: Alignment.bottomCenter,
                                        padding: insets.all(2),
                                        decoration: BoxDecoration(
                                            color: dignityFinanceWhite,
                                            shape: BoxShape.circle),
                                        child: Center(
                                          child: Icon(
                                            Icons.add,
                                            color: dignityFinanceBlack,
                                            size: fontSizer.sp(30),
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      DFSizedBox(height: 1),
                      DFText(
                        "Udon with Peanut",
                        textAlign: TextAlign.center,
                      )
                    ],
                  );
                },
                childCount: 100,
              ),
            ),
          )
        ],
      ),
    );
  }
}