Commit 39ab7b67227e5b0606a77af36fedd406363776d7

Authored by 权海
1 parent 2a99dbee

feat(ui):移除watch theme中的dp

1 -import 'package:doublefeel_flutter/core/util/size_extensions.dart';  
2 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
3 import 'package:get/get.dart'; 2 import 'package:get/get.dart';
4 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart'; 3 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
@@ -20,11 +19,11 @@ class WatchThemeFriendPickerDialog extends StatelessWidget { @@ -20,11 +19,11 @@ class WatchThemeFriendPickerDialog extends StatelessWidget {
20 child: Align( 19 child: Align(
21 alignment: Alignment.bottomCenter, 20 alignment: Alignment.bottomCenter,
22 child: Container( 21 child: Container(
23 - height: 452.dp, 22 + height: 452,
24 width: double.infinity, 23 width: double.infinity,
25 decoration: BoxDecoration( 24 decoration: BoxDecoration(
26 color: WatchThemeColors.background, 25 color: WatchThemeColors.background,
27 - borderRadius: BorderRadius.vertical(top: Radius.circular(14.dp)), 26 + borderRadius: BorderRadius.vertical(top: Radius.circular(14)),
28 ), 27 ),
29 child: SafeArea( 28 child: SafeArea(
30 top: false, 29 top: false,
@@ -33,7 +32,7 @@ class WatchThemeFriendPickerDialog extends StatelessWidget { @@ -33,7 +32,7 @@ class WatchThemeFriendPickerDialog extends StatelessWidget {
33 Column( 32 Column(
34 children: [ 33 children: [
35 SizedBox( 34 SizedBox(
36 - height: 56.dp, 35 + height: 56,
37 child: Stack( 36 child: Stack(
38 alignment: Alignment.center, 37 alignment: Alignment.center,
39 children: [ 38 children: [
@@ -41,21 +40,21 @@ class WatchThemeFriendPickerDialog extends StatelessWidget { @@ -41,21 +40,21 @@ class WatchThemeFriendPickerDialog extends StatelessWidget {
41 context.l10n.watchThemeSelectFriend, 40 context.l10n.watchThemeSelectFriend,
42 style: TextStyle( 41 style: TextStyle(
43 color: WatchThemeColors.textPrimary, 42 color: WatchThemeColors.textPrimary,
44 - fontSize: 16.dp, 43 + fontSize: 16,
45 fontWeight: FontWeight.w600, 44 fontWeight: FontWeight.w600,
46 ), 45 ),
47 ), 46 ),
48 Positioned( 47 Positioned(
49 - left: 26.dp, 48 + left: 26,
50 child: GestureDetector( 49 child: GestureDetector(
51 behavior: HitTestBehavior.opaque, 50 behavior: HitTestBehavior.opaque,
52 onTap: Get.back, 51 onTap: Get.back,
53 child: SizedBox( 52 child: SizedBox(
54 - width: 32.dp,  
55 - height: 32.dp, 53 + width: 32,
  54 + height: 32,
56 child: Icon( 55 child: Icon(
57 Icons.close, 56 Icons.close,
58 - size: 22.dp, 57 + size: 22,
59 color: const Color(0xFFA084EF), 58 color: const Color(0xFFA084EF),
60 ), 59 ),
61 ), 60 ),
@@ -66,35 +65,35 @@ class WatchThemeFriendPickerDialog extends StatelessWidget { @@ -66,35 +65,35 @@ class WatchThemeFriendPickerDialog extends StatelessWidget {
66 ), 65 ),
67 Expanded( 66 Expanded(
68 child: ListView.separated( 67 child: ListView.separated(
69 - padding: EdgeInsets.fromLTRB(16.dp, 0, 16.dp, 84.dp), 68 + padding: EdgeInsets.fromLTRB(16, 0, 16, 84),
70 itemBuilder: (_, index) { 69 itemBuilder: (_, index) {
71 return _FriendPlaceholderCard(selected: index == 0); 70 return _FriendPlaceholderCard(selected: index == 0);
72 }, 71 },
73 - separatorBuilder: (_, __) => SizedBox(height: 12.dp), 72 + separatorBuilder: (_, __) => SizedBox(height: 12),
74 itemCount: 3, 73 itemCount: 3,
75 ), 74 ),
76 ), 75 ),
77 ], 76 ],
78 ), 77 ),
79 Positioned( 78 Positioned(
80 - left: 49.dp,  
81 - right: 47.dp,  
82 - bottom: 35.dp, 79 + left: 49,
  80 + right: 47,
  81 + bottom: 35,
83 child: GestureDetector( 82 child: GestureDetector(
84 behavior: HitTestBehavior.opaque, 83 behavior: HitTestBehavior.opaque,
85 onTap: onConfirm ?? () => Get.back(result: true), 84 onTap: onConfirm ?? () => Get.back(result: true),
86 child: Container( 85 child: Container(
87 - height: 48.dp, 86 + height: 48,
88 alignment: Alignment.center, 87 alignment: Alignment.center,
89 decoration: BoxDecoration( 88 decoration: BoxDecoration(
90 color: WatchThemeColors.brand, 89 color: WatchThemeColors.brand,
91 - borderRadius: BorderRadius.circular(24.dp), 90 + borderRadius: BorderRadius.circular(24),
92 ), 91 ),
93 child: Text( 92 child: Text(
94 context.l10n.watchThemeSelectAndSync, 93 context.l10n.watchThemeSelectAndSync,
95 style: TextStyle( 94 style: TextStyle(
96 color: Colors.white, 95 color: Colors.white,
97 - fontSize: 16.dp, 96 + fontSize: 16,
98 fontWeight: FontWeight.w600, 97 fontWeight: FontWeight.w600,
99 ), 98 ),
100 ), 99 ),
@@ -118,45 +117,45 @@ class _FriendPlaceholderCard extends StatelessWidget { @@ -118,45 +117,45 @@ class _FriendPlaceholderCard extends StatelessWidget {
118 @override 117 @override
119 Widget build(BuildContext context) { 118 Widget build(BuildContext context) {
120 return Container( 119 return Container(
121 - height: 220.dp, 120 + height: 220,
122 decoration: BoxDecoration( 121 decoration: BoxDecoration(
123 color: selected ? Colors.white : const Color(0xFFFDFDFF), 122 color: selected ? Colors.white : const Color(0xFFFDFDFF),
124 - borderRadius: BorderRadius.circular(16.dp), 123 + borderRadius: BorderRadius.circular(16),
125 border: selected 124 border: selected
126 - ? Border.all(color: WatchThemeColors.brand, width: 2.dp) 125 + ? Border.all(color: WatchThemeColors.brand, width: 2)
127 : null, 126 : null,
128 ), 127 ),
129 - padding: EdgeInsets.all(20.dp), 128 + padding: EdgeInsets.all(20),
130 child: Column( 129 child: Column(
131 crossAxisAlignment: CrossAxisAlignment.start, 130 crossAxisAlignment: CrossAxisAlignment.start,
132 children: [ 131 children: [
133 Row( 132 Row(
134 children: [ 133 children: [
135 - _Block(width: 36.dp, height: 36.dp, radius: 18.dp),  
136 - SizedBox(width: 12.dp), 134 + _Block(width: 36, height: 36, radius: 18),
  135 + SizedBox(width: 12),
137 Column( 136 Column(
138 crossAxisAlignment: CrossAxisAlignment.start, 137 crossAxisAlignment: CrossAxisAlignment.start,
139 children: [ 138 children: [
140 - _Block(width: 132.dp, height: 16.dp, radius: 8.dp),  
141 - SizedBox(height: 6.dp),  
142 - _Block(width: 72.dp, height: 10.dp, radius: 5.dp), 139 + _Block(width: 132, height: 16, radius: 8),
  140 + SizedBox(height: 6),
  141 + _Block(width: 72, height: 10, radius: 5),
143 ], 142 ],
144 ), 143 ),
145 ], 144 ],
146 ), 145 ),
147 - SizedBox(height: 29.dp), 146 + SizedBox(height: 29),
148 Row( 147 Row(
149 children: [ 148 children: [
150 Expanded( 149 Expanded(
151 - child: _Block(height: 106.dp, radius: 18.dp), 150 + child: _Block(height: 106, radius: 18),
152 ), 151 ),
153 - SizedBox(width: 32.dp), 152 + SizedBox(width: 32),
154 Expanded( 153 Expanded(
155 child: Column( 154 child: Column(
156 children: [ 155 children: [
157 - _Block(height: 60.dp, radius: 16.dp),  
158 - SizedBox(height: 4.dp),  
159 - _Block(height: 60.dp, radius: 16.dp), 156 + _Block(height: 60, radius: 16),
  157 + SizedBox(height: 4),
  158 + _Block(height: 60, radius: 16),
160 ], 159 ],
161 ), 160 ),
162 ), 161 ),
1 -import 'package:doublefeel_flutter/core/util/size_extensions.dart';  
2 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
3 import 'package:get/get.dart'; 2 import 'package:get/get.dart';
4 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart'; 3 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
@@ -14,11 +13,11 @@ class WatchThemeNoWatchDialog extends StatelessWidget { @@ -14,11 +13,11 @@ class WatchThemeNoWatchDialog extends StatelessWidget {
14 backgroundColor: Colors.transparent, 13 backgroundColor: Colors.transparent,
15 insetPadding: EdgeInsets.zero, 14 insetPadding: EdgeInsets.zero,
16 child: Container( 15 child: Container(
17 - width: 300.dp,  
18 - padding: EdgeInsets.fromLTRB(24.dp, 24.dp, 24.dp, 20.dp), 16 + width: 300,
  17 + padding: EdgeInsets.fromLTRB(24, 24, 24, 20),
19 decoration: BoxDecoration( 18 decoration: BoxDecoration(
20 color: Colors.white, 19 color: Colors.white,
21 - borderRadius: BorderRadius.circular(24.dp), 20 + borderRadius: BorderRadius.circular(24),
22 ), 21 ),
23 child: Column( 22 child: Column(
24 mainAxisSize: MainAxisSize.min, 23 mainAxisSize: MainAxisSize.min,
@@ -28,36 +27,36 @@ class WatchThemeNoWatchDialog extends StatelessWidget { @@ -28,36 +27,36 @@ class WatchThemeNoWatchDialog extends StatelessWidget {
28 textAlign: TextAlign.center, 27 textAlign: TextAlign.center,
29 style: TextStyle( 28 style: TextStyle(
30 color: const Color(0xFF141414), 29 color: const Color(0xFF141414),
31 - fontSize: 18.dp, 30 + fontSize: 18,
32 fontWeight: FontWeight.w600, 31 fontWeight: FontWeight.w600,
33 ), 32 ),
34 ), 33 ),
35 - SizedBox(height: 16.dp), 34 + SizedBox(height: 16),
36 Text( 35 Text(
37 context.l10n.watchThemeNoWatchMessage, 36 context.l10n.watchThemeNoWatchMessage,
38 textAlign: TextAlign.center, 37 textAlign: TextAlign.center,
39 style: TextStyle( 38 style: TextStyle(
40 color: const Color(0xFF6E6D80), 39 color: const Color(0xFF6E6D80),
41 - fontSize: 15.dp, 40 + fontSize: 15,
42 ), 41 ),
43 ), 42 ),
44 - SizedBox(height: 20.dp), 43 + SizedBox(height: 20),
45 GestureDetector( 44 GestureDetector(
46 behavior: HitTestBehavior.opaque, 45 behavior: HitTestBehavior.opaque,
47 onTap: Get.back, 46 onTap: Get.back,
48 child: Container( 47 child: Container(
49 - width: 220.dp,  
50 - height: 48.dp, 48 + width: 220,
  49 + height: 48,
51 alignment: Alignment.center, 50 alignment: Alignment.center,
52 decoration: BoxDecoration( 51 decoration: BoxDecoration(
53 color: WatchThemeColors.brand, 52 color: WatchThemeColors.brand,
54 - borderRadius: BorderRadius.circular(24.dp), 53 + borderRadius: BorderRadius.circular(24),
55 ), 54 ),
56 child: Text( 55 child: Text(
57 context.l10n.watchThemeOk, 56 context.l10n.watchThemeOk,
58 style: TextStyle( 57 style: TextStyle(
59 color: Colors.white, 58 color: Colors.white,
60 - fontSize: 14.dp, 59 + fontSize: 14,
61 fontWeight: FontWeight.w500, 60 fontWeight: FontWeight.w500,
62 ), 61 ),
63 ), 62 ),
1 -import 'package:doublefeel_flutter/core/util/size_extensions.dart';  
2 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
3 import 'package:get/get.dart'; 2 import 'package:get/get.dart';
4 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart'; 3 import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
@@ -45,35 +44,35 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> { @@ -45,35 +44,35 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> {
45 child: Align( 44 child: Align(
46 alignment: Alignment.bottomCenter, 45 alignment: Alignment.bottomCenter,
47 child: Container( 46 child: Container(
48 - height: 452.dp, 47 + height: 452,
49 width: double.infinity, 48 width: double.infinity,
50 decoration: BoxDecoration( 49 decoration: BoxDecoration(
51 color: WatchThemeColors.background, 50 color: WatchThemeColors.background,
52 - borderRadius: BorderRadius.vertical(top: Radius.circular(14.dp)), 51 + borderRadius: BorderRadius.vertical(top: Radius.circular(14)),
53 ), 52 ),
54 child: SafeArea( 53 child: SafeArea(
55 top: false, 54 top: false,
56 child: Stack( 55 child: Stack(
57 children: [ 56 children: [
58 Positioned( 57 Positioned(
59 - left: 26.dp,  
60 - top: 12.dp, 58 + left: 26,
  59 + top: 12,
61 child: GestureDetector( 60 child: GestureDetector(
62 behavior: HitTestBehavior.opaque, 61 behavior: HitTestBehavior.opaque,
63 onTap: Get.back, 62 onTap: Get.back,
64 child: SizedBox( 63 child: SizedBox(
65 - width: 32.dp,  
66 - height: 32.dp, 64 + width: 32,
  65 + height: 32,
67 child: Icon( 66 child: Icon(
68 Icons.close, 67 Icons.close,
69 - size: 22.dp, 68 + size: 22,
70 color: const Color(0xFFA084EF), 69 color: const Color(0xFFA084EF),
71 ), 70 ),
72 ), 71 ),
73 ), 72 ),
74 ), 73 ),
75 Positioned( 74 Positioned(
76 - top: 66.dp, 75 + top: 66,
77 left: 0, 76 left: 0,
78 right: 0, 77 right: 0,
79 child: Center( 78 child: Center(
@@ -84,15 +83,15 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> { @@ -84,15 +83,15 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> {
84 ), 83 ),
85 ), 84 ),
86 Positioned( 85 Positioned(
87 - top: 246.dp, 86 + top: 246,
88 left: 0, 87 left: 0,
89 right: 0, 88 right: 0,
90 child: _buildMessage(), 89 child: _buildMessage(),
91 ), 90 ),
92 Positioned( 91 Positioned(
93 - left: 49.dp,  
94 - right: 47.dp,  
95 - bottom: 35.dp, 92 + left: 49,
  93 + right: 47,
  94 + bottom: 35,
96 child: _buildAction(), 95 child: _buildAction(),
97 ), 96 ),
98 ], 97 ],
@@ -106,13 +105,13 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> { @@ -106,13 +105,13 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> {
106 Widget _buildMessage() { 105 Widget _buildMessage() {
107 return switch (_state) { 106 return switch (_state) {
108 _WatchThemeSyncState.intro => Padding( 107 _WatchThemeSyncState.intro => Padding(
109 - padding: EdgeInsets.symmetric(horizontal: 46.dp), 108 + padding: EdgeInsets.symmetric(horizontal: 46),
110 child: Text( 109 child: Text(
111 context.l10n.watchThemeSyncIntro, 110 context.l10n.watchThemeSyncIntro,
112 textAlign: TextAlign.center, 111 textAlign: TextAlign.center,
113 style: TextStyle( 112 style: TextStyle(
114 color: WatchThemeColors.textPrimary, 113 color: WatchThemeColors.textPrimary,
115 - fontSize: 14.dp, 114 + fontSize: 14,
116 height: 1.35, 115 height: 1.35,
117 ), 116 ),
118 ), 117 ),
@@ -122,15 +121,15 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> { @@ -122,15 +121,15 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> {
122 textAlign: TextAlign.center, 121 textAlign: TextAlign.center,
123 style: TextStyle( 122 style: TextStyle(
124 color: WatchThemeColors.textPrimary, 123 color: WatchThemeColors.textPrimary,
125 - fontSize: 14.dp, 124 + fontSize: 14,
126 ), 125 ),
127 ), 126 ),
128 _WatchThemeSyncState.done => Row( 127 _WatchThemeSyncState.done => Row(
129 mainAxisAlignment: MainAxisAlignment.center, 128 mainAxisAlignment: MainAxisAlignment.center,
130 children: [ 129 children: [
131 Container( 130 Container(
132 - width: 14.dp,  
133 - height: 14.dp, 131 + width: 14,
  132 + height: 14,
134 decoration: BoxDecoration( 133 decoration: BoxDecoration(
135 color: _success 134 color: _success
136 ? WatchThemeColors.excellent 135 ? WatchThemeColors.excellent
@@ -139,18 +138,18 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> { @@ -139,18 +138,18 @@ class _WatchThemeSyncDialogState extends State<WatchThemeSyncDialog> {
139 ), 138 ),
140 child: Icon( 139 child: Icon(
141 _success ? Icons.check : Icons.close, 140 _success ? Icons.check : Icons.close,
142 - size: 10.dp, 141 + size: 10,
143 color: Colors.white, 142 color: Colors.white,
144 ), 143 ),
145 ), 144 ),
146 - SizedBox(width: 4.dp), 145 + SizedBox(width: 4),
147 Text( 146 Text(
148 _success 147 _success
149 ? context.l10n.watchThemeSyncComplete 148 ? context.l10n.watchThemeSyncComplete
150 : context.l10n.watchThemeSyncFailed, 149 : context.l10n.watchThemeSyncFailed,
151 style: TextStyle( 150 style: TextStyle(
152 color: WatchThemeColors.textPrimary, 151 color: WatchThemeColors.textPrimary,
153 - fontSize: 14.dp, 152 + fontSize: 14,
154 ), 153 ),
155 ), 154 ),
156 ], 155 ],
@@ -188,17 +187,17 @@ class _PrimaryButton extends StatelessWidget { @@ -188,17 +187,17 @@ class _PrimaryButton extends StatelessWidget {
188 behavior: HitTestBehavior.opaque, 187 behavior: HitTestBehavior.opaque,
189 onTap: onTap, 188 onTap: onTap,
190 child: Container( 189 child: Container(
191 - height: 48.dp, 190 + height: 48,
192 alignment: Alignment.center, 191 alignment: Alignment.center,
193 decoration: BoxDecoration( 192 decoration: BoxDecoration(
194 color: WatchThemeColors.brand, 193 color: WatchThemeColors.brand,
195 - borderRadius: BorderRadius.circular(24.dp), 194 + borderRadius: BorderRadius.circular(24),
196 ), 195 ),
197 child: Text( 196 child: Text(
198 label, 197 label,
199 style: TextStyle( 198 style: TextStyle(
200 color: Colors.white, 199 color: Colors.white,
201 - fontSize: 16.dp, 200 + fontSize: 16,
202 fontWeight: FontWeight.w600, 201 fontWeight: FontWeight.w600,
203 ), 202 ),
204 ), 203 ),
@@ -215,9 +214,9 @@ class _ProgressButton extends StatelessWidget { @@ -215,9 +214,9 @@ class _ProgressButton extends StatelessWidget {
215 @override 214 @override
216 Widget build(BuildContext context) { 215 Widget build(BuildContext context) {
217 return ClipRRect( 216 return ClipRRect(
218 - borderRadius: BorderRadius.circular(24.dp), 217 + borderRadius: BorderRadius.circular(24),
219 child: SizedBox( 218 child: SizedBox(
220 - height: 48.dp, 219 + height: 48,
221 child: Stack( 220 child: Stack(
222 fit: StackFit.expand, 221 fit: StackFit.expand,
223 children: [ 222 children: [
@@ -234,7 +233,7 @@ class _ProgressButton extends StatelessWidget { @@ -234,7 +233,7 @@ class _ProgressButton extends StatelessWidget {
234 ), 233 ),
235 style: TextStyle( 234 style: TextStyle(
236 color: Colors.white, 235 color: Colors.white,
237 - fontSize: 16.dp, 236 + fontSize: 16,
238 fontWeight: FontWeight.w600, 237 fontWeight: FontWeight.w600,
239 ), 238 ),
240 ), 239 ),