add dimension box

lib/pages/home_page_welcome.dart

@@ -1,24 +1,19 @@
+import 'package:fcs/model/language_model.dart';
 import 'package:fcs/model/main_model.dart';
+import 'package:fcs/pages/contact.dart';
+import 'package:fcs/widget/banner.dart';
 import 'package:fcs/widget/bottom_up_page_route.dart';
+import 'package:fcs/widget/dimension_box.dart';
 import 'package:fcs/widget/localization/transalation.dart';
+import 'package:fcs/widget/offline_redirect.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_icons/flutter_icons.dart';
-import 'package:intl/intl.dart';
+import 'package:intl/intl.dart' as intl;
-
 import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
 
-import 'package:fcs/model/language_model.dart';
-
-import 'package:fcs/pages/contact.dart';
-
-import 'package:fcs/widget/banner.dart';
-import 'package:fcs/widget/localization/app_translations.dart';
-import 'package:fcs/widget/offline_redirect.dart';
-import 'package:flutter/cupertino.dart';
-
 import '../theme/theme.dart';
-
 import 'profile_page.dart';
 import 'signin_page.dart';
 
@@ -35,7 +30,9 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
   final log = Logger('_HomePageWelcomeState');
   bool login = false;
   bool customer = true;
-
+  double length = 10;
+  double width = 10;
+  double height = 10;
   @override
   void initState() {
     super.initState();
@@ -46,7 +43,7 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
   }
 
   int actualChart = 0;
-  final numberFormatter = new NumberFormat("#,###");
+  final numberFormatter = new intl.NumberFormat("#,###");
 
   String pin;
   List<bool> isSelected = [true, false];
