Add transitionDuration parameter (#5854)

Adds transitionDuration parameter for specifying how long the animation should be.

This adds the following suggestion from the issue flutter/flutter#114272

    The duration of the animations are set to 1 second, we should have the option to set animation durations when creating slot layouts.

    Originally posted by @jamiewest in flutter/flutter#114272 (comment)

Author: GiftShower

packages/flutter_adaptive_scaffold/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.8
+
+*  Adds `transitionDuration` parameter for specifying how long the animation should be.
+
 ## 0.1.7+2
 
 * Fixes new lint warnings.

packages/flutter_adaptive_scaffold/README.md

@@ -48,8 +48,9 @@ Widget build(BuildContext context) {
         ),
       )
   ];
-
   return AdaptiveScaffold(
+    // An option to override the default transition duration.
+    transitionDuration: Duration(milliseconds: _transitionDuration),
     // An option to override the default breakpoints used for small, medium,
     // and large.
     smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
@@ -139,6 +140,8 @@ displayed and the entrance animation and exit animation.
 // AdaptiveLayout has a number of slots that take SlotLayouts and these
 // SlotLayouts' configs take maps of Breakpoints to SlotLayoutConfigs.
 return AdaptiveLayout(
+  // An option to override the default transition duration.
+  transitionDuration: Duration(milliseconds: _transitionDuration),
   // 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.

packages/flutter_adaptive_scaffold/example/lib/adaptive_layout_demo.dart

@@ -26,14 +26,27 @@ class MyApp extends StatelessWidget {
 /// [AdaptiveLayout].
 class MyHomePage extends StatefulWidget {
   /// Creates a const [MyHomePage].
-  const MyHomePage({super.key});
+  const MyHomePage({super.key, this.transitionDuration = 1000});
+
+  /// Declare transition duration.
+  final int transitionDuration;
 
   @override
   State<MyHomePage> createState() => _MyHomePageState();
 }
 
 class _MyHomePageState extends State<MyHomePage> {
   int selectedNavigation = 0;
+  int _transitionDuration = 1000;
+
+  // Initialize transition time variable.
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      _transitionDuration = widget.transitionDuration;
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -158,6 +171,8 @@ class _MyHomePageState extends State<MyHomePage> {
     // AdaptiveLayout has a number of slots that take SlotLayouts and these
     // SlotLayouts' configs take maps of Breakpoints to SlotLayoutConfigs.
     return AdaptiveLayout(
+      // An option to override the default transition duration.
+      transitionDuration: Duration(milliseconds: _transitionDuration),
       // 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.

packages/flutter_adaptive_scaffold/example/lib/adaptive_scaffold_demo.dart

@@ -45,14 +45,27 @@ class MyApp extends StatelessWidget {
 /// [AdaptiveScaffold].
 class MyHomePage extends StatefulWidget {
   /// Creates a const [MyHomePage].
-  const MyHomePage({super.key});
+  const MyHomePage({super.key, this.transitionDuration = 1000});
+
+  /// Declare transition duration.
+  final int transitionDuration;
 
   @override
   State<MyHomePage> createState() => _MyHomePageState();
 }
 
 class _MyHomePageState extends State<MyHomePage> {
   int _selectedTab = 0;
+  int _transitionDuration = 1000;
+
+  // Initialize transition time variable.
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      _transitionDuration = widget.transitionDuration;
+    });
+  }
 
   // #docregion Example
   @override
@@ -68,8 +81,9 @@ class _MyHomePageState extends State<MyHomePage> {
           ),
         )
     ];
-
     return AdaptiveScaffold(
+      // An option to override the default transition duration.
+      transitionDuration: Duration(milliseconds: _transitionDuration),
       // An option to override the default breakpoints used for small, medium,
       // and large.
       smallBreakpoint: const WidthPlatformBreakpoint(end: 700),

packages/flutter_adaptive_scaffold/example/pubspec.yaml

@@ -12,7 +12,6 @@ dependencies:
     sdk: flutter
   flutter_adaptive_scaffold:
     path: ..
-  flutter_lints: ^2.0.0
 
 dev_dependencies:
   build_runner: ^2.1.10

packages/flutter_adaptive_scaffold/example/test/adaptive_scaffold_demo_test.dart

@@ -15,13 +15,16 @@ void main() {
   final Finder pnav = find.byKey(const Key('primaryNavigation'));
   final Finder pnav1 = find.byKey(const Key('primaryNavigation1'));
 
-  Future<void> updateScreen(double width, WidgetTester tester) async {
+  Future<void> updateScreen(double width, WidgetTester tester,
+      {int transitionDuration = 1000}) async {
     await tester.binding.setSurfaceSize(Size(width, 800));
     await tester.pumpWidget(
       MaterialApp(
         home: MediaQuery(
             data: MediaQueryData(size: Size(width, 800)),
-            child: const example.MyHomePage()),
+            child: example.MyHomePage(
+              transitionDuration: transitionDuration,
+            )),
       ),
     );
   }
@@ -98,4 +101,21 @@ void main() {
     expect(tester.getTopLeft(sBody), const Offset(400, 0));
     expect(tester.getBottomRight(sBody), const Offset(800, 800));
   });
+
+  testWidgets('animation plays correctly in declared duration',
+      (WidgetTester tester) async {
+    final Finder b = find.byKey(const Key('body'));
+    final Finder sBody = find.byKey(const Key('sBody'));
+
+    await updateScreen(400, tester, transitionDuration: 500);
+    await updateScreen(800, tester, transitionDuration: 500);
+
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+
+    expect(tester.getTopLeft(b), const Offset(88, 0));
+    expect(tester.getBottomRight(b), const Offset(400, 800));
+    expect(tester.getTopLeft(sBody), const Offset(400, 0));
+    expect(tester.getBottomRight(sBody), const Offset(800, 800));
+  });
 }

packages/flutter_adaptive_scaffold/lib/src/adaptive_layout.dart

@@ -117,6 +117,7 @@ class AdaptiveLayout extends StatefulWidget {
     this.body,
     this.secondaryBody,
     this.bodyRatio,
+    this.transitionDuration = const Duration(seconds: 1),
     this.internalAnimations = true,
     this.bodyOrientation = Axis.horizontal,
   });
@@ -181,6 +182,11 @@ class AdaptiveLayout extends StatefulWidget {
   /// hinge when there is one.
   final double? bodyRatio;
 
+  /// Defines the duration of transition between layouts.
+  ///
+  /// Defaults to [Duration(seconds: 1)].
+  final Duration transitionDuration;
+
   /// Whether or not the developer wants the smooth entering slide transition on
   /// [secondaryBody].
   ///
@@ -213,7 +219,7 @@ class _AdaptiveLayoutState extends State<AdaptiveLayout>
   void initState() {
     if (widget.internalAnimations) {
       _controller = AnimationController(
-        duration: const Duration(seconds: 1),
+        duration: widget.transitionDuration,
         vsync: this,
       )..forward();
     } else {

packages/flutter_adaptive_scaffold/lib/src/adaptive_scaffold.dart

@@ -95,6 +95,7 @@ class AdaptiveScaffold extends StatefulWidget {
     this.largeBreakpoint = Breakpoints.large,
     this.drawerBreakpoint = Breakpoints.smallDesktop,
     this.internalAnimations = true,
+    this.transitionDuration = const Duration(seconds: 1),
     this.bodyOrientation = Axis.horizontal,
     this.onSelectedIndexChange,
     this.useDrawer = true,
@@ -198,6 +199,11 @@ class AdaptiveScaffold extends StatefulWidget {
   /// Defaults to true.
   final bool internalAnimations;
 
+  /// Defines the duration of transition between layouts.
+  ///
+  /// Defaults to [Duration(seconds: 1)].
+  final Duration transitionDuration;
+
   /// The orientation of the body and secondaryBody. Either horizontal (side by
   /// side) or vertical (top to bottom).
   ///
@@ -522,6 +528,7 @@ class _AdaptiveScaffoldState extends State<AdaptiveScaffold> {
             )
           : null,
       body: AdaptiveLayout(
+        transitionDuration: widget.transitionDuration,
         bodyOrientation: widget.bodyOrientation,
         bodyRatio: widget.bodyRatio,
         internalAnimations: widget.internalAnimations,

packages/flutter_adaptive_scaffold/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_adaptive_scaffold
 description: Widgets to easily build adaptive layouts, including navigation elements.
-version: 0.1.7+2
+version: 0.1.8
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_adaptive_scaffold%22
 repository: https://github.com/flutter/packages/tree/main/packages/flutter_adaptive_scaffold