Commit f0d56772b1dada8b204a69f26763c6ccb1102b11

Authored by liangchengyou
1 parent d35a4e87

feat:更新尺寸适配

lib/app/app.dart
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; @@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
2 import 'package:flutter_bloc/flutter_bloc.dart'; 2 import 'package:flutter_bloc/flutter_bloc.dart';
3 import 'package:flutter_easyloading/flutter_easyloading.dart'; 3 import 'package:flutter_easyloading/flutter_easyloading.dart';
4 import 'package:flutter_screenutil/flutter_screenutil.dart'; 4 import 'package:flutter_screenutil/flutter_screenutil.dart';
  5 +import 'package:responsive_framework/breakpoint.dart';
  6 +import 'package:responsive_framework/responsive_breakpoints.dart';
5 import 'package:wow_english/common/widgets/hide_keyboard_widget.dart'; 7 import 'package:wow_english/common/widgets/hide_keyboard_widget.dart';
6 import 'package:wow_english/route/route.dart'; 8 import 'package:wow_english/route/route.dart';
7 import 'package:wow_english/tab/blocs/tab_bloc.dart'; 9 import 'package:wow_english/tab/blocs/tab_bloc.dart';
@@ -25,7 +27,16 @@ class App extends StatelessWidget { @@ -25,7 +27,16 @@ class App extends StatelessWidget {
25 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), 27 colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
26 useMaterial3: true, 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 initialRoute: AppRouteName.splash, 40 initialRoute: AppRouteName.splash,
30 navigatorKey: AppRouter.navigatorKey, 41 navigatorKey: AppRouter.navigatorKey,
31 onGenerateRoute: AppRouter.generateRoute, 42 onGenerateRoute: AppRouter.generateRoute,
lib/common/widgets/textfield_customer_widget.dart
@@ -59,14 +59,14 @@ class _TextFieldCustomerWidgetState extends State<TextFieldCustomerWidget> { @@ -59,14 +59,14 @@ class _TextFieldCustomerWidgetState extends State<TextFieldCustomerWidget> {
59 decoration: InputDecoration( 59 decoration: InputDecoration(
60 hintText: widget.hitText??'', 60 hintText: widget.hitText??'',
61 border: InputBorder.none, 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 onChanged: widget.onChangeValue, 71 onChanged: widget.onChangeValue,
72 ), 72 ),
lib/common/widgets/we_app_bar.dart
1 import 'package:flutter/material.dart'; 1 import 'package:flutter/material.dart';
  2 +import 'package:flutter_screenutil/flutter_screenutil.dart';
2 import 'package:wow_english/common/extension/string_extension.dart'; 3 import 'package:wow_english/common/extension/string_extension.dart';
3 4
4 class WEAppBar extends StatelessWidget implements PreferredSizeWidget { 5 class WEAppBar extends StatelessWidget implements PreferredSizeWidget {
lib/home/home_page.dart
@@ -31,7 +31,7 @@ class _HomePageView extends StatelessWidget { @@ -31,7 +31,7 @@ class _HomePageView extends StatelessWidget {
31 } else if (type == HeaderActionType.listen) { 31 } else if (type == HeaderActionType.listen) {
32 Navigator.of(AppRouter.context).pushNamed(AppRouteName.listen); 32 Navigator.of(AppRouter.context).pushNamed(AppRouteName.listen);
33 } else if (type == HeaderActionType.shop) { 33 } else if (type == HeaderActionType.shop) {
34 - 34 +
35 } else { 35 } else {
36 36
37 } 37 }
lib/lessons/lesson_page.dart
@@ -29,7 +29,7 @@ class LessonPage extends StatelessWidget { @@ -29,7 +29,7 @@ class LessonPage extends StatelessWidget {
29 29
30 class _LessonPageView extends StatelessWidget { 30 class _LessonPageView extends StatelessWidget {
31 31
32 - final double _cardHeight = 240.0; 32 + final double _cardHeight = 240.h;
33 33
34 final double _numItemHeight = 32.0; 34 final double _numItemHeight = 32.0;
35 35
@@ -86,15 +86,15 @@ class _LessonPageView extends StatelessWidget { @@ -86,15 +86,15 @@ class _LessonPageView extends StatelessWidget {
86 ), 86 ),
87 32.verticalSpace, 87 32.verticalSpace,
88 SizedBox( 88 SizedBox(
89 - height: 32,  
90 - width: 660, 89 + height: 32.h,
  90 + width: 660.w,
91 child: ListView.builder( 91 child: ListView.builder(
92 itemCount: 10, 92 itemCount: 10,
93 scrollDirection: Axis.horizontal, 93 scrollDirection: Axis.horizontal,
94 itemBuilder: (BuildContext context,int index){ 94 itemBuilder: (BuildContext context,int index){
95 return Container( 95 return Container(
96 - height: 32,  
97 - width: 66, 96 + height: 32.h,
  97 + width: 66.w,
98 padding: const EdgeInsets.symmetric(horizontal: 5), 98 padding: const EdgeInsets.symmetric(horizontal: 5),
99 child: GestureDetector( 99 child: GestureDetector(
100 onTap: () { 100 onTap: () {
lib/listen/widgets/listen_item_widget.dart
@@ -22,21 +22,21 @@ class ListenItemWidget extends StatelessWidget { @@ -22,21 +22,21 @@ class ListenItemWidget extends StatelessWidget {
22 } 22 }
23 }, 23 },
24 child: ClipRRect( 24 child: ClipRRect(
25 - borderRadius:BorderRadius.circular(90), 25 + borderRadius:BorderRadius.circular(90.r),
26 child: Stack( 26 child: Stack(
27 alignment:Alignment.center, 27 alignment:Alignment.center,
28 children: [ 28 children: [
29 Image.network( 29 Image.network(
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', 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 fit: BoxFit.fill, 33 fit: BoxFit.fill,
34 ), 34 ),
35 Offstage( 35 Offstage(
36 offstage: isLock??false, 36 offstage: isLock??false,
37 child: Container( 37 child: Container(
38 - height: 180,  
39 - width: 180, 38 + height: 180.w,
  39 + width: 180.w,
40 color: const Color.fromRGBO(1, 1, 0, 0.5), 40 color: const Color.fromRGBO(1, 1, 0, 0.5),
41 ), 41 ),
42 ), 42 ),
@@ -44,8 +44,8 @@ class ListenItemWidget extends StatelessWidget { @@ -44,8 +44,8 @@ class ListenItemWidget extends StatelessWidget {
44 offstage: isLock, 44 offstage: isLock,
45 child: Image.asset( 45 child: Image.asset(
46 'listen_lock'.assetPng, 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,7 +55,7 @@ class ListenItemWidget extends StatelessWidget {
55 23.verticalSpace, 55 23.verticalSpace,
56 Container( 56 Container(
57 height: 40.h, 57 height: 40.h,
58 - padding: const EdgeInsets.symmetric(horizontal: 22), 58 + padding: EdgeInsets.symmetric(horizontal: 22.w),
59 decoration: BoxDecoration( 59 decoration: BoxDecoration(
60 color: const Color(0xFFFFCC00), 60 color: const Color(0xFFFFCC00),
61 borderRadius: BorderRadius.circular(20.r), 61 borderRadius: BorderRadius.circular(20.r),
@@ -68,7 +68,8 @@ class ListenItemWidget extends StatelessWidget { @@ -68,7 +68,8 @@ class ListenItemWidget extends StatelessWidget {
68 child: Text( 68 child: Text(
69 'listen title', 69 'listen title',
70 style: TextStyle( 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,11 +54,11 @@ class _ForgetPasswordHomePageView extends StatelessWidget {
54 width: 83.5.h, 54 width: 83.5.h,
55 ), 55 ),
56 12.5.horizontalSpace, 56 12.5.horizontalSpace,
57 - const Text( 57 + Text(
58 '修改密码\n请输入您的手机号和验证码吧', 58 '修改密码\n请输入您的手机号和验证码吧',
59 style: TextStyle( 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,14 +143,15 @@ class _ForgetPasswordHomePageView extends StatelessWidget {
143 fit: BoxFit.fill 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 style: TextStyle( 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,9 +59,12 @@ class _LoginPageView extends StatelessWidget {
59 fit: BoxFit.fill 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 child: Text( 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,18 +98,18 @@ class _LoginPageView extends StatelessWidget {
95 RichText( 98 RichText(
96 text: TextSpan( 99 text: TextSpan(
97 children:[ 100 children:[
98 - const TextSpan( 101 + TextSpan(
99 text: '我已阅读并同意', 102 text: '我已阅读并同意',
100 style: TextStyle( 103 style: TextStyle(
101 - fontSize: 12,  
102 - color: Color(0xFF333333), 104 + fontSize: 12.sp,
  105 + color: const Color(0xFF333333),
103 ) 106 )
104 ), 107 ),
105 TextSpan( 108 TextSpan(
106 text: '《用户隐私协议》', 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 recognizer: TapGestureRecognizer()..onTap = (){ 114 recognizer: TapGestureRecognizer()..onTap = (){
112 Navigator.of(context).pushNamed( 115 Navigator.of(context).pushNamed(
@@ -116,18 +119,18 @@ class _LoginPageView extends StatelessWidget { @@ -116,18 +119,18 @@ class _LoginPageView extends StatelessWidget {
116 'webViewTitle':'用户隐私协议' 119 'webViewTitle':'用户隐私协议'
117 }); 120 });
118 }), 121 }),
119 - const TextSpan( 122 + TextSpan(
120 text: ',', 123 text: ',',
121 style: TextStyle( 124 style: TextStyle(
122 - fontSize: 12,  
123 - color: Color(0xFF333333) 125 + fontSize: 12.sp,
  126 + color: const Color(0xFF333333)
124 ) 127 )
125 ), 128 ),
126 TextSpan( 129 TextSpan(
127 text: '《儿童隐私政策》', 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 recognizer: TapGestureRecognizer()..onTap = (){ 135 recognizer: TapGestureRecognizer()..onTap = (){
133 Navigator.of(context).pushNamed( 136 Navigator.of(context).pushNamed(
@@ -157,12 +160,15 @@ class _LoginPageView extends StatelessWidget { @@ -157,12 +160,15 @@ class _LoginPageView extends StatelessWidget {
157 fit: BoxFit.fill 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,7 +204,11 @@ class _LoginPageView extends StatelessWidget {
198 controller: bloc.phoneNumController, 204 controller: bloc.phoneNumController,
199 ), 205 ),
200 6.5.verticalSpace, 206 6.5.verticalSpace,
201 - const Text('未注册用户登录默认注册'), 207 + Text('未注册用户登录默认注册',
  208 + style: TextStyle(
  209 + fontSize: 12.sp,
  210 + color: const Color(0xFF999999)
  211 + ),),
202 4.5.verticalSpace, 212 4.5.verticalSpace,
203 Row( 213 Row(
204 mainAxisAlignment: MainAxisAlignment.spaceBetween, 214 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -215,8 +225,7 @@ class _LoginPageView extends StatelessWidget { @@ -215,8 +225,7 @@ class _LoginPageView extends StatelessWidget {
215 controller: bloc.checkNumController, 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,8 +298,11 @@ class _LoginPageView extends StatelessWidget {
289 width: 100.w, 298 width: 100.w,
290 height: 55.h, 299 height: 55.h,
291 alignment: Alignment.centerLeft, 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 import 'package:flutter/cupertino.dart'; 1 import 'package:flutter/cupertino.dart';
2 import 'package:flutter/material.dart'; 2 import 'package:flutter/material.dart';
3 import 'package:flutter_bloc/flutter_bloc.dart'; 3 import 'package:flutter_bloc/flutter_bloc.dart';
  4 +import 'package:flutter_screenutil/flutter_screenutil.dart';
4 import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart'; 5 import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart';
5 import 'package:wow_english/common/extension/string_extension.dart'; 6 import 'package:wow_english/common/extension/string_extension.dart';
6 import 'package:wow_english/common/widgets/timer_ticker.dart'; 7 import 'package:wow_english/common/widgets/timer_ticker.dart';
@@ -43,9 +44,7 @@ class TimerWidgetView extends StatelessWidget { @@ -43,9 +44,7 @@ class TimerWidgetView extends StatelessWidget {
43 final bloc = BlocProvider.of<TimerBloc>(context); 44 final bloc = BlocProvider.of<TimerBloc>(context);
44 return GestureDetector( 45 return GestureDetector(
45 onTap: () { 46 onTap: () {
46 - print(bloc.isCountTimer);  
47 if (canSendSms && !bloc.isCountTimer ) { 47 if (canSendSms && !bloc.isCountTimer ) {
48 - print(state.duration);  
49 bloc.add(StartEvent(duration: state.duration)); 48 bloc.add(StartEvent(duration: state.duration));
50 } 49 }
51 }, 50 },
@@ -58,13 +57,16 @@ class TimerWidgetView extends StatelessWidget { @@ -58,13 +57,16 @@ class TimerWidgetView extends StatelessWidget {
58 fit: BoxFit.fill 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 child: Row( 61 child: Row(
63 children: [ 62 children: [
64 if (state is RunningState)...[ 63 if (state is RunningState)...[
65 const TimerText() 64 const TimerText()
66 ] else ...[ 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,6 +85,9 @@ class TimerText extends StatelessWidget {
83 final secondsStr = duration.toString().padLeft(2, '0'); 85 final secondsStr = duration.toString().padLeft(2, '0');
84 return Text( 86 return Text(
85 '${secondsStr}s后再次获取', 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,11 +55,11 @@ class _SetPassWordPageView extends StatelessWidget {
55 width: 83.5.h, 55 width: 83.5.h,
56 ), 56 ),
57 12.5.horizontalSpace, 57 12.5.horizontalSpace,
58 - const Text( 58 + Text(
59 '欢迎登录wow english\n接下来请设置一下您的密码吧!', 59 '欢迎登录wow english\n接下来请设置一下您的密码吧!',
60 style: TextStyle( 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,10 +129,11 @@ class _SetPassWordPageView extends StatelessWidget {
129 9.verticalSpace, 129 9.verticalSpace,
130 Offstage( 130 Offstage(
131 offstage: bloc.passwordCheck, 131 offstage: bloc.passwordCheck,
132 - child: const Text( 132 + child: Text(
133 '请确认两次输入的密码是否一致', 133 '请确认两次输入的密码是否一致',
134 style: TextStyle( 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,14 +156,15 @@ class _SetPassWordPageView extends StatelessWidget {
155 fit: BoxFit.fill 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 style: TextStyle( 165 style: TextStyle(
165 - color: Colors.white 166 + color: Colors.white,
  167 + fontSize: 16.sp
166 ), 168 ),
167 ), 169 ),
168 ), 170 ),
pubspec.yaml
@@ -85,6 +85,7 @@ dependencies: @@ -85,6 +85,7 @@ dependencies:
85 limiting_direction_csx: ^0.2.0 85 limiting_direction_csx: ^0.2.0
86 # 富文本插件 https://pub.dev/packages/extended_text 86 # 富文本插件 https://pub.dev/packages/extended_text
87 extended_text: ^11.0.1 87 extended_text: ^11.0.1
  88 + responsive_framework: ^1.0.0
88 89
89 dev_dependencies: 90 dev_dependencies:
90 build_runner: ^2.4.4 91 build_runner: ^2.4.4