add dimension box
This commit is contained in:
Sai Naw Wun
@@ -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,48 +127,20 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
|
||||
]),
|
||||
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(
|
||||
gradient: 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: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
padding: EdgeInsets.only(top: 50),
|
||||
child: CircleAvatar(
|
||||
@@ -191,10 +160,63 @@ class _HomePageWelcomeState extends State<HomePageWelcome> {
|
||||
fontSize: 18,
|
||||
fontFamily: "Roboto"),
|
||||
),
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
]),
|
||||
),
|
||||
Row(
|
||||
children: <Widget>[
|
||||
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: <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,
|
||||
|
||||
164
lib/widget/dimension_box.dart
Normal file
164
lib/widget/dimension_box.dart
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user