[flutter_adaptive_scaffold] Support RTL

packages/flutter_adaptive_scaffold/CHANGELOG.md

@@ -1,5 +1,6 @@
-## NEXT
+## 0.1.5
 
+* Added support for Right-to-left (RTL) directionality.
 * Fixes stale ignore: prefer_const_constructors.
 * Updates minimum supported SDK version to Flutter 3.10/Dart 3.0.
 

packages/flutter_adaptive_scaffold/README.md

@@ -137,110 +137,108 @@ displayed and the entrance animation and exit animation.
 
 <?code-excerpt "adaptive_layout_demo.dart (Example)"?>
 ```dart
-    // AdaptiveLayout has a number of slots that take SlotLayouts and these
-    // SlotLayouts' configs take maps of Breakpoints to SlotLayoutConfigs.
-    return AdaptiveLayout(
-      // Primary navigation config has nothing from 0 to 600 dp screen width,
-      // then an unextended NavigationRail with no labels and just icons then an
-      // extended NavigationRail with both icons and labels.
-      primaryNavigation: SlotLayout(
-        config: <Breakpoint, SlotLayoutConfig>{
-          Breakpoints.medium: SlotLayout.from(
-            inAnimation: AdaptiveScaffold.leftOutIn,
-            key: const Key('Primary Navigation Medium'),
-            builder: (_) => AdaptiveScaffold.standardNavigationRail(
-              selectedIndex: selectedNavigation,
-              onDestinationSelected: (int newIndex) {
-                setState(() {
-                  selectedNavigation = newIndex;
-                });
-              },
-              leading: const Icon(Icons.menu),
-              destinations: destinations
-                  .map((_) => AdaptiveScaffold.toRailDestination(_))
-                  .toList(),
-              backgroundColor: navRailTheme.backgroundColor,
-              selectedIconTheme: navRailTheme.selectedIconTheme,
-              unselectedIconTheme: navRailTheme.unselectedIconTheme,
-              selectedLabelTextStyle: navRailTheme.selectedLabelTextStyle,
-              unSelectedLabelTextStyle: navRailTheme.unselectedLabelTextStyle,
-            ),
-          ),
-          Breakpoints.large: SlotLayout.from(
-            key: const Key('Primary Navigation Large'),
-            inAnimation: AdaptiveScaffold.leftOutIn,
-            builder: (_) => AdaptiveScaffold.standardNavigationRail(
-              selectedIndex: selectedNavigation,
-              onDestinationSelected: (int newIndex) {
-                setState(() {
-                  selectedNavigation = newIndex;
-                });
-              },
-              extended: true,
-              leading: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceAround,
-                children: const <Widget>[
-                  Text(
-                    'REPLY',
-                    style: TextStyle(color: Color.fromARGB(255, 255, 201, 197)),
-                  ),
-                  Icon(Icons.menu_open)
-                ],
-              ),
-              destinations: destinations
-                  .map((_) => AdaptiveScaffold.toRailDestination(_))
-                  .toList(),
-              trailing: trailingNavRail,
-              backgroundColor: navRailTheme.backgroundColor,
-              selectedIconTheme: navRailTheme.selectedIconTheme,
-              unselectedIconTheme: navRailTheme.unselectedIconTheme,
-              selectedLabelTextStyle: navRailTheme.selectedLabelTextStyle,
-              unSelectedLabelTextStyle: navRailTheme.unselectedLabelTextStyle,
-            ),
-          ),
-        },
+// AdaptiveLayout has a number of slots that take SlotLayouts and these
+// SlotLayouts' configs take maps of Breakpoints to SlotLayoutConfigs.
+return AdaptiveLayout(
+  // Primary navigation config has nothing from 0 to 600 dp screen width,
+  // then an unextended NavigationRail with no labels and just icons then an
+  // extended NavigationRail with both icons and labels.
+  primaryNavigation: SlotLayout(
+    config: <Breakpoint, SlotLayoutConfig>{
+      Breakpoints.medium: SlotLayout.from(
+        inAnimation: AdaptiveScaffold.leftOutIn,
+        key: const Key('Primary Navigation Medium'),
+        builder: (_) => AdaptiveScaffold.standardNavigationRail(
+          selectedIndex: selectedNavigation,
+          onDestinationSelected: (int newIndex) {
+            setState(() {
+              selectedNavigation = newIndex;
+            });
+          },
+          leading: const Icon(Icons.menu),
+          destinations: destinations
+              .map((_) => AdaptiveScaffold.toRailDestination(_))
+              .toList(),
+          backgroundColor: navRailTheme.backgroundColor,
+          selectedIconTheme: navRailTheme.selectedIconTheme,
+          unselectedIconTheme: navRailTheme.unselectedIconTheme,
+          selectedLabelTextStyle: navRailTheme.selectedLabelTextStyle,
+          unSelectedLabelTextStyle: navRailTheme.unselectedLabelTextStyle,
+        ),
       ),
-      // Body switches between a ListView and a GridView from small to medium
-      // breakpoints and onwards.
-      body: SlotLayout(
-        config: <Breakpoint, SlotLayoutConfig>{
-          Breakpoints.small: SlotLayout.from(
-            key: const Key('Body Small'),
-            builder: (_) => ListView.builder(
-              itemCount: children.length,
-              itemBuilder: (BuildContext context, int index) => children[index],
-            ),
+      Breakpoints.large: SlotLayout.from(
+        key: const Key('Primary Navigation Large'),
+        inAnimation: AdaptiveScaffold.leftOutIn,
+        builder: (_) => AdaptiveScaffold.standardNavigationRail(
+          selectedIndex: selectedNavigation,
+          onDestinationSelected: (int newIndex) {
+            setState(() {
+              selectedNavigation = newIndex;
+            });
+          },
+          extended: true,
+          leading: const Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: <Widget>[
+              Text(
+                'REPLY',
+                style: TextStyle(color: Color.fromARGB(255, 255, 201, 197)),
+              ),
+              Icon(Icons.menu_open)
+            ],
           ),
-          Breakpoints.mediumAndUp: SlotLayout.from(
-            key: const Key('Body Medium'),
-            builder: (_) =>
-                GridView.count(crossAxisCount: 2, children: children),
-          )
-        },
+          destinations: destinations
+              .map((_) => AdaptiveScaffold.toRailDestination(_))
+              .toList(),
+          trailing: trailingNavRail,
+          backgroundColor: navRailTheme.backgroundColor,
+          selectedIconTheme: navRailTheme.selectedIconTheme,
+          unselectedIconTheme: navRailTheme.unselectedIconTheme,
+          selectedLabelTextStyle: navRailTheme.selectedLabelTextStyle,
+          unSelectedLabelTextStyle: navRailTheme.unselectedLabelTextStyle,
+        ),
       ),
-      // BottomNavigation is only active in small views defined as under 600 dp
-      // width.
-      bottomNavigation: SlotLayout(
-        config: <Breakpoint, SlotLayoutConfig>{
-          Breakpoints.small: SlotLayout.from(
-            key: const Key('Bottom Navigation Small'),
-            inAnimation: AdaptiveScaffold.bottomToTop,
-            outAnimation: AdaptiveScaffold.topToBottom,
-            builder: (_) => AdaptiveScaffold.standardBottomNavigationBar(
-              destinations: destinations,
-              currentIndex: selectedNavigation,
-              onDestinationSelected: (int newIndex) {
-                setState(() {
-                  selectedNavigation = newIndex;
-                });
-              },
-            ),
-          )
-        },
+    },
+  ),
+  // Body switches between a ListView and a GridView from small to medium
+  // breakpoints and onwards.
+  body: SlotLayout(
+    config: <Breakpoint, SlotLayoutConfig>{
+      Breakpoints.small: SlotLayout.from(
+        key: const Key('Body Small'),
+        builder: (_) => ListView.builder(
+          itemCount: children.length,
+          itemBuilder: (BuildContext context, int index) => children[index],
+        ),
       ),
-    );
-  }
-}
+      Breakpoints.mediumAndUp: SlotLayout.from(
+        key: const Key('Body Medium'),
+        builder: (_) =>
+            GridView.count(crossAxisCount: 2, children: children),
+      )
+    },
+  ),
+  // BottomNavigation is only active in small views defined as under 600 dp
+  // width.
+  bottomNavigation: SlotLayout(
+    config: <Breakpoint, SlotLayoutConfig>{
+      Breakpoints.small: SlotLayout.from(
+        key: const Key('Bottom Navigation Small'),
+        inAnimation: AdaptiveScaffold.bottomToTop,
+        outAnimation: AdaptiveScaffold.topToBottom,
+        builder: (_) => AdaptiveScaffold.standardBottomNavigationBar(
+          destinations: destinations,
+          currentIndex: selectedNavigation,
+          onDestinationSelected: (int newIndex) {
+            setState(() {
+              selectedNavigation = newIndex;
+            });
+          },
+        ),
+      )
+    },
+  ),
+);
 ```
 
 Both of the examples shown here produce the same output:

packages/flutter_adaptive_scaffold/example/lib/adaptive_layout_demo.dart

@@ -2,9 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// TODO(goderbauer): Remove this ignore when this package requires Flutter 3.8 or later.
-// ignore_for_file: prefer_const_constructors
-
 import 'package:flutter/material.dart';
 import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
 
@@ -58,8 +55,8 @@ class _MyHomePageState extends State<MyHomePage> {
       children: <Widget>[
         const Divider(color: Colors.black),
         const SizedBox(height: 10),
-        Row(
-          children: const <Widget>[
+        const Row(
+          children: <Widget>[
             SizedBox(width: 27),
             Text('Folders', style: TextStyle(fontSize: 16)),
           ],
@@ -74,8 +71,8 @@ class _MyHomePageState extends State<MyHomePage> {
               iconSize: 21,
             ),
             const SizedBox(width: 21),
-            Flexible(
-              child: const Text(
+            const Flexible(
+              child: Text(
                 'Freelance',
                 overflow: TextOverflow.ellipsis,
               ),
@@ -92,8 +89,8 @@ class _MyHomePageState extends State<MyHomePage> {
               iconSize: 21,
             ),
             const SizedBox(width: 21),
-            Flexible(
-              child: const Text(
+            const Flexible(
+              child: Text(
                 'Mortgage',
                 overflow: TextOverflow.ellipsis,
               ),
@@ -198,9 +195,9 @@ class _MyHomePageState extends State<MyHomePage> {
                 });
               },
               extended: true,
-              leading: Row(
+              leading: const Row(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
-                children: const <Widget>[
+                children: <Widget>[
                   Text(
                     'REPLY',
                     style: TextStyle(color: Color.fromARGB(255, 255, 201, 197)),
@@ -260,6 +257,6 @@ class _MyHomePageState extends State<MyHomePage> {
         },
       ),
     );
-    // #enddocregion
+    // #enddocregion Example
   }
 }