Merge pull request #9 from Tuanpluss02/responsive

Responsive for mobile
Tuanpluss02 · Jan 6, 2024 · 69d5e7e · 69d5e7e
2 parents db58763 + d1e4dd0
commit 69d5e7e
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 28 deletions.
diff --git 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
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+import '../common/enums.dart';
+
+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;
+  }
+}
diff --git 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
@@ -1,26 +1,33 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import '../../common/enums.dart';
 import 'show_delete_dialog.dart';
 import 'show_qrcode.dart';
 
 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
@@ -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
@@ -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
@@ -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<HomePage> {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
+    final screenType = ScreenInfo().getScreenType(context);
     return BlocConsumer<HomeCubit, HomeState>(
       listener: (context, state) => _listener(state, context),
       builder: (context, state) {
@@ -48,11 +50,11 @@ class _HomePageState extends State<HomePage> {
                 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<HomePage> {
     );
   }
 
-  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<HomePage> {
                   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<HomePage> {
                                           id: state.urls![index].sId!,
                                           urlShort: shortURL,
                                           longUrl: longUrl,
+                                          screenType: screenType,
                                         );
                                       }),
                                 )
@@ -119,18 +122,19 @@ class _HomePageState extends State<HomePage> {
     ));
   }
 
-  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),

diff --git 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<LoginPage> {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
+    final screenType = ScreenInfo().getScreenType(context);
     return BlocConsumer<AuthBloc, AuthState>(
       listener: (context, state) => _listener(state, context),
       builder: (context, state) {
@@ -45,7 +47,9 @@ class _LoginPageState extends State<LoginPage> {
               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
@@ -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<SignUpPage> {
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
+    final screenType = ScreenInfo().getScreenType(context);
     return BlocConsumer<AuthBloc, AuthState>(
       listener: (context, state) => _listener(state, context),
       builder: (context, state) {
@@ -39,7 +41,9 @@ class _SignUpPageState extends State<SignUpPage> {
               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(