@@ -130,71 +127,96 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
                       ]),
             body: Container(
                 decoration: BoxDecoration(
-                  gradient:
+                    gradient: LinearGradient(
-                      // RadialGradient(
+                  begin: Alignment.topCenter,
-                      //   center: const Alignment(-0.7, 0.6), // near the top right
+                  end: Alignment
-                      //   radius: 0.6,
+                      .bottomCenter, // 10% of the width, so there are ten blinds.
-                      //   colors: [
+                  colors: [
-                      //     secondaryColor,
+                    Color(0xd0272262),
-                      //     primaryColor, // yellow sun
+                    Color(0xfa272262),
-                      //   ],
+                  ], // whitish to gray
-                      //   stops: [0.4, 1.0],
+                )),
-                      // )
-                      LinearGradient(
-                    begin: Alignment.topCenter,
-                    end: Alignment
-                        .bottomCenter, // 10% of the width, so there are ten blinds.
-                    colors: [
-                      Color(0xd0272262),
-                      Color(0xfa272262),
-                      // Color(0xa0ff4400),
-                      // secondaryColor,
-                    ], // whitish to gray
-                  ),
-                  //     SweepGradient(
-                  //   center: FractionalOffset.centerLeft,
-                  //   startAngle: 0.0,
-                  //   endAngle: math.pi * 2,
-                  //   colors: const <Color>[
-                  //     secondaryColor,
-                  //     primaryColor,
-                  //     secondaryColor,
-                  //     primaryColor,
-                  //     secondaryColor,
-                  //   ],
-                  //   stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0],
-                  // ),
-                ),
                 child: Column(
                   children: <Widget>[
                     Expanded(
-                      child: ListView(children: [
+                      child: Column(
-                        Column(
+                        children: <Widget>[
-                          crossAxisAlignment: CrossAxisAlignment.center,
+                          Container(
-                          children: [
+                            padding: EdgeInsets.only(top: 50),
-                            Container(
+                            child: CircleAvatar(
-                              padding: EdgeInsets.only(top: 50),
+                                radius: (50),
-                              child: CircleAvatar(
+                                backgroundColor: Colors.white,
-                                  radius: (50),
+                                child: ClipRRect(
-                                  backgroundColor: Colors.white,
+                                  borderRadius: BorderRadius.circular(50),
-                                  child: ClipRRect(
+                                  child: Image.asset("assets/logo.jpg"),
-                                    borderRadius: BorderRadius.circular(50),
+                                )),
-                                    child: Image.asset("assets/logo.jpg"),
+                          ),
-                                  )),
+                          Padding(
+                            padding: const EdgeInsets.all(10.0),
+                            child: Text(
+                              "Welcome Cargo Services\nby FCS Trading",
+                              style: TextStyle(
+                                  color: Colors.white,
+                                  fontSize: 18,
+                                  fontFamily: "Roboto"),
                             ),
-                            Padding(
+                          ),
-                              padding: const EdgeInsets.all(10.0),
+                        ],
-                              child: Text(
+                      ),
-                                "Welcome Cargo Services\nby FCS Trading",
+                    ),
-                                style: TextStyle(
+                    Row(
-                                    color: Colors.white,
+                      children: <Widget>[
-                                    fontSize: 18,
+                        Expanded(
-                                    fontFamily: "Roboto"),
+                          child: Container(
-                              ),
+                            height: 200,
-                            )
+                            child: DimensionBox(
-                          ],
+                              length: length,
+                              width: width,
+                              height: height,
+                            ),
+                          ),
                         ),
-                      ]),
+                        RotatedBox(
+                          quarterTurns: -1,
+                          child: Slider(
+                            min: 6,
+                            max: 100,
+                            value: height,
+                            onChanged: (value) {
+                              setState(() {
+                                height = value;
+                              });
+                            },
+                          ),
+                        ),
+                      ],
+                    ),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: <Widget>[
+                        Slider(
+                          label: "Length",
+                          min: 6,
+                          max: 100,
+                          value: length,
+                          onChanged: (value) {
+                            setState(() {
+                              length = value;
+                            });
+                          },
+                        ),
+                        Slider(
+                          label: "Width",
+                          min: 6,
+                          max: 100,
+                          value: width,
+                          onChanged: (value) {
+                            setState(() {
+                              width = value;
+                            });
+                          },
+                        ),
+                      ],
                     ),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.center,
@@ -236,15 +258,6 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
                 icon: Icon(iconData, color: Colors.white70),
                 color: Colors.white70,
                 onPressed: null),
-            // RaisedButton(onPressed: ()=>{},child: Row(
-            //   children: <Widget>[
-            //     IconButton(
-            //     icon: Icon(iconData, ),
-            //     onPressed: null),
-            //     Text(text),
-            //   ],
-            // ),color: Colors.transparent,
-            // focusColor: Colors.transparent,),
             Text(
               text,
               style: subMenuStyle,

lib/widget/dimension_box.dart

@@ -0,0 +1,164 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+class DimensionBox extends StatelessWidget {
+  final double length;
+  final double width;
+  final double height;
+
+  DimensionBox({
+    Key key,
+    this.length,
+    this.width,
+    this.height,
+  }) : super(key: key);
+
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size.infinite,
+      painter:
+          DimensionBoxPainter(length: length, width: width, height: height),
+    );
+  }
+}
+
+class DimensionBoxPainter extends CustomPainter {
+  final double avatarRadius = 10;
+  final double length;
+  final double width;
+  final double height;
+
+  DimensionBoxPainter({this.length, this.width, this.height});
+
+  //3
+  final Color color = Colors.blueAccent;
+
+  //4
+  @override
+  void paint(Canvas canvas, Size size) {
+    final shapeBounds =
+        Rect.fromLTWH(0, 0, size.width, size.height - avatarRadius);
+
+    final centerAvatar = Offset(shapeBounds.center.dx, shapeBounds.bottom);
+    final avatarBounds =
+        Rect.fromCircle(center: centerAvatar, radius: avatarRadius).inflate(6);
+    _drawBackground(canvas, shapeBounds, avatarBounds);
+
+    final curvedShapeBounds = Rect.fromLTRB(
+      shapeBounds.left,
+      shapeBounds.top + shapeBounds.height * 0.35,
+      shapeBounds.right,
+      shapeBounds.bottom,
+    );
+    // _drawCurvedShape(canvas, curvedShapeBounds, avatarBounds);
+
+    _drawCube(
+        canvas, shapeBounds, length * 10, width * 10, height * 10, Colors.teal);
+  }
+
+  void _drawBackground(Canvas canvas, Rect shapeBounds, Rect avatarBounds) {
+    //1
+    final paint = Paint()..color = Colors.amberAccent;
+
+    //2
+    final backgroundPath = Path()
+      ..moveTo(shapeBounds.left, shapeBounds.top) //3
+      ..lineTo(shapeBounds.bottomLeft.dx, shapeBounds.bottomLeft.dy) //4
+      // ..arcTo(avatarBounds, -pi, pi, false) //5
+      ..lineTo(shapeBounds.bottomRight.dx, shapeBounds.bottomRight.dy) //6
+      ..lineTo(shapeBounds.topRight.dx, shapeBounds.topRight.dy) //7
+      ..close(); //8
+
+    //9
+    canvas.drawPath(backgroundPath, paint);
+  }
+
+  void _drawCurvedShape(Canvas canvas, Rect bounds, Rect avatarBounds) {
+    final paint = Paint()..color = Colors.amber;
+    final handlePoint = Offset(bounds.left + (bounds.width * 0.25), bounds.top);
+    final curvePath = Path()
+      ..moveTo(bounds.bottomLeft.dx, bounds.bottomLeft.dy) //4
+      ..arcTo(avatarBounds, -pi, pi, false) //5
+      ..lineTo(bounds.bottomRight.dx, bounds.bottomRight.dy) //6
+      ..lineTo(bounds.topRight.dx, bounds.topRight.dy) //7
+      ..quadraticBezierTo(handlePoint.dx, handlePoint.dy, bounds.bottomLeft.dx,
+          bounds.bottomLeft.dy) //8
+      ..close(); //9
+
+    canvas.drawPath(curvePath, paint);
+  }
+
+  void _drawCube(Canvas canvas, Rect shapeBounds, double wx, double wy,
+      double h, Color color) {
+    //1
+    final paintLeft = Paint()..color = Color(0xff838357);
+    paintLeft.strokeJoin = StrokeJoin.round;
+
+    double x = shapeBounds.bottomCenter.dx;
+    double y = shapeBounds.bottomCenter.dy * 0.9;
+
+    final leftFacePath = Path()
+      ..moveTo(x, y)
+      ..lineTo(x - wx, y - wx * 0.5)
+      ..lineTo(x - wx, y - h - wx * 0.5)
+      ..lineTo(x, y - h * 1)
+      ..close();
+    canvas.drawPath(leftFacePath, paintLeft);
+
+    final paintRight = Paint()..color = Color(0xff6f6f49);
+    paintRight.strokeJoin = StrokeJoin.round;
+    final rightFacePath = Path()
+      ..moveTo(x, y)
+      ..lineTo(x + wy, y - wy * 0.5)
+      ..lineTo(x + wy, y - h - wy * 0.5)
+      ..lineTo(x, y - h * 1)
+      ..close();
+    canvas.drawPath(rightFacePath, paintRight);
+
+    final paintTop = Paint()..color = Color(0xff989865);
+    paintTop.strokeJoin = StrokeJoin.round;
+    final topFacePath = Path()
+      ..moveTo(x, y - h)
+      ..lineTo(x - wx, y - h - wx * 0.5)
+      ..lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5))
+      ..lineTo(x + wy, y - h - wy * 0.5)
+      ..close();
+    canvas.drawPath(topFacePath, paintTop);
+
+    _drawText("length\n${length.toInt()}\"", canvas,
+        shapeBounds.bottomCenter.dx - 100, shapeBounds.bottomCenter.dy - 40);
+    _drawText("width\n${width.toInt()}\"", canvas,
+        shapeBounds.bottomCenter.dx + 100, shapeBounds.bottomCenter.dy - 40);
+    _drawText(
+        "height\n${height.toInt()}\"",
+        canvas,
+        shapeBounds.bottomCenter.dx,
+        shapeBounds.bottomCenter.dy - (h > 30 ? h / 2 : h) * 1.2);
+  }
+
+  _drawText(String text, Canvas canvas, double x, y) {
+    final textStyle = TextStyle(
+      color: Colors.white,
+      fontSize: 16,
+    );
+    final textSpan = TextSpan(
+      text: text,
+      style: textStyle,
+    );
+    final textPainter = TextPainter(
+        text: textSpan,
+        textDirection: TextDirection.ltr,
+        textAlign: TextAlign.center);
+    textPainter.layout(
+      minWidth: 0,
+      maxWidth: 50,
+    );
+    final offset = Offset(x, y);
+    textPainter.paint(canvas, offset);
+  }
+
+  @override
+  bool shouldRepaint(DimensionBoxPainter oldDelegate) {
+    return color != oldDelegate.color;
+  }
+}