From 25268694598e753a70a3e4501056d8cf8cc70e6a Mon Sep 17 00:00:00 2001 From: Tuanpluss02 Date: Sat, 6 Jan 2024 01:44:20 +0700 Subject: [PATCH 1/3] (feat) reponsive for mobile --- lib/utils/screen_info.dart | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 lib/utils/screen_info.dart diff --git a/lib/utils/screen_info.dart b/lib/utils/screen_info.dart new file mode 100644 index 0000000..96dbae5 --- /dev/null +++ b/lib/utils/screen_info.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; + +enum ScreenType { mobile, web } + +class ScreenInfo { + ScreenType getScreenType(BuildContext context) { + double scrWidth = getMqWidth(context); + if (scrWidth > 915) { + return ScreenType.web; + } else if (scrWidth < 650) { + return ScreenType.mobile; + } else { + return ScreenType.web; + } + } + + getMqWidth(BuildContext context) { + return MediaQuery.of(context).size.width; + } + + getMqHeight(BuildContext context) { + return MediaQuery.of(context).size.height; + } +} From b18f2b82a1ca27a31fcf0b2b3abeba6dc0475ffe Mon Sep 17 00:00:00 2001 From: Tuanpluss02 Date: Sat, 6 Jan 2024 01:58:27 +0700 Subject: [PATCH 2/3] feat) add ScreenType enum and update screen width in login and signup pages --- lib/common/enums.dart | 2 ++ lib/utils/screen_info.dart | 2 +- lib/views/login_page.dart | 6 +++++- lib/views/signup_page.dart | 6 +++++- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/lib/common/enums.dart b/lib/common/enums.dart index 3cc717d..8c55a52 100644 --- a/lib/common/enums.dart +++ b/lib/common/enums.dart @@ -10,3 +10,5 @@ enum AuthStatus { enum UrlActionState { initial, loading, success, failure } enum GetDataState { initial, loading, success, failure } + +enum ScreenType { mobile, web } diff --git a/lib/utils/screen_info.dart b/lib/utils/screen_info.dart index 96dbae5..7f2dd07 100644 --- a/lib/utils/screen_info.dart +++ b/lib/utils/screen_info.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -enum ScreenType { mobile, web } +import '../common/enums.dart'; class ScreenInfo { ScreenType getScreenType(BuildContext context) { diff --git a/lib/views/login_page.dart b/lib/views/login_page.dart index b582d44..448a19b 100644 --- a/lib/views/login_page.dart +++ b/lib/views/login_page.dart @@ -10,6 +10,7 @@ import 'package:url_shortener_flutter/views/components/submit_button.dart'; import '../blocs/auth/auth_bloc.dart'; import '../routes/route_name.dart'; +import '../utils/screen_info.dart'; import 'components/custom_snackbar.dart'; import 'components/custom_text_field.dart'; import 'components/rive_animation.dart'; @@ -34,6 +35,7 @@ class _LoginPageState extends State { @override Widget build(BuildContext context) { final size = MediaQuery.of(context).size; + final screenType = ScreenInfo().getScreenType(context); return BlocConsumer( listener: (context, state) => _listener(state, context), builder: (context, state) { @@ -45,7 +47,9 @@ class _LoginPageState extends State { image: DecorationImage( image: AssetImage(bgImage), fit: BoxFit.cover)), child: blurContainer( - width: size.width * 0.4, + width: screenType == ScreenType.web + ? size.width * 0.4 + : size.width * 0.9, child: Container( margin: const EdgeInsets.all(20), child: Form( diff --git a/lib/views/signup_page.dart b/lib/views/signup_page.dart index daa0166..eb9c8d3 100644 --- a/lib/views/signup_page.dart +++ b/lib/views/signup_page.dart @@ -7,6 +7,7 @@ import '../blocs/auth/auth_bloc.dart'; import '../common/constant.dart'; import '../common/enums.dart'; import '../routes/route_name.dart'; +import '../utils/screen_info.dart'; import '../utils/validate_extension.dart'; import 'components/custom_snackbar.dart'; import 'components/custom_text_field.dart'; @@ -28,6 +29,7 @@ class _SignUpPageState extends State { @override Widget build(BuildContext context) { final size = MediaQuery.of(context).size; + final screenType = ScreenInfo().getScreenType(context); return BlocConsumer( listener: (context, state) => _listener(state, context), builder: (context, state) { @@ -39,7 +41,9 @@ class _SignUpPageState extends State { image: DecorationImage( image: AssetImage(bgImage), fit: BoxFit.cover)), child: blurContainer( - width: size.width * 0.4, + width: screenType == ScreenType.web + ? size.width * 0.4 + : size.width * 0.9, child: Container( margin: const EdgeInsets.all(20), child: Form( From d1e4dd01f712d6cdbba9a74b019d803db83419f7 Mon Sep 17 00:00:00 2001 From: Tuanpluss02 Date: Sat, 6 Jan 2024 09:08:48 +0700 Subject: [PATCH 3/3] (feat) add screenType parameter to appBar and showDeleteDialog functions --- lib/views/components/appbar.dart | 8 ++++-- lib/views/components/item_widget.dart | 17 ++++++++++--- lib/views/components/show_delete_dialog.dart | 8 ++++-- lib/views/components/show_qrcode.dart | 23 +++++++++++------ lib/views/home_page.dart | 26 +++++++++++--------- 5 files changed, 56 insertions(+), 26 deletions(-) diff --git a/lib/views/components/appbar.dart b/lib/views/components/appbar.dart index ed7e1c2..b7dd108 100644 --- a/lib/views/components/appbar.dart +++ b/lib/views/components/appbar.dart @@ -7,6 +7,7 @@ import 'package:flutter_svg/flutter_svg.dart'; import '../../../blocs/auth/auth_bloc.dart'; import '../../../blocs/home/home_cubit.dart'; import '../../../common/constant.dart'; +import '../../common/enums.dart'; import '../../routes/route_name.dart'; logoutButton(BuildContext context) { @@ -26,7 +27,8 @@ logoutButton(BuildContext context) { ); } -appBar(Size size, HomeState state, BuildContext context) { +appBar( + Size size, HomeState state, BuildContext context, ScreenType screenType) { return Container( margin: const EdgeInsets.all(15), width: size.width, @@ -47,7 +49,9 @@ appBar(Size size, HomeState state, BuildContext context) { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ logoWiget(), - greetingWidget(state), + screenType == ScreenType.web + ? greetingWidget(state) + : const SizedBox(), logoutButton(context) ], ))), diff --git a/lib/views/components/item_widget.dart b/lib/views/components/item_widget.dart index 10b8280..4d93b4d 100644 --- a/lib/views/components/item_widget.dart +++ b/lib/views/components/item_widget.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import '../../common/enums.dart'; import 'show_delete_dialog.dart'; import 'show_qrcode.dart'; @@ -8,19 +9,25 @@ class ItemWidget extends StatelessWidget { final String id; final String urlShort; final String longUrl; + final ScreenType screenType; const ItemWidget({ super.key, required this.urlShort, required this.longUrl, required this.id, + required this.screenType, }); @override Widget build(BuildContext context) { return ListTile( - title: Text(urlShort, style: const TextStyle(color: Colors.black)), - subtitle: Text(longUrl, style: const TextStyle(color: Colors.black)), + title: Text(urlShort, + style: const TextStyle( + color: Colors.black, overflow: TextOverflow.ellipsis)), + subtitle: Text(longUrl, + style: const TextStyle( + color: Colors.black, overflow: TextOverflow.ellipsis)), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ @@ -39,7 +46,8 @@ class ItemWidget extends StatelessWidget { IconButton( icon: const Icon(Icons.qr_code, color: Colors.black), onPressed: () { - showQrcode(context, MediaQuery.of(context).size, urlShort); + showQrcode( + context, MediaQuery.of(context).size, urlShort, screenType); }, ), IconButton( @@ -49,7 +57,8 @@ class ItemWidget extends StatelessWidget { IconButton( icon: const Icon(Icons.delete, color: Colors.black), onPressed: () { - showDeleteDialog(context, MediaQuery.of(context).size, id); + showDeleteDialog( + context, MediaQuery.of(context).size, id, screenType); }, ), ], diff --git a/lib/views/components/show_delete_dialog.dart b/lib/views/components/show_delete_dialog.dart index cd5081b..27e6206 100644 --- a/lib/views/components/show_delete_dialog.dart +++ b/lib/views/components/show_delete_dialog.dart @@ -4,8 +4,10 @@ import 'package:flutter/material.dart'; import 'package:flutter_animated_dialog/flutter_animated_dialog.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:url_shortener_flutter/blocs/home/home_cubit.dart'; +import 'package:url_shortener_flutter/common/enums.dart'; -void showDeleteDialog(BuildContext context, Size size, String id) { +void showDeleteDialog( + BuildContext context, Size size, String id, ScreenType screenType) { showAnimatedDialog( barrierColor: Colors.black.withOpacity(0.5), context: context, @@ -15,7 +17,9 @@ void showDeleteDialog(BuildContext context, Size size, String id) { elevation: 0, backgroundColor: Colors.transparent, child: Container( - height: size.height * 0.4, + height: screenType == ScreenType.web + ? size.height * 0.3 + : size.height * 0.2, width: size.width * 0.2, decoration: BoxDecoration( color: Colors.white.withOpacity(0.3), diff --git a/lib/views/components/show_qrcode.dart b/lib/views/components/show_qrcode.dart index f8d03b1..56ce747 100644 --- a/lib/views/components/show_qrcode.dart +++ b/lib/views/components/show_qrcode.dart @@ -4,7 +4,10 @@ import 'package:flutter/material.dart'; import 'package:flutter_animated_dialog/flutter_animated_dialog.dart'; import 'package:qr_flutter/qr_flutter.dart'; -void showQrcode(BuildContext context, Size size, String shortUrl) { +import '../../common/enums.dart'; + +void showQrcode( + BuildContext context, Size size, String shortUrl, ScreenType screenType) { showAnimatedDialog( barrierColor: Colors.black.withOpacity(0.5), context: context, @@ -14,8 +17,12 @@ void showQrcode(BuildContext context, Size size, String shortUrl) { elevation: 0, backgroundColor: Colors.transparent, child: Container( - height: size.height * 0.7, - width: size.width * 0.3, + height: screenType == ScreenType.web + ? size.height * 0.7 + : size.height * 0.5, + width: screenType == ScreenType.web + ? size.width * 0.3 + : size.width * 0.8, decoration: BoxDecoration( color: Colors.white.withOpacity(0.3), borderRadius: BorderRadius.circular(20), @@ -33,15 +40,17 @@ void showQrcode(BuildContext context, Size size, String shortUrl) { child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ - const Text( + Text( 'Scan this QR code to go to the link', - style: - TextStyle(fontSize: 20.0, fontFamily: 'Atomed'), + style: TextStyle( + fontSize: + screenType == ScreenType.web ? 20.0 : 15, + fontFamily: 'Atomed'), ), QrImageView( data: shortUrl, version: QrVersions.auto, - size: 400.0, + size: screenType == ScreenType.web ? 400.0 : 300, ), ElevatedButton( style: ElevatedButton.styleFrom( diff --git a/lib/views/home_page.dart b/lib/views/home_page.dart index 38ecb54..1acab46 100644 --- a/lib/views/home_page.dart +++ b/lib/views/home_page.dart @@ -6,6 +6,7 @@ import 'package:url_shortener_flutter/blocs/home/home_cubit.dart'; import '../common/constant.dart'; import '../common/enums.dart'; +import '../utils/screen_info.dart'; import '../utils/validate_extension.dart'; import 'components/appbar.dart'; import 'components/blur_container.dart'; @@ -33,6 +34,7 @@ class _HomePageState extends State { @override Widget build(BuildContext context) { final size = MediaQuery.of(context).size; + final screenType = ScreenInfo().getScreenType(context); return BlocConsumer( listener: (context, state) => _listener(state, context), builder: (context, state) { @@ -48,11 +50,11 @@ class _HomePageState extends State { child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ - appBar(size, state, context), + appBar(size, state, context, screenType), const SizedBox(height: 50), - mainWidget(size, state), + mainWidget(size, state, screenType), const SizedBox(height: 50), - recentlyURL(size, state), + recentlyURL(size, state, screenType), ], ), ), @@ -61,10 +63,10 @@ class _HomePageState extends State { ); } - Widget recentlyURL(Size size, HomeState state) { + Widget recentlyURL(Size size, HomeState state, ScreenType screenType) { return Center( child: Container( - width: size.width * 0.6, + width: screenType == ScreenType.web ? size.width * 0.6 : size.width * 0.9, decoration: BoxDecoration( color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(20), @@ -81,9 +83,9 @@ class _HomePageState extends State { margin: const EdgeInsets.all(20), child: Column( children: [ - const Text('Recent URLs', + Text('Recent URLs', style: TextStyle( - fontSize: 40.0, + fontSize: screenType == ScreenType.web ? 40.0 : 20, fontFamily: 'RobotReavers', )), const Divider(color: Colors.black87), @@ -111,6 +113,7 @@ class _HomePageState extends State { id: state.urls![index].sId!, urlShort: shortURL, longUrl: longUrl, + screenType: screenType, ); }), ) @@ -119,18 +122,19 @@ class _HomePageState extends State { )); } - Widget mainWidget(Size size, HomeState state) { + Widget mainWidget(Size size, HomeState state, ScreenType screenType) { return blurContainer( - width: size.width * 0.6, + width: + screenType == ScreenType.web ? size.width * 0.6 : size.width * 0.9, child: Container( margin: const EdgeInsets.all(20), child: Form( key: formKey, child: Column( children: [ - const Text('URL Shortener', + Text('URL Shortener', style: TextStyle( - fontSize: 40.0, + fontSize: screenType == ScreenType.web ? 40.0 : 20, fontFamily: 'RobotReavers', )), const SizedBox(height: 30),