Adaptive layouts (#119)

* adaptive layouts on mobile an tablet(both landscape and portrait * Remove `AspectRatio` widget to leave the image as square * Fix rendering bug error * Fix styling issues on tablets * Fix formatting * Bump app version * Fix linting error * Bump app packages --------- Co-authored-by: chotixity <[email protected]>
droidconKE · Aug 27, 2024 · 8c363b3 · 8c363b3
1 parent 35011f6
commit 8c363b3
Show file tree

Hide file tree

Showing 31 changed files with 257 additions and 207 deletions.
diff --git a/lib/common/widgets/app_bar/app_bar.dart b/lib/common/widgets/app_bar/app_bar.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:fluttercon/common/utils/constants/app_assets.dart';
@@ -96,7 +97,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
                                   ),
                                 ),
                                 const SizedBox(width: 8),
-                                Text(
+                                AutoSizeText(
                                   l10n.filter,
                                   style: Theme.of(context)
                                       .textTheme
@@ -115,7 +116,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
                             },
                             child: Padding(
                               padding: const EdgeInsets.only(right: 16),
-                              child: Text(
+                              child: AutoSizeText(
                                 l10n.cancel.toUpperCase(),
                                 style: const TextStyle(
                                   color: Colors.grey,
@@ -133,7 +134,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
                   child: Row(
                     children: [
                       const SizedBox(width: 32),
-                      Text(
+                      AutoSizeText(
                         l10n.filter,
                         style: Theme.of(context).textTheme.titleLarge?.copyWith(
                               fontWeight: FontWeight.bold,

diff --git a/lib/common/widgets/app_bar/feedback_button.dart b/lib/common/widgets/app_bar/feedback_button.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttercon/common/utils/misc.dart';
 import 'package:fluttercon/common/utils/router.dart';
@@ -34,7 +35,7 @@ class FeedbackButton extends StatelessWidget {
                     height: 12,
                     color: colorScheme.onSurface,
                   ),
-                  Text(
+                  AutoSizeText(
                     l10n.feedback,
                     style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                           fontSize: 12,

diff --git a/lib/common/widgets/app_bar/logout_dialog.dart b/lib/common/widgets/app_bar/logout_dialog.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttercon/common/utils/misc.dart';
@@ -35,7 +36,7 @@ class _LogOutDialogState extends State<LogOutDialog> {
         },
         child: Column(
           children: [
-            Text(
+            AutoSizeText(
               l10n.areYouSureLogOut,
               style: Theme.of(context).textTheme.titleLarge?.copyWith(
                     color: colorScheme.onSurface,
@@ -44,7 +45,7 @@ class _LogOutDialogState extends State<LogOutDialog> {
               textAlign: TextAlign.center,
             ),
             const SizedBox(height: 20),
-            Text(
+            AutoSizeText(
               l10n.logoutDesc,
               style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                     color: colorScheme.onSurface,
@@ -67,15 +68,15 @@ class _LogOutDialogState extends State<LogOutDialog> {
                 child: BlocBuilder<LogOutCubit, LogOutState>(
                   builder: (context, state) {
                     return state.maybeWhen(
-                      loading: () => Text(
+                      loading: () => AutoSizeText(
                         l10n.logoutLoading.toUpperCase(),
                         style:
                             Theme.of(context).textTheme.titleMedium?.copyWith(
                                   color: Colors.white,
                                   fontWeight: FontWeight.bold,
                                 ),
                       ),
-                      orElse: () => Text(
+                      orElse: () => AutoSizeText(
                         l10n.confirmLogout.toUpperCase(),
                         style:
                             Theme.of(context).textTheme.titleMedium?.copyWith(
@@ -101,7 +102,7 @@ class _LogOutDialogState extends State<LogOutDialog> {
                     borderRadius: BorderRadius.circular(8),
                   ),
                 ),
-                child: Text(
+                child: AutoSizeText(
                   l10n.cancel.toUpperCase(),
                   style: Theme.of(context).textTheme.titleMedium?.copyWith(
                         color: colorScheme.onSurface,

diff --git a/lib/common/widgets/app_bar/user_profile_icon.dart b/lib/common/widgets/app_bar/user_profile_icon.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttercon/common/repository/hive_repository.dart';
@@ -37,7 +38,7 @@ class _UserProfileIconState extends State<UserProfileIcon> {
                 },
                 child: Padding(
                   padding: const EdgeInsets.only(right: 16),
-                  child: Text(
+                  child: AutoSizeText(
                     l10n.cancel.toUpperCase(),
                     style: const TextStyle(
                       color: Colors.grey,

diff --git a/lib/common/widgets/personnel_widget.dart b/lib/common/widgets/personnel_widget.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttercon/common/utils/misc.dart';
@@ -59,7 +60,7 @@ class PersonnelWidget extends StatelessWidget {
           ),
           SizedBox(
             width: MediaQuery.sizeOf(context).width / 4.5,
-            child: Text(
+            child: AutoSizeText(
               name,
               maxLines: 1,
               style: TextStyle(
@@ -71,7 +72,7 @@ class PersonnelWidget extends StatelessWidget {
           if (designation != null)
             SizedBox(
               width: MediaQuery.sizeOf(context).width / 4.5,
-              child: Text(
+              child: AutoSizeText(
                 designation!,
                 maxLines: 1,
                 style: TextStyle(

diff --git a/lib/common/widgets/resolved_image.dart b/lib/common/widgets/resolved_image.dart
@@ -12,10 +12,12 @@ class ResolvedImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
     return imageUrl.contains('.svg')
         ? SvgPicture.network(imageUrl)
         : CachedNetworkImage(
             imageUrl: imageUrl,
+            height: size.height * .15,
             placeholder: (_, __) => const SizedBox(
               height: 150,
               width: double.infinity,

diff --git a/lib/common/widgets/social_handle.dart b/lib/common/widgets/social_handle.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:fluttercon/common/utils/constants/app_assets.dart';
@@ -29,7 +30,7 @@ class SocialHandleBody extends StatelessWidget {
         crossAxisAlignment: WrapCrossAlignment.center,
         alignment: WrapAlignment.spaceBetween,
         children: [
-          Text(
+          AutoSizeText(
             twitterUrl != null ? l10n.twitterHandle : l10n.linkedin,
             style: TextStyle(
               color: colorScheme.onSurface,
@@ -68,7 +69,7 @@ class SocialHandleBody extends StatelessWidget {
                     ),
                   const SizedBox(width: 3),
                   Flexible(
-                    child: Text(
+                    child: AutoSizeText(
                       name,
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,

diff --git a/lib/features/about/ui/about_screen.dart b/lib/features/about/ui/about_screen.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttercon/common/utils/constants/app_assets.dart';
@@ -31,57 +32,61 @@ class _AboutScreenState extends State<AboutScreen> {
     return Scaffold(
       backgroundColor: colorScheme.surface,
       appBar: const CustomAppBar(selectedIndex: 3),
-      body: CustomScrollView(
-        slivers: [
-          SliverToBoxAdapter(child: Image.asset(AppAssets.teamPhoto)),
-          const SliverToBoxAdapter(child: SizedBox(height: 16)),
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Text(
-                l10n.about,
-                style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                      color: colorScheme.primary,
-                      fontWeight: FontWeight.bold,
-                    ),
+      body: LayoutBuilder(
+        builder: (context, constraints) {
+          return CustomScrollView(
+            slivers: [
+              SliverToBoxAdapter(child: Image.asset(AppAssets.teamPhoto)),
+              const SliverToBoxAdapter(child: SizedBox(height: 16)),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: AutoSizeText(
+                    l10n.about,
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                          color: colorScheme.primary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                  ),
+                ),
               ),
-            ),
-          ),
-          const SliverToBoxAdapter(child: SizedBox(height: 16)),
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Text(
-                l10n.aboutFluttercon,
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurface,
-                    ),
+              const SliverToBoxAdapter(child: SizedBox(height: 16)),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: AutoSizeText(
+                    l10n.aboutFluttercon,
+                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          color: colorScheme.onSurface,
+                        ),
+                  ),
+                ),
               ),
-            ),
-          ),
-          const SliverToBoxAdapter(child: SizedBox(height: 16)),
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16),
-              child: Text(
-                l10n.organisingTeam,
-                style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                      color: colorScheme.primary,
-                      fontWeight: FontWeight.bold,
-                    ),
+              const SliverToBoxAdapter(child: SizedBox(height: 16)),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: AutoSizeText(
+                    l10n.organisingTeam,
+                    style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                          color: colorScheme.primary,
+                          fontWeight: FontWeight.bold,
+                        ),
+                  ),
+                ),
               ),
-            ),
-          ),
-          const SliverToBoxAdapter(child: SizedBox(height: 16)),
-          const OrganisingTeamView(),
-          const SliverToBoxAdapter(child: SizedBox(height: 16)),
-          const SliverToBoxAdapter(
-            child: Padding(
-              padding: EdgeInsets.symmetric(horizontal: 16),
-              child: OrganizersCard(),
-            ),
-          ),
-        ],
+              const SliverToBoxAdapter(child: SizedBox(height: 16)),
+              const OrganisingTeamView(),
+              const SliverToBoxAdapter(child: SizedBox(height: 16)),
+              const SliverToBoxAdapter(
+                child: Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 16),
+                  child: OrganizersCard(),
+                ),
+              ),
+            ],
+          );
+        },
       ),
     );
   }

diff --git a/lib/features/about/ui/organising_team.dart b/lib/features/about/ui/organising_team.dart
@@ -22,16 +22,17 @@ class _OrganisingTeamViewState extends State<OrganisingTeamView> {
 
   @override
   Widget build(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
     return BlocBuilder<FetchIndividualOrganisersCubit,
         FetchIndividualOrganisersState>(
       builder: (context, state) => state.maybeWhen(
         loaded: (individualOrganisers) => SliverGrid.builder(
           itemCount: individualOrganisers.length,
-          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: 3,
+          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 200,
             crossAxisSpacing: 8,
             mainAxisSpacing: 8,
-            mainAxisExtent: 150,
+            mainAxisExtent: size.width > 600 ? 200 : 140,
           ),
           itemBuilder: (context, index) => PersonnelWidget(
             imageUrl: individualOrganisers[index].photo,

diff --git a/lib/features/about/ui/organising_team_details.dart b/lib/features/about/ui/organising_team_details.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
@@ -47,7 +48,7 @@ class OranisingTeamMemberDetailsPage extends StatelessWidget {
                         onPressed: () => GoRouter.of(context).pop(),
                         color: Colors.white,
                       ),
-                      Text(
+                      AutoSizeText(
                         l10n.organisingTeam,
                         style: const TextStyle(
                           color: Colors.white,
@@ -91,13 +92,13 @@ class OranisingTeamMemberDetailsPage extends StatelessWidget {
           child: Column(
             children: [
               const SizedBox(height: 60),
-              Text(
+              AutoSizeText(
                 organiser.designation,
                 style: const TextStyle(
                   color: ThemeColors.orangeColor,
                 ),
               ),
-              Text(
+              AutoSizeText(
                 organiser.name,
                 style: TextStyle(
                   color: colorScheme.primary,
@@ -106,7 +107,7 @@ class OranisingTeamMemberDetailsPage extends StatelessWidget {
                 ),
               ),
               const SizedBox(height: 16),
-              Text(
+              AutoSizeText(
                 organiser.tagline,
                 textAlign: TextAlign.center,
                 style: const TextStyle(
@@ -117,7 +118,7 @@ class OranisingTeamMemberDetailsPage extends StatelessWidget {
               const SizedBox(height: 32),
               Align(
                 alignment: Alignment.centerLeft,
-                child: Text(
+                child: AutoSizeText(
                   l10n.bio,
                   style: TextStyle(
                     color: colorScheme.primary,
@@ -129,7 +130,7 @@ class OranisingTeamMemberDetailsPage extends StatelessWidget {
               const SizedBox(height: 16),
               Align(
                 alignment: Alignment.centerLeft,
-                child: Text(
+                child: AutoSizeText(
                   organiser.bio,
                   style: TextStyle(
                     fontSize: 16,

diff --git a/lib/features/auth/ui/sign_in.dart b/lib/features/auth/ui/sign_in.dart
@@ -1,4 +1,5 @@
 import 'package:auth_buttons/auth_buttons.dart';
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttercon/common/utils/constants/app_assets.dart';
@@ -23,7 +24,7 @@ class SignInScreen extends StatelessWidget {
           error: (message) {
             ScaffoldMessenger.of(context).showSnackBar(
               SnackBar(
-                content: Text(message),
+                content: AutoSizeText(message),
               ),
             );
           },
@@ -37,7 +38,7 @@ class SignInScreen extends StatelessWidget {
                 GoRouter.of(context).goNamed(FlutterConRouter.decisionRoute),
             error: (message) {
               ScaffoldMessenger.of(context).showSnackBar(
-                SnackBar(content: Text(message)),
+                SnackBar(content: AutoSizeText(message)),
               );
             },
           );