diff --git a/lib/pages/home_page_welcome.dart b/lib/pages/home_page_welcome.dart index 4a927c4..2cf811b 100644 --- a/lib/pages/home_page_welcome.dart +++ b/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 { 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 { } int actualChart = 0; - final numberFormatter = new NumberFormat("#,###"); + final numberFormatter = new intl.NumberFormat("#,###"); String pin; List isSelected = [true, false]; @@ -130,71 +127,96 @@ class _HomePageWelcomeState extends State { ]), body: Container( decoration: BoxDecoration( - gradient: - // RadialGradient( - // center: const Alignment(-0.7, 0.6), // near the top right - // radius: 0.6, - // colors: [ - // secondaryColor, - // primaryColor, // yellow sun - // ], - // 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 [ - // secondaryColor, - // primaryColor, - // secondaryColor, - // primaryColor, - // secondaryColor, - // ], - // stops: const [0.0, 0.25, 0.5, 0.75, 1.0], - // ), - ), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment + .bottomCenter, // 10% of the width, so there are ten blinds. + colors: [ + Color(0xd0272262), + Color(0xfa272262), + ], // whitish to gray + )), child: Column( children: [ Expanded( - child: ListView(children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - padding: EdgeInsets.only(top: 50), - child: CircleAvatar( - radius: (50), - backgroundColor: Colors.white, - child: ClipRRect( - borderRadius: BorderRadius.circular(50), - child: Image.asset("assets/logo.jpg"), - )), + child: Column( + children: [ + Container( + padding: EdgeInsets.only(top: 50), + child: CircleAvatar( + radius: (50), + backgroundColor: Colors.white, + child: ClipRRect( + 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( - color: Colors.white, - fontSize: 18, - fontFamily: "Roboto"), - ), - ) - ], + ), + ], + ), + ), + Row( + children: [ + Expanded( + 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: [ + 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 { icon: Icon(iconData, color: Colors.white70), color: Colors.white70, onPressed: null), - // RaisedButton(onPressed: ()=>{},child: Row( - // children: [ - // IconButton( - // icon: Icon(iconData, ), - // onPressed: null), - // Text(text), - // ], - // ),color: Colors.transparent, - // focusColor: Colors.transparent,), Text( text, style: subMenuStyle, diff --git a/lib/widget/dimension_box.dart b/lib/widget/dimension_box.dart new file mode 100644 index 0000000..663c3e1 --- /dev/null +++ b/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; + } +}