Update responsive layout slides and dependencies

dario-digregorio · May 28, 2024 · ffcbb6f · ffcbb6f
1 parent c21a766
commit ffcbb6f
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 54 deletions.
diff --git a/.github/workflows/deploy_deck.yaml b/.github/workflows/deploy_deck.yaml
@@ -0,0 +1,26 @@
+name: Deploy to GitHub Pages
+
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    build-and-deploy:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+            - name: Set up Flutter
+              uses: subosito/flutter-action@v2
+            - name: Install dependencies
+              run: flutter pub get
+            - name: Build web app
+              run: |
+                cd deck
+                flutter build web --release
+            - name: Deploy to GitHub Pages
+              uses: peaceiris/actions-gh-pages@v3
+              with:
+                  github_token: ${{ secrets.GITHUB_TOKEN }}
+                  publish_dir: deck/build/web
diff --git a/CONTACT.md b/CONTACT.md
@@ -1,5 +1,11 @@
-Keen to see these methods in action? Check out my app, **Yawa: Weather & Radar**, on [Android](https://play.google.com/store/apps/details?id=de.digregorio.dario.yawa) and [iOS](https://apps.apple.com/de/app/yawa-weather-forecast/id1626828365) and if you like my App Yawa, please leave a review. This would help me a lot :) ❤️
+## Connect with me
+- [X/Twitter](https://twitter.com/digregoriodario)
+- [LinkedIn](https://www.linkedin.com/in/dario-digregorio-064696241/)
+- [Medium](https://dario-digregorio.medium.com)
+- [Dev.to](https://dev.to/dariodigregorio)
 
-![Yawa](docs/yawa.gif)
 
-If you have any questions or feedback, feel free to reach out on [Twitter/X](https://twitter.com/digregoriodario)!
+## Support me by downlaoding my app :)
+Keen to see the responsive methods in action? Check out my app, **Yawa: Weather & Radar**, on [Android](https://play.google.com/store/apps/details?id=de.digregorio.dario.yawa) and [iOS](https://apps.apple.com/de/app/yawa-weather-forecast/id1626828365) and if you like my App Yawa, please leave a review. This would help me a lot :) ❤️
+
+![Yawa](docs/yawa.gif)
diff --git a/README.md b/README.md
@@ -25,6 +25,10 @@ If you have any questions, feedback, or suggestions, feel free to reach out to m
     - [Screen-based Breakpoints](#screen-based-breakpoints)
     - [Device Segmentation](#device-segmentation)
     - [Style File](#style-file)
+    - [General Approach](#general-approach)
+      - [Abstract](#abstract)
+      - [Measure](#measure)
+      - [Branch](#branch)
   - [Basic Layout](#basic-layout)
     - [Layout Foundation](#layout-foundation)
     - [Building the Responsive Layout](#building-the-responsive-layout)
@@ -80,14 +84,14 @@ Before diving into coding, setting up the right device and understanding key con
 ### Recommended Emulators/Simulators or Devices
 Choose a device that you can test your app on:
 
-| Environment               | HotReload |        Resizable Window         | Text Scaling | UI Scaling |
-| ------------------------- | :-------: | :-----------------------------: | :----------: | :--------: |
-| Windows/Mac/Linux         |    Yes    |               Yes               |     Yes      |    Yes     |
-| Web                       |    No     |               Yes               |     Yes      |    Yes     |
-| Android Emulator          |    Yes    | Experimental (only breakpoints) |     Yes      |    Yes     |
-| iOS Simulator             |    Yes    |               No                |     Yes      |    Yes     |
-| iPadOS (Stage Manager)    |    Yes    |             Limited             |     Yes      |    Yes     |
-| MacOS (Designed for iPad) |    Yes    |               Yes               |      No      |     No     |
+| Environment               | HotReload |        Resizable Window         | Text Scaling | UI Scaling | Lib Compatibility |
+| ------------------------- | :-------: | :-----------------------------: | :----------: | :--------: | :---------------: |
+| Windows/Mac/Linux         |    Yes    |               Yes               |     Yes      |    Yes     |      Middle       |
+| Web                       |    No     |               Yes               |     Yes      |    Yes     |        Low        |
+| Android Emulator          |    Yes    | Experimental (only breakpoints) |     Yes      |    Yes     |       High        |
+| iOS Simulator             |    Yes    |               No                |     Yes      |    Yes     |       High        |
+| iPadOS (Stage Manager)    |    Yes    |             Limited             |     Yes      |    Yes     |       High        |
+| MacOS (Designed for iPad) |    Yes    |               Yes               |      No      |     No     |       High        |
 
 iPad Stage Manager:
 
@@ -147,6 +151,22 @@ bool get isDesktopDeviceOrWeb => kIsWeb || isDesktopDevice;
 ### Style File
 Having a style file with your app's colors, fonts, and text styles will help you maintain a consistent look and feel across your app. This will also help you in scaling your UI and text effectively when needed for different touch targets.
 
+### General Approach
+
+The general approach on creating responsive widgets is explained in detailed by the Flutter Team in their [Adaptive Responsive Guide](https://docs.flutter.dev/ui/adaptive-responsive). You can also watch the [Google I/O 2024 Talk]( https://www.youtube.com/watch?v=LeKLGzpsz9I). This is the approach in a nutshell.
+
+#### Abstract
+Identify the widgets that you plan to make responsive. 
+- Dialogs, both fullscreen and modal
+- Navigation UI, both rail and bottom bar
+- Custom layout, such as "is the UI area taller or wider?"
+
+#### Measure
+Measure the size of the widgets by using `MediaQuery` or `LayoutBuilder`. See the section [Builder vs MediaQuery](#builder-vs-mediaquery) to know more.
+
+#### Branch
+Decide what sizing breakpoints to use when choosing what version of the UI to display.
+
 ## Basic Layout
 We’ll be enhancing the classic Counter App to showcase responsive design in Flutter. The goal is to manage multiple counters and introduce a `master-detail` interface for larger screens. Take a look into the repository to find out how the different topics have been implemented in detail.
 

diff --git a/deck/assets/qrcode_github.png b/deck/assets/qrcode_github.png
diff --git a/deck/lib/main.dart b/deck/lib/main.dart
@@ -60,8 +60,10 @@ class FlutterDeckExample extends StatelessWidget {
       themeMode: ThemeMode.system,
       client: FlutterDeckWebClient(),
       configuration: const FlutterDeckConfiguration(
-          controls:
-              FlutterDeckControlsConfiguration(presenterToolbarVisible: true),
+          slideSize: FlutterDeckSlideSize.responsive(),
+          controls: FlutterDeckControlsConfiguration(
+            presenterToolbarVisible: false,
+          ),
           header: FlutterDeckHeaderConfiguration(
             showHeader: true,
             title: 'Responsive Design in Flutter',
@@ -93,10 +95,10 @@ class FlutterDeckExample extends StatelessWidget {
         Layout3Slide(),
         Layout3DemoSlide(),
         ApproachSlide(),
+        ReponsiveVsAdaptiveSlide(),
         AbstractSlide(),
         MeasureSlide(),
         BranchSlide(),
-        ReponsiveVsAdaptiveSlide(),
         TestingSlide(),
         BestPractisesSlide(),
         ThankYouSlide(),

diff --git a/deck/lib/slides/abstract_slide.dart b/deck/lib/slides/abstract_slide.dart
@@ -19,6 +19,7 @@ class AbstractSlide extends FlutterDeckSlideWidget {
               padding: const EdgeInsets.all(64),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Text('Identify the widgets that you plan to make responsive.',
                       style: Theme.of(context).textTheme.headlineLarge),
@@ -29,7 +30,7 @@ class AbstractSlide extends FlutterDeckSlideWidget {
         - Navigation UI, both rail and bottom bar
         - Custom layout, such as "is the UI area taller or wider?"
         ''',
-                    style: Theme.of(context).textTheme.headlineSmall,
+                    style: Theme.of(context).textTheme.headlineMedium,
                   ),
                 ],
               ),

diff --git a/deck/lib/slides/approach_slide.dart b/deck/lib/slides/approach_slide.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_deck/flutter_deck.dart';
 
 class ApproachSlide extends FlutterDeckSlideWidget {
@@ -16,16 +15,20 @@ class ApproachSlide extends FlutterDeckSlideWidget {
         headerBuilder: (context) => const FlutterDeckHeader(
               title: 'General Approach',
             ),
-        builder: (context) => const Padding(
-              padding: EdgeInsets.all(64),
+        builder: (context) => Padding(
+              padding: const EdgeInsets.all(64),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Image(image: AssetImage('approach.png')),
-                  SizedBox(height: 16),
                   Text(
+                      'The general approach on creating responsive widgets is explained in detailed by the Flutter Team:',
+                      style: Theme.of(context).textTheme.headlineMedium),
+                  const SizedBox(height: 32),
+                  const Image(image: AssetImage('approach.png')),
+                  const SizedBox(height: 16),
+                  const Text(
                       'Read more: https://docs.flutter.dev/ui/adaptive-responsive'),
-                  Text(
+                  const Text(
                       'Watch on YouTube: https://www.youtube.com/watch?v=LeKLGzpsz9I'),
                 ],
               ),

diff --git a/deck/lib/slides/branch_slide.dart b/deck/lib/slides/branch_slide.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_deck/flutter_deck.dart';
 
@@ -11,12 +12,15 @@ class BranchSlide extends FlutterDeckSlideWidget {
 
   @override
   FlutterDeckSlide build(BuildContext context) {
-    return FlutterDeckSlide.bigFact(
-      headerBuilder: (context) => const FlutterDeckHeader(
-        title: 'Branch',
-      ),
-      title:
-          'Decide what sizing breakpoints to use when choosing what version of the UI to display',
-    );
+    return FlutterDeckSlide.blank(
+        headerBuilder: (context) => const FlutterDeckHeader(
+              title: 'Branch',
+            ),
+        builder: (context) => Center(
+                child: Text(
+              'Decide what sizing breakpoints to use \n when choosing what version of the UI to display',
+              style: Theme.of(context).textTheme.headlineLarge,
+              textAlign: TextAlign.center,
+            )));
   }
 }
diff --git a/deck/lib/slides/devices_table_slide.dart b/deck/lib/slides/devices_table_slide.dart
@@ -18,22 +18,22 @@ class DevicesTableSlide extends FlutterDeckSlideWidget {
           const FlutterDeckHeader(title: 'Devices Table'),
       builder: (context) => Markdown(
           styleSheet: MarkdownStyleSheet(
-            tableBody: const TextStyle(fontSize: 26),
+            tableBody: const TextStyle(fontSize: 24),
           ),
           padding: const EdgeInsets.all(32),
           selectable: true,
           data: '''
 # What device should you use for testing your app with different screen sizes?
 
 
-| Environment               | HotReload |        Resizable Window         | Text Scaling | UI Scaling |
-| ------------------------- | :-------: | :-----------------------------: | :----------: | :--------: |
-| Windows/Mac/Linux         |    Yes    |               Yes               |     Yes      |    Yes     |
-| Web                       |    No     |               Yes               |     Yes      |    Yes     |
-| Android Emulator          |    Yes    | Experimental (only breakpoints) |     Yes      |    Yes     |
-| iOS Simulator             |    Yes    |               No                |     Yes      |    Yes     |
-| iPadOS (Stage Manager) [iOS Target]    |    Yes    |             Limited             |     Yes      |    Yes     |
-| MacOS (Designed for iPad) [iOS Target] |    Yes    |               Yes               |      No      |     No     |
+| Environment               | HotReload |        Resizable Window         | Text Scaling | UI Scaling | Lib Compatibility |
+| ------------------------- | :-------: | :-----------------------------: | :----------: | :--------: | :---------------: |
+| Windows/Mac/Linux         |    Yes    |               Yes               |     Yes      |    Yes     |      Middle       |
+| Web                       |    No     |               Yes               |     Yes      |    Yes     |        Low        |
+| Android Emulator          |    Yes    | Experimental (only breakpoints) |     Yes      |    Yes     |       High        |
+| iOS Simulator             |    Yes    |               No                |     Yes      |    Yes     |       High        |
+| iPadOS (Stage Manager)    |    Yes    |             Limited             |     Yes      |    Yes     |       High        |
+| MacOS (Designed for iPad) |    Yes    |               Yes               |      No      |     No     |       High        |
 
 # See the README.md for more details.
 '''),

diff --git a/deck/lib/slides/measure_slide.dart b/deck/lib/slides/measure_slide.dart
@@ -20,6 +20,7 @@ class MeasureSlide extends FlutterDeckSlideWidget {
         padding: const EdgeInsets.all(64),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Text('MediaQuery',
                 style: Theme.of(context).textTheme.headlineLarge),
@@ -28,24 +29,15 @@ class MeasureSlide extends FlutterDeckSlideWidget {
 - Provides the size of the window
 - Should be used only for root Layout Widgets
 - Use  `sizeoOf` method to get the size to prevent unnecessary rebuilds
-''', style: Theme.of(context).textTheme.headlineSmall),
+''', style: Theme.of(context).textTheme.headlineMedium),
             const SizedBox(height: 16),
             Text('LayoutBuilder',
                 style: Theme.of(context).textTheme.headlineLarge),
             const SizedBox(height: 8),
             Text('''
 - Provides the size of the parent widget
 - Should be generally used
-''', style: Theme.of(context).textTheme.headlineSmall),
-            const SizedBox(height: 16),
-            Text('Other Widgets',
-                style: Theme.of(context).textTheme.headlineLarge),
-            const SizedBox(height: 8),
-            Text('''
-- ConstrainedBox
-- FractionallySizedBox
-- ...
-''', style: Theme.of(context).textTheme.headlineSmall),
+''', style: Theme.of(context).textTheme.headlineMedium),
           ],
         ),
       ),

diff --git a/deck/lib/slides/responsive_challanges_slide.dart b/deck/lib/slides/responsive_challanges_slide.dart
@@ -19,7 +19,7 @@ class ResponsiveChallengesSlide extends FlutterDeckSlideWidget {
           useSteps: true,
           items: const [
             'Many different Form Factors (Phone, Tablet, Desktop, Foldable, ...)',
-            'Notches, Cutouts, Punch holes',
+            'Notches, Cutouts, Punch holes, Dynamic Island',
             'Scaling UI and Text for accessibility',
             'Different behaviors for different platforms',
             'Supporting RTL and LTR languages',

diff --git a/deck/lib/slides/thank_you_slide.dart b/deck/lib/slides/thank_you_slide.dart
@@ -17,19 +17,19 @@ class ThankYouSlide extends FlutterDeckSlideWidget {
               child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.center,
-                  children: <Widget>[
+                  children: [
                     Text('Thank You!',
                         style: Theme.of(context).textTheme.displayLarge),
                     const SizedBox(height: 64),
                     Image.asset(
-                      'assets/qrcode_linkedIn.png',
+                      'assets/qrcode_github.png',
                       width: 250,
                     ),
-                    const SizedBox(height: 16),
-                    Text('Scan to know how to connect with me',
+                    const SizedBox(height: 32),
+                    Text('Scan to to connect with me',
                         style: Theme.of(context).textTheme.headlineMedium),
                     const SizedBox(height: 64),
-                    Text('You can find me on LinkedIn, GitHub, X and Medium!',
+                    Text('You can find me on LinkedIn, GitHub and X!',
                         style: Theme.of(context).textTheme.headlineMedium),
                   ]),
             ));