watch_face_preview.dart
2.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import 'dart:io';
import 'package:doublefeel_flutter/core/util/size_extensions.dart';
import 'package:doublefeel_flutter/r.dart';
import 'package:flutter/material.dart';
import 'watch_theme_colors.dart';
class WatchFacePreview extends StatelessWidget {
const WatchFacePreview({
super.key,
this.width = 134,
this.height = 160,
this.faceAsset,
this.faceFilePath,
});
final double width;
final double height;
final String? faceAsset;
final String? faceFilePath;
@override
Widget build(BuildContext context) {
final w = width.dp;
final h = height.dp;
final inset = 6.dp;
final knobWidth = (width * 0.067).dp;
final knobHeight = (height * 0.156).dp;
return SizedBox(
width: w + knobWidth,
height: h,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: w,
height: h,
decoration: BoxDecoration(
color: WatchThemeColors.watchShell,
borderRadius: BorderRadius.circular((width * 0.239).dp),
),
),
),
Positioned(
left: inset,
top: inset,
child: Container(
width: w - inset * 2,
height: h - inset * 2,
decoration: BoxDecoration(
color: WatchThemeColors.watchScreen,
borderRadius: BorderRadius.circular((width * 0.209).dp),
),
clipBehavior: Clip.antiAlias,
child: _buildFaceImage(),
),
),
Positioned(
left: w - 4.dp,
top: (height * 0.2375).dp,
child: Container(
width: knobWidth,
height: knobHeight,
decoration: BoxDecoration(
color: WatchThemeColors.watchShell,
borderRadius: BorderRadius.horizontal(
right: Radius.circular(5.dp),
),
),
),
),
Positioned(
left: w - 1.dp,
top: (height * 0.5125).dp,
child: Container(
width: 3.dp,
height: (height * 0.256).dp,
decoration: BoxDecoration(
color: WatchThemeColors.watchShell,
borderRadius: BorderRadius.horizontal(
right: Radius.circular(2.dp),
),
),
),
),
],
),
);
}
Widget _buildFaceImage() {
if (faceFilePath != null && faceFilePath!.isNotEmpty) {
return Image.file(File(faceFilePath!), fit: BoxFit.cover);
}
return Image.asset(
faceAsset ?? R.assetsImagesWatchThemeFaceDefault,
fit: BoxFit.cover,
);
}
}