example: reference for #73

Author: mockturtl

example/lib/menu_variable_height_front_layer.dart

@@ -0,0 +1,85 @@
+import 'package:backdrop/backdrop.dart';
+import 'package:flutter/material.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatefulWidget {
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+
+class ShortOption extends StatelessWidget {
+  final int index;
+
+  ShortOption(this.index);
+
+  @override
+  Widget build(BuildContext context) => Center(
+          child: Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          Text("Page #$index is open with desired height."),
+          const Flexible(child: FractionallySizedBox(heightFactor: 0.1)),
+          Text("It looks better! 😄"),
+          const Flexible(child: FractionallySizedBox(heightFactor: 0.1)),
+          Text("But Page #0 still needs to be tall."),
+        ],
+      ));
+}
+
+class TallOption extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) => ListView(
+      children: List.generate(
+          20,
+          (index) => Padding(
+              padding: const EdgeInsets.all(16),
+              child: Text("Tall page #0, lots of content 👍"))));
+}
+
+class _MyAppState extends State<MyApp> {
+  int _currentIndex = 0;
+
+  final List<Widget> _pages = [
+    TallOption(),
+    ShortOption(1),
+    ShortOption(2),
+    ShortOption(3),
+    ShortOption(4),
+    ShortOption(5),
+    ShortOption(6),
+    ShortOption(7),
+    ShortOption(8),
+    ShortOption(9),
+  ];
+
+  final _nav = List.generate(
+      10,
+      (i) => ListTile(
+          title: Text('Menu: open page #$i',
+              style: TextStyle(color: Colors.white))));
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+        title: 'Backdrop Demo',
+        home: BackdropScaffold(
+            appBar: BackdropAppBar(title: Text("AppBar is OK 👍")),
+            frontLayer: _pages[_currentIndex],
+            // headerHeight: 512,
+            stickyFrontLayer: true,
+            // subHeaderAlwaysActive: false,
+            backLayerScrim: Colors.red.withOpacity(0.5),
+            frontLayerScrim: Colors.green.withOpacity(0.5),
+            frontLayerActiveFactor:
+                _currentIndex == 0 ? 1 : (.1 * _currentIndex),
+            subHeader: BackdropSubHeader(title: Text('Subheader')),
+            backLayer: BackdropNavigationBackLayer(
+                items: _nav,
+                onTap: (int position) =>
+                    {setState(() => _currentIndex = position)},
+                separatorBuilder: (_, __) =>
+                    Divider(indent: 16, endIndent: 16, color: Colors.white))));
+  }
+}