Tablet layout

Author: feelsoftware

lib/creation/widget/creation_list.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:slidemix/creation/creation_bloc.dart';
 import 'package:slidemix/creation/widget/creation_card.dart';
 import 'package:slidemix/creation/data/media.dart';
+import 'package:slidemix/extensions/device.dart';
 
 class CreationList extends StatelessWidget {
   final List<Media> media;
@@ -19,10 +20,10 @@ class CreationList extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const padding = 16.0;
-    const spanCount = 2;
+    final spanCount = context.deviceType.isMobile ? 2 : 3;
 
     return GridView.builder(
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: spanCount,
         mainAxisSpacing: padding,
         crossAxisSpacing: padding,

lib/extensions/device.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:sizer/sizer.dart';
+import 'package:sizer/sizer.dart' as sizer;
+
+extension BuildContextX on BuildContext {
+  DeviceType get deviceType => SizerUtil.deviceType == sizer.DeviceType.mobile
+      ? DeviceType.mobile
+      : DeviceType.tablet;
+
+  Orientation get deviceOrientation => SizerUtil.orientation;
+}
+
+extension DeviceTypeX on DeviceType {
+  bool get isMobile => this == DeviceType.mobile;
+
+  bool get isTablet => this == DeviceType.tablet;
+}
+
+extension OrientationX on Orientation {
+  bool get isPortrait => this == Orientation.portrait;
+
+  bool get isLandscape => this == Orientation.landscape;
+}
+
+enum DeviceType {
+  mobile,
+  tablet,
+}
+
+class DeviceTypeContainer extends StatelessWidget {
+  final Widget child;
+
+  const DeviceTypeContainer({
+    Key? key,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Sizer(builder: (_, __, ___) => child);
+  }
+}

lib/localizations.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart' as intl;
 import 'package:slidemix/main.dart';
 
+// flutter gen-l10n
 class AppLocalizations {
   static intl.AppLocalizations of(BuildContext context) =>
       intl.AppLocalizations.of(context)!;

lib/main.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:slidemix/colors.dart';
 import 'package:slidemix/database.dart';
+import 'package:slidemix/extensions/device.dart';
 import 'package:slidemix/file_manager.dart';
 import 'package:slidemix/localizations.dart';
 import 'package:slidemix/logger.dart';
@@ -67,7 +68,7 @@ class SlideMixApp extends StatelessWidget {
         localizationsDelegates: AppLocalizations.localizationsDelegates,
         supportedLocales: AppLocalizations.supportedLocales,
         onGenerateTitle: (context) => AppLocalizations.of(context).appName,
-        home: const WelcomeScreen(),
+        home: const DeviceTypeContainer(child: WelcomeScreen()),
       ),
     );
   }

lib/movies/widget/movies_list.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:slidemix/extensions/device.dart';
 import 'package:slidemix/movies/data/movie.dart';
 import 'package:slidemix/movies/widget/movie_card.dart';
 
@@ -19,11 +20,11 @@ class MoviesList extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const padding = 16.0;
-    const spanCount = 2;
+    final spanCount = context.deviceType.isMobile ? 2 : 3;
     const itemRatio = 150.0 / 175.0;
 
     return GridView.builder(
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: spanCount,
         mainAxisSpacing: padding,
         crossAxisSpacing: padding,

pubspec.yaml

@@ -17,7 +17,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.1.4+10104
+version: 1.1.5+10105
 
 environment:
   sdk: '>=3.0.0 <4.0.0'
@@ -83,6 +83,9 @@ dependencies:
   # https://pub.dev/packages/shared_preferences
   shared_preferences: 2.1.1
 
+  # https://pub.dev/packages/sizer
+  sizer: 2.0.15
+
   # https://pub.dev/packages/sqflite
   sqflite: 2.2.8+4