diff --git a/example/lib/menu_variable_height_front_layer.dart b/example/lib/menu_variable_height_front_layer.dart new file mode 100644 index 0000000..c3fe21b --- /dev/null +++ b/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 { + int _currentIndex = 0; + + final List _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)))); + } +}