Merge pull request #23 from fluttercommunity/feature/backdrop-app-bar

BackdropAppBar
fluttercommunity · May 27, 2020 · 8ad61bf · 8ad61bf
2 parents 29886ee + f30fa66
commit 8ad61bf
Show file tree

Hide file tree

Showing 4 changed files with 299 additions and 104 deletions.
diff --git a/README.md b/README.md
@@ -36,14 +36,20 @@ A `backLayer` and a `frontLayer` have to be defined for the backdrop to work.
 
 ```dart
 BackdropScaffold(
+  appBar: BackdropAppBar(
     title: Text("Backdrop Example"),
-    backLayer: Center(
-        child: Text("Back Layer"),
-    ),
-    frontLayer: Center(
-        child: Text("Front Layer"),
-    ),
-    iconPosition: BackdropIconPosition.leading,
+    actions: <Widget>[
+      BackdropToggleButton(
+        icon: AnimatedIcons.list_view,
+      )
+    ],
+  ),
+  backLayer: Center(
+    child: Text("Back Layer"),
+  ),
+  frontLayer: Center(
+    child: Text("Front Layer"),
+  ),
 )
 ```
 <div align="center">
@@ -56,33 +62,33 @@ To use backdrop for navigation, use the provided `BackdropNavigationBackLayer` a
 The `BackdropNavigationBackLayer` contains a property `items` representing the list elements shown on the back layer. The front layer has to be "manually" set depending on the current index, which can be accessed with the `onTap` callback.
 
 ```dart
-class _MyAppState extends State<MyApp> {
-  int _currentIndex = 0;
-  final List<Widget> _frontLayers = [Widget1(), Widget2()];
-
-  @override
-  Widget build(BuildContext context) {
-    return new MaterialApp(
-      title: 'Backdrop Demo',
-      home: BackdropScaffold(
-        title: Text("Backdrop Navigation Example"),
-        iconPosition: BackdropIconPosition.leading,
+int _currentIndex = 0;
+final List<Widget> _pages = [Widget1(), Widget2()];
+
+@override
+Widget build(BuildContext context) {
+  return MaterialApp(
+    title: 'Backdrop Demo',
+    home: BackdropScaffold(
+      appBar: BackdropAppBar(
+        title: Text("Navigation Example"),
         actions: <Widget>[
           BackdropToggleButton(
             icon: AnimatedIcons.list_view,
-          ),
+          )
         ],
-        frontLayer: _frontLayers[_currentIndex],
-        backLayer: BackdropNavigationBackLayer(
-          items: [
-            ListTile(title: Text("Widget 1")),
-            ListTile(title: Text("Widget 2")),
-          ],
-          onTap: (int position) => {setState(() => _currentIndex = position)},
-        ),
       ),
-    );
-  }
+      stickyFrontLayer: true,
+      frontLayer: _pages[_currentIndex],
+      backLayer: BackdropNavigationBackLayer(
+        items: [
+          ListTile(title: Text("Widget 1")),
+          ListTile(title: Text("Widget 2")),
+        ],
+        onTap: (int position) => {setState(() => _currentIndex = position)},
+      ),
+    ),
+  );
 }
 ```
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -9,19 +9,20 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Backdrop Demo',
       home: BackdropScaffold(
-        title: Text("Backdrop Example"),
+        appBar: BackdropAppBar(
+          title: Text("Backdrop Example"),
+          actions: <Widget>[
+            BackdropToggleButton(
+              icon: AnimatedIcons.list_view,
+            )
+          ],
+        ),
         backLayer: Center(
           child: Text("Back Layer"),
         ),
         frontLayer: Center(
           child: Text("Front Layer"),
         ),
-        iconPosition: BackdropIconPosition.leading,
-        actions: <Widget>[
-          BackdropToggleButton(
-            icon: AnimatedIcons.list_view,
-          ),
-        ],
       ),
     );
   }

diff --git a/example/lib/navigation.dart b/example/lib/navigation.dart
@@ -17,13 +17,14 @@ class _MyAppState extends State<MyApp> {
     return MaterialApp(
       title: 'Backdrop Demo',
       home: BackdropScaffold(
-        title: Text("Backdrop Navigation Example"),
-        iconPosition: BackdropIconPosition.leading,
-        actions: <Widget>[
-          BackdropToggleButton(
-            icon: AnimatedIcons.list_view,
-          ),
-        ],
+        appBar: BackdropAppBar(
+          title: Text("Navigation Example"),
+          actions: <Widget>[
+            BackdropToggleButton(
+              icon: AnimatedIcons.list_view,
+            )
+          ],
+        ),
         stickyFrontLayer: true,
         frontLayer: _pages[_currentIndex],
         backLayer: BackdropNavigationBackLayer(