feat(lib): create 2-button layout

Author: alexisdelage

example/simple_app/test/flutter_test_config.dart

@@ -4,13 +4,19 @@ import 'package:adaptive_test/adaptive_test.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+final pixel5TwoButton = pixel5ThreeButton.copyWith(
+  name: 'pixel_5_two_button',
+  systemNavBar: const SystemNavBarData.twoButton(),
+);
+
 final defaultDeviceConfigs = {
   iPhone8,
   iPhone16,
   iPadPro,
   desktop,
   pixel9,
   pixel5ThreeButton,
+  pixel5TwoButton
 };
 
 Future<void> testExecutable(FutureOr<void> Function() testMain) async {

example/simple_app/test/src/preview/custom_path_pixel_5_two_button.png

@@ -1,5 +1,6 @@
 import 'package:adaptive_test/src/adaptive/widgets/layers/gesture_indicator_system_nav_bar_layer.dart';
 import 'package:adaptive_test/src/adaptive/widgets/layers/three_button_system_nav_bar_layer.dart';
+import 'package:adaptive_test/src/adaptive/widgets/layers/two_button_system_nav_bar_layer.dart';
 import 'package:adaptive_test/src/adaptive/window_config.dart';
 import 'package:adaptive_test/src/adaptive/window_config_data/system_nav_bar_data.dart';
 import 'package:flutter/material.dart';
@@ -31,6 +32,12 @@ class SystemNavBarLayer extends StatelessWidget {
           child: child,
         );
 
+      case TwoButtonSystemNavBarData():
+        return TwoButtonSystemNavBarLayer(
+          twoButtonNavBar: systemNavBarData,
+          child: child,
+        );
+
       case null:
         return child;
     }

example/simple_app/test/src/preview/pixel_5_two_button-app_fade_in_image.png

@@ -0,0 +1,64 @@
+import 'package:adaptive_test/src/adaptive/window_config.dart';
+import 'package:adaptive_test/src/adaptive/window_config_data/system_nav_bar_data.dart';
+import 'package:flutter/material.dart';
+
+class TwoButtonSystemNavBarLayer extends StatelessWidget {
+  const TwoButtonSystemNavBarLayer({
+    required this.twoButtonNavBar,
+    required this.child,
+    super.key,
+  });
+
+  final TwoButtonSystemNavBarData twoButtonNavBar;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final windowConfig = WindowConfig.of(context);
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Stack(
+        children: [
+          child,
+          Positioned(
+            bottom: twoButtonNavBar.bottomPadding,
+            width: windowConfig.size.width,
+            child: Container(
+              height: twoButtonNavBar.height,
+              color: twoButtonNavBar.backgroundColor,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  // Back button
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 24),
+                    child: Icon(
+                      Icons.arrow_back,
+                      color: twoButtonNavBar.iconColor,
+                    ),
+                  ),
+                  // Home pill (centered visually)
+                  Center(
+                    child: Container(
+                      height: twoButtonNavBar.homeHeight,
+                      width: twoButtonNavBar.homeWidth,
+                      decoration: BoxDecoration(
+                        color: twoButtonNavBar.iconColor,
+                        borderRadius:
+                            BorderRadius.circular(twoButtonNavBar.homeHeight),
+                      ),
+                    ),
+                  ),
+
+                  // Right side is empty (no tasks button)
+                  const SizedBox(width: 48),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

example/simple_app/test/src/preview/pixel_5_two_button-app_simple.png

@@ -28,6 +28,23 @@ sealed class SystemNavBarData extends Equatable {
     double iconSize,
     double bottomPadding,
   }) = ThreeButtonSystemNavBarData;
+
+  /// Describe the OS two-button navigation bar.
+  ///
+  /// [height] The height of the navigation bar, expressed in `dp`.
+  /// [backgroundColor] The background color of the navigation bar.
+  /// [iconColor] The color of the icons in the navigation bar.
+  /// [homeWidth] The width of the home button, expressed in `dp`.
+  /// [homeHeight] The height of the home button, expressed in `dp`.
+  /// [bottomPadding] The distance from the screen bottom to the navigation bar.
+  const factory SystemNavBarData.twoButton({
+    double height,
+    Color backgroundColor,
+    Color iconColor,
+    double homeWidth,
+    double homeHeight,
+    double bottomPadding,
+  }) = TwoButtonSystemNavBarData;
 }
 
 /// Describe the OS gesture indicator on bottom of apps, expressed in `dp`.
@@ -83,3 +100,31 @@ class ThreeButtonSystemNavBarData extends SystemNavBarData {
         bottomPadding,
       ];
 }
+
+class TwoButtonSystemNavBarData extends SystemNavBarData {
+  const TwoButtonSystemNavBarData({
+    this.height = 48.0,
+    this.backgroundColor = const Color.fromRGBO(0, 0, 0, .1),
+    this.iconColor = const Color.fromRGBO(40, 40, 40, .6),
+    this.homeWidth = 60.0,
+    this.homeHeight = 6.0,
+    this.bottomPadding = 0.0,
+  });
+
+  final double height; // total bar height
+  final Color backgroundColor; // bar background
+  final Color iconColor; // color of back arrow
+  final double homeWidth; // pill width
+  final double homeHeight; // pill height
+  final double bottomPadding; // distance from bottom
+
+  @override
+  List<Object?> get props => [
+        height,
+        backgroundColor,
+        iconColor,
+        homeWidth,
+        homeHeight,
+        bottomPadding,
+      ];
+}