Commit f0d56772b1dada8b204a69f26763c6ccb1102b11
1 parent
d35a4e87
feat:更新尺寸适配
Showing
11 changed files
with
102 additions
and
68 deletions
lib/app/app.dart
... | ... | @@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; |
2 | 2 | import 'package:flutter_bloc/flutter_bloc.dart'; |
3 | 3 | import 'package:flutter_easyloading/flutter_easyloading.dart'; |
4 | 4 | import 'package:flutter_screenutil/flutter_screenutil.dart'; |
5 | +import 'package:responsive_framework/breakpoint.dart'; | |
6 | +import 'package:responsive_framework/responsive_breakpoints.dart'; | |
5 | 7 | import 'package:wow_english/common/widgets/hide_keyboard_widget.dart'; |
6 | 8 | import 'package:wow_english/route/route.dart'; |
7 | 9 | import 'package:wow_english/tab/blocs/tab_bloc.dart'; |
... | ... | @@ -25,7 +27,16 @@ class App extends StatelessWidget { |
25 | 27 | colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), |
26 | 28 | useMaterial3: true, |
27 | 29 | ), |
28 | - builder: EasyLoading.init(), | |
30 | + builder: EasyLoading.init( | |
31 | + builder: (context,child) => ResponsiveBreakpoints( | |
32 | + breakpoints: const [ | |
33 | + Breakpoint(start: 0, end: 450, name: MOBILE), | |
34 | + Breakpoint(start: 451, end: 800, name: TABLET), | |
35 | + Breakpoint(start: 801, end: 1920, name: DESKTOP), | |
36 | + Breakpoint(start: 1921, end: double.infinity, name: '4K'), | |
37 | + ], | |
38 | + child: child!) | |
39 | + ), | |
29 | 40 | initialRoute: AppRouteName.splash, |
30 | 41 | navigatorKey: AppRouter.navigatorKey, |
31 | 42 | onGenerateRoute: AppRouter.generateRoute, | ... | ... |
lib/common/widgets/textfield_customer_widget.dart
... | ... | @@ -59,14 +59,14 @@ class _TextFieldCustomerWidgetState extends State<TextFieldCustomerWidget> { |
59 | 59 | decoration: InputDecoration( |
60 | 60 | hintText: widget.hitText??'', |
61 | 61 | border: InputBorder.none, |
62 | - hintStyle: widget.hitStyle?? const TextStyle( | |
63 | - fontSize: 16, | |
64 | - color:Color(0xFF999999) | |
62 | + hintStyle: widget.hitStyle?? TextStyle( | |
63 | + fontSize: 16.sp, | |
64 | + color:const Color(0xFF999999) | |
65 | 65 | ) |
66 | 66 | ), |
67 | - style: widget.textStyle?? const TextStyle( | |
68 | - color: Color(0xFF333333), | |
69 | - fontSize: 16, | |
67 | + style: widget.textStyle?? TextStyle( | |
68 | + color: const Color(0xFF333333), | |
69 | + fontSize: 16.sp, | |
70 | 70 | ), |
71 | 71 | onChanged: widget.onChangeValue, |
72 | 72 | ), | ... | ... |
lib/common/widgets/we_app_bar.dart
lib/home/home_page.dart
lib/lessons/lesson_page.dart
... | ... | @@ -29,7 +29,7 @@ class LessonPage extends StatelessWidget { |
29 | 29 | |
30 | 30 | class _LessonPageView extends StatelessWidget { |
31 | 31 | |
32 | - final double _cardHeight = 240.0; | |
32 | + final double _cardHeight = 240.h; | |
33 | 33 | |
34 | 34 | final double _numItemHeight = 32.0; |
35 | 35 | |
... | ... | @@ -86,15 +86,15 @@ class _LessonPageView extends StatelessWidget { |
86 | 86 | ), |
87 | 87 | 32.verticalSpace, |
88 | 88 | SizedBox( |
89 | - height: 32, | |
90 | - width: 660, | |
89 | + height: 32.h, | |
90 | + width: 660.w, | |
91 | 91 | child: ListView.builder( |
92 | 92 | itemCount: 10, |
93 | 93 | scrollDirection: Axis.horizontal, |
94 | 94 | itemBuilder: (BuildContext context,int index){ |
95 | 95 | return Container( |
96 | - height: 32, | |
97 | - width: 66, | |
96 | + height: 32.h, | |
97 | + width: 66.w, | |
98 | 98 | padding: const EdgeInsets.symmetric(horizontal: 5), |
99 | 99 | child: GestureDetector( |
100 | 100 | onTap: () { | ... | ... |
lib/listen/widgets/listen_item_widget.dart
... | ... | @@ -22,21 +22,21 @@ class ListenItemWidget extends StatelessWidget { |
22 | 22 | } |
23 | 23 | }, |
24 | 24 | child: ClipRRect( |
25 | - borderRadius:BorderRadius.circular(90), | |
25 | + borderRadius:BorderRadius.circular(90.r), | |
26 | 26 | child: Stack( |
27 | 27 | alignment:Alignment.center, |
28 | 28 | children: [ |
29 | 29 | Image.network( |
30 | 30 | 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa1c2213-820a-4223-8757-5f8cee318a28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688713226&t=192b18a613683bcdc5bd76f65c9ff032', |
31 | - height: 180, | |
32 | - width: 180, | |
31 | + height: 180.w, | |
32 | + width: 180.w, | |
33 | 33 | fit: BoxFit.fill, |
34 | 34 | ), |
35 | 35 | Offstage( |
36 | 36 | offstage: isLock??false, |
37 | 37 | child: Container( |
38 | - height: 180, | |
39 | - width: 180, | |
38 | + height: 180.w, | |
39 | + width: 180.w, | |
40 | 40 | color: const Color.fromRGBO(1, 1, 0, 0.5), |
41 | 41 | ), |
42 | 42 | ), |
... | ... | @@ -44,8 +44,8 @@ class ListenItemWidget extends StatelessWidget { |
44 | 44 | offstage: isLock, |
45 | 45 | child: Image.asset( |
46 | 46 | 'listen_lock'.assetPng, |
47 | - height: 36, | |
48 | - width: 41, | |
47 | + height: 36.h, | |
48 | + width: 41.w, | |
49 | 49 | ), |
50 | 50 | ) |
51 | 51 | ], |
... | ... | @@ -55,7 +55,7 @@ class ListenItemWidget extends StatelessWidget { |
55 | 55 | 23.verticalSpace, |
56 | 56 | Container( |
57 | 57 | height: 40.h, |
58 | - padding: const EdgeInsets.symmetric(horizontal: 22), | |
58 | + padding: EdgeInsets.symmetric(horizontal: 22.w), | |
59 | 59 | decoration: BoxDecoration( |
60 | 60 | color: const Color(0xFFFFCC00), |
61 | 61 | borderRadius: BorderRadius.circular(20.r), |
... | ... | @@ -68,7 +68,8 @@ class ListenItemWidget extends StatelessWidget { |
68 | 68 | child: Text( |
69 | 69 | 'listen title', |
70 | 70 | style: TextStyle( |
71 | - fontSize: 15.sp | |
71 | + fontSize: 20.sp, | |
72 | + color: const Color(0xFF333333) | |
72 | 73 | ), |
73 | 74 | ), |
74 | 75 | ) | ... | ... |
lib/login/forgetpwd/forget_password_home_page.dart
... | ... | @@ -54,11 +54,11 @@ class _ForgetPasswordHomePageView extends StatelessWidget { |
54 | 54 | width: 83.5.h, |
55 | 55 | ), |
56 | 56 | 12.5.horizontalSpace, |
57 | - const Text( | |
57 | + Text( | |
58 | 58 | '修改密码\n请输入您的手机号和验证码吧', |
59 | 59 | style: TextStyle( |
60 | - fontSize: 16.5, | |
61 | - color: Color(0xFF666666) | |
60 | + fontSize: 16.sp, | |
61 | + color: const Color(0xFF666666) | |
62 | 62 | ), |
63 | 63 | ) |
64 | 64 | ], |
... | ... | @@ -143,14 +143,15 @@ class _ForgetPasswordHomePageView extends StatelessWidget { |
143 | 143 | fit: BoxFit.fill |
144 | 144 | ), |
145 | 145 | ), |
146 | - padding: const EdgeInsets.symmetric( | |
147 | - horizontal: 28.0, | |
148 | - vertical: 14.0 | |
146 | + padding: EdgeInsets.symmetric( | |
147 | + horizontal: 28.w, | |
148 | + vertical: 14.h | |
149 | 149 | ), |
150 | - child:const Text( | |
150 | + child: Text( | |
151 | 151 | '确定', |
152 | 152 | style: TextStyle( |
153 | - fontSize: 16 | |
153 | + fontSize: 16.sp, | |
154 | + color: Colors.white | |
154 | 155 | ), |
155 | 156 | ), |
156 | 157 | ), | ... | ... |
lib/login/loginpage/login_page.dart
... | ... | @@ -59,9 +59,12 @@ class _LoginPageView extends StatelessWidget { |
59 | 59 | fit: BoxFit.fill |
60 | 60 | ), |
61 | 61 | ), |
62 | - padding: const EdgeInsets.symmetric(horizontal: 18.0), | |
62 | + padding: EdgeInsets.symmetric(horizontal: 18.w,vertical: 5.h), | |
63 | 63 | child: Text( |
64 | - bloc.loginType == LoginType.sms?'密码登陆':'验证码密码' | |
64 | + bloc.loginType == LoginType.sms?'密码登陆':'验证码密码', | |
65 | + style: TextStyle( | |
66 | + fontSize: 16.sp | |
67 | + ), | |
65 | 68 | ), |
66 | 69 | ), |
67 | 70 | ) |
... | ... | @@ -95,18 +98,18 @@ class _LoginPageView extends StatelessWidget { |
95 | 98 | RichText( |
96 | 99 | text: TextSpan( |
97 | 100 | children:[ |
98 | - const TextSpan( | |
101 | + TextSpan( | |
99 | 102 | text: '我已阅读并同意', |
100 | 103 | style: TextStyle( |
101 | - fontSize: 12, | |
102 | - color: Color(0xFF333333), | |
104 | + fontSize: 12.sp, | |
105 | + color: const Color(0xFF333333), | |
103 | 106 | ) |
104 | 107 | ), |
105 | 108 | TextSpan( |
106 | 109 | text: '《用户隐私协议》', |
107 | - style: const TextStyle( | |
108 | - fontSize: 12, | |
109 | - color: Color(0xFF333333), | |
110 | + style: TextStyle( | |
111 | + fontSize: 12.sp, | |
112 | + color: const Color(0xFF333333), | |
110 | 113 | ), |
111 | 114 | recognizer: TapGestureRecognizer()..onTap = (){ |
112 | 115 | Navigator.of(context).pushNamed( |
... | ... | @@ -116,18 +119,18 @@ class _LoginPageView extends StatelessWidget { |
116 | 119 | 'webViewTitle':'用户隐私协议' |
117 | 120 | }); |
118 | 121 | }), |
119 | - const TextSpan( | |
122 | + TextSpan( | |
120 | 123 | text: ',', |
121 | 124 | style: TextStyle( |
122 | - fontSize: 12, | |
123 | - color: Color(0xFF333333) | |
125 | + fontSize: 12.sp, | |
126 | + color: const Color(0xFF333333) | |
124 | 127 | ) |
125 | 128 | ), |
126 | 129 | TextSpan( |
127 | 130 | text: '《儿童隐私政策》', |
128 | - style: const TextStyle( | |
129 | - fontSize: 12, | |
130 | - color: Color(0xFF333333) | |
131 | + style: TextStyle( | |
132 | + fontSize: 12.sp, | |
133 | + color: const Color(0xFF333333) | |
131 | 134 | ), |
132 | 135 | recognizer: TapGestureRecognizer()..onTap = (){ |
133 | 136 | Navigator.of(context).pushNamed( |
... | ... | @@ -157,12 +160,15 @@ class _LoginPageView extends StatelessWidget { |
157 | 160 | fit: BoxFit.fill |
158 | 161 | ), |
159 | 162 | ), |
160 | - padding: const EdgeInsets.symmetric( | |
161 | - horizontal: 28.0, | |
162 | - vertical: 14.0 | |
163 | + padding: EdgeInsets.symmetric( | |
164 | + horizontal: 28.w, | |
165 | + vertical: 14.h | |
163 | 166 | ), |
164 | - child: const Text( | |
165 | - '登录' | |
167 | + child: Text( | |
168 | + '登录', | |
169 | + style: TextStyle( | |
170 | + fontSize: 16.sp | |
171 | + ), | |
166 | 172 | ), |
167 | 173 | ), |
168 | 174 | ) |
... | ... | @@ -198,7 +204,11 @@ class _LoginPageView extends StatelessWidget { |
198 | 204 | controller: bloc.phoneNumController, |
199 | 205 | ), |
200 | 206 | 6.5.verticalSpace, |
201 | - const Text('未注册用户登录默认注册'), | |
207 | + Text('未注册用户登录默认注册', | |
208 | + style: TextStyle( | |
209 | + fontSize: 12.sp, | |
210 | + color: const Color(0xFF999999) | |
211 | + ),), | |
202 | 212 | 4.5.verticalSpace, |
203 | 213 | Row( |
204 | 214 | mainAxisAlignment: MainAxisAlignment.spaceBetween, |
... | ... | @@ -215,8 +225,7 @@ class _LoginPageView extends StatelessWidget { |
215 | 225 | controller: bloc.checkNumController, |
216 | 226 | ) |
217 | 227 | ), |
218 | - TimerWidget( | |
219 | - canSendSms: bloc.canSendSms) | |
228 | + TimerWidget(canSendSms: bloc.canSendSms) | |
220 | 229 | ], |
221 | 230 | ) |
222 | 231 | ], |
... | ... | @@ -289,8 +298,11 @@ class _LoginPageView extends StatelessWidget { |
289 | 298 | width: 100.w, |
290 | 299 | height: 55.h, |
291 | 300 | alignment: Alignment.centerLeft, |
292 | - child: const Text( | |
293 | - '忘记密码 ?' | |
301 | + child: Text( | |
302 | + '忘记密码 ?', | |
303 | + style: TextStyle( | |
304 | + fontSize: 12.sp | |
305 | + ), | |
294 | 306 | ), |
295 | 307 | ), |
296 | 308 | ) | ... | ... |
lib/login/loginpage/time_widget.dart
1 | 1 | import 'package:flutter/cupertino.dart'; |
2 | 2 | import 'package:flutter/material.dart'; |
3 | 3 | import 'package:flutter_bloc/flutter_bloc.dart'; |
4 | +import 'package:flutter_screenutil/flutter_screenutil.dart'; | |
4 | 5 | import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart'; |
5 | 6 | import 'package:wow_english/common/extension/string_extension.dart'; |
6 | 7 | import 'package:wow_english/common/widgets/timer_ticker.dart'; |
... | ... | @@ -43,9 +44,7 @@ class TimerWidgetView extends StatelessWidget { |
43 | 44 | final bloc = BlocProvider.of<TimerBloc>(context); |
44 | 45 | return GestureDetector( |
45 | 46 | onTap: () { |
46 | - print(bloc.isCountTimer); | |
47 | 47 | if (canSendSms && !bloc.isCountTimer ) { |
48 | - print(state.duration); | |
49 | 48 | bloc.add(StartEvent(duration: state.duration)); |
50 | 49 | } |
51 | 50 | }, |
... | ... | @@ -58,13 +57,16 @@ class TimerWidgetView extends StatelessWidget { |
58 | 57 | fit: BoxFit.fill |
59 | 58 | ), |
60 | 59 | ), |
61 | - padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0), | |
60 | + padding: EdgeInsets.symmetric(horizontal:12.w,vertical: 15.h), | |
62 | 61 | child: Row( |
63 | 62 | children: [ |
64 | 63 | if (state is RunningState)...[ |
65 | 64 | const TimerText() |
66 | 65 | ] else ...[ |
67 | - const Text('获取验证码') | |
66 | + Text('获取验证码', | |
67 | + style: TextStyle( | |
68 | + fontSize: 12.sp | |
69 | + ),) | |
68 | 70 | ] |
69 | 71 | ], |
70 | 72 | ), |
... | ... | @@ -83,6 +85,9 @@ class TimerText extends StatelessWidget { |
83 | 85 | final secondsStr = duration.toString().padLeft(2, '0'); |
84 | 86 | return Text( |
85 | 87 | '${secondsStr}s后再次获取', |
88 | + style: TextStyle( | |
89 | + fontSize: 12.sp | |
90 | + ), | |
86 | 91 | ); |
87 | 92 | } |
88 | 93 | } | ... | ... |
lib/login/setpwd/set_pwd_page.dart
... | ... | @@ -55,11 +55,11 @@ class _SetPassWordPageView extends StatelessWidget { |
55 | 55 | width: 83.5.h, |
56 | 56 | ), |
57 | 57 | 12.5.horizontalSpace, |
58 | - const Text( | |
58 | + Text( | |
59 | 59 | '欢迎登录wow english\n接下来请设置一下您的密码吧!', |
60 | 60 | style: TextStyle( |
61 | - fontSize: 16.5, | |
62 | - color: Color(0xFF666666) | |
61 | + fontSize: 16.5.sp, | |
62 | + color: const Color(0xFF666666) | |
63 | 63 | ), |
64 | 64 | ) |
65 | 65 | ], |
... | ... | @@ -129,10 +129,11 @@ class _SetPassWordPageView extends StatelessWidget { |
129 | 129 | 9.verticalSpace, |
130 | 130 | Offstage( |
131 | 131 | offstage: bloc.passwordCheck, |
132 | - child: const Text( | |
132 | + child: Text( | |
133 | 133 | '请确认两次输入的密码是否一致', |
134 | 134 | style: TextStyle( |
135 | - color: Color(0xFF333333) | |
135 | + fontSize: 16.sp, | |
136 | + color: const Color(0xFF333333) | |
136 | 137 | ), |
137 | 138 | ), |
138 | 139 | ), |
... | ... | @@ -155,14 +156,15 @@ class _SetPassWordPageView extends StatelessWidget { |
155 | 156 | fit: BoxFit.fill |
156 | 157 | ), |
157 | 158 | ), |
158 | - padding: const EdgeInsets.symmetric( | |
159 | - horizontal: 28.0, | |
160 | - vertical: 14.0 | |
159 | + padding: EdgeInsets.symmetric( | |
160 | + horizontal: 28.w, | |
161 | + vertical: 14.h | |
161 | 162 | ), |
162 | - child: const Text( | |
163 | + child: Text( | |
163 | 164 | '确定', |
164 | 165 | style: TextStyle( |
165 | - color: Colors.white | |
166 | + color: Colors.white, | |
167 | + fontSize: 16.sp | |
166 | 168 | ), |
167 | 169 | ), |
168 | 170 | ), | ... | ... |