diff --git a/demo/.gitignore b/demo/.gitignore
new file mode 100644
index 0000000..f3c2053
--- /dev/null
+++ b/demo/.gitignore
@@ -0,0 +1,44 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Exceptions to above rules.
+!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
diff --git a/demo/.metadata b/demo/.metadata
new file mode 100644
index 0000000..2a1a285
--- /dev/null
+++ b/demo/.metadata
@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+ revision: 8fe7655ed20ffd1395f68e30539a847a01a30351
+ channel: beta
+
+project_type: app
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 0000000..9284156
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,16 @@
+# demo
+
+Demo application showing the use cases of backdrop.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
+
+For help getting started with Flutter, view our
+[online documentation](https://flutter.dev/docs), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.
diff --git a/demo/android/.gitignore b/demo/android/.gitignore
new file mode 100644
index 0000000..0a741cb
--- /dev/null
+++ b/demo/android/.gitignore
@@ -0,0 +1,11 @@
+gradle-wrapper.jar
+/.gradle
+/captures/
+/gradlew
+/gradlew.bat
+/local.properties
+GeneratedPluginRegistrant.java
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
+key.properties
diff --git a/demo/android/app/build.gradle b/demo/android/app/build.gradle
new file mode 100644
index 0000000..ce8d879
--- /dev/null
+++ b/demo/android/app/build.gradle
@@ -0,0 +1,63 @@
+def localProperties = new Properties()
+def localPropertiesFile = rootProject.file('local.properties')
+if (localPropertiesFile.exists()) {
+ localPropertiesFile.withReader('UTF-8') { reader ->
+ localProperties.load(reader)
+ }
+}
+
+def flutterRoot = localProperties.getProperty('flutter.sdk')
+if (flutterRoot == null) {
+ throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
+}
+
+def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
+if (flutterVersionCode == null) {
+ flutterVersionCode = '1'
+}
+
+def flutterVersionName = localProperties.getProperty('flutter.versionName')
+if (flutterVersionName == null) {
+ flutterVersionName = '1.0'
+}
+
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
+
+android {
+ compileSdkVersion 28
+
+ sourceSets {
+ main.java.srcDirs += 'src/main/kotlin'
+ }
+
+ lintOptions {
+ disable 'InvalidPackage'
+ }
+
+ defaultConfig {
+ // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+ applicationId "com.example.demo"
+ minSdkVersion 16
+ targetSdkVersion 28
+ versionCode flutterVersionCode.toInteger()
+ versionName flutterVersionName
+ }
+
+ buildTypes {
+ release {
+ // TODO: Add your own signing config for the release build.
+ // Signing with the debug keys for now, so `flutter run --release` works.
+ signingConfig signingConfigs.debug
+ }
+ }
+}
+
+flutter {
+ source '../..'
+}
+
+dependencies {
+ implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+}
diff --git a/demo/android/app/src/debug/AndroidManifest.xml b/demo/android/app/src/debug/AndroidManifest.xml
new file mode 100644
index 0000000..0310cf3
--- /dev/null
+++ b/demo/android/app/src/debug/AndroidManifest.xml
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/demo/android/app/src/main/AndroidManifest.xml b/demo/android/app/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..31331cf
--- /dev/null
+++ b/demo/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/android/app/src/main/ic_launcher-playstore.png b/demo/android/app/src/main/ic_launcher-playstore.png
new file mode 100644
index 0000000..75c44d5
Binary files /dev/null and b/demo/android/app/src/main/ic_launcher-playstore.png differ
diff --git a/demo/android/app/src/main/kotlin/com/example/demo/MainActivity.kt b/demo/android/app/src/main/kotlin/com/example/demo/MainActivity.kt
new file mode 100644
index 0000000..34b9c4c
--- /dev/null
+++ b/demo/android/app/src/main/kotlin/com/example/demo/MainActivity.kt
@@ -0,0 +1,6 @@
+package com.example.demo
+
+import io.flutter.embedding.android.FlutterActivity
+
+class MainActivity: FlutterActivity() {
+}
diff --git a/demo/android/app/src/main/res/drawable/launch_background.xml b/demo/android/app/src/main/res/drawable/launch_background.xml
new file mode 100644
index 0000000..304732f
--- /dev/null
+++ b/demo/android/app/src/main/res/drawable/launch_background.xml
@@ -0,0 +1,12 @@
+
+
+
+ {
+ String code;
+
+ @override
+ Widget build(BuildContext context) {
+ return Center(
+ child: FutureBuilder(
+ future: DefaultAssetBundle.of(context).loadString(widget.codeFile),
+ builder: (BuildContext context, AsyncSnapshot snapshot) {
+ if (snapshot.hasData) {
+ return SizedBox.expand(
+ child: SingleChildScrollView(
+ child: HighlightView(
+ snapshot.data,
+ language: "dart",
+ theme: draculaTheme,
+ padding: EdgeInsets.all(8.0),
+ textStyle: TextStyle(fontSize: 12, height: 1.3),
+ ),
+ ),
+ );
+ } else if (snapshot.hasError) {
+ return Text(snapshot.error.toString());
+ } else {
+ return CircularProgressIndicator();
+ }
+ },
+ ),
+ );
+ }
+}
diff --git a/demo/lib/demo/demo_page.dart b/demo/lib/demo/demo_page.dart
new file mode 100644
index 0000000..5b55495
--- /dev/null
+++ b/demo/lib/demo/demo_page.dart
@@ -0,0 +1,69 @@
+import 'package:demo/data/use_case.dart';
+import 'package:demo/demo/code.dart';
+import 'package:demo/demo/info.dart';
+import 'package:demo/demo/preview.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+/// Class for presenting a entire use case to the user. The user can switch bet-
+/// ween info, preview and source code pages concerning the given use case.
+class DemoPage extends StatefulWidget {
+ /// The use case to be presented to the user.
+ final UseCase useCase;
+
+ /// Creates an instance of [DemoPage].
+ DemoPage(this.useCase);
+
+ @override
+ _DemoPageState createState() => _DemoPageState();
+}
+
+class _DemoPageState extends State {
+ Widget _current;
+
+ @override
+ void initState() {
+ _current = Info(widget.useCase.name, widget.useCase.description);
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: Text(widget.useCase.name),
+ actions: [
+ IconButton(
+ icon: Icon(Icons.info),
+ color: _current is Info ? null : Colors.white,
+ onPressed: () {
+ setState(() {
+ _current =
+ Info(widget.useCase.name, widget.useCase.description);
+ });
+ },
+ ),
+ IconButton(
+ icon: Icon(Icons.visibility),
+ color: _current is Preview ? null : Colors.white,
+ onPressed: () {
+ setState(() {
+ _current = Preview(widget.useCase.preview);
+ });
+ },
+ ),
+ IconButton(
+ icon: Icon(Icons.code),
+ color: _current is Code ? null : Colors.white,
+ onPressed: () {
+ setState(() {
+ _current = Code(widget.useCase.codeFile);
+ });
+ },
+ ),
+ ],
+ ),
+ body: _current,
+ );
+ }
+}
diff --git a/demo/lib/demo/info.dart b/demo/lib/demo/info.dart
new file mode 100644
index 0000000..b3b9700
--- /dev/null
+++ b/demo/lib/demo/info.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+/// Class for presenting information about a use case to the user.
+class Info extends StatelessWidget {
+ /// The title of the use case.
+ final String title;
+
+ /// The description of the use case.
+ final String description;
+
+ /// Creates an instance of [Info].
+ Info(this.title, this.description);
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ children: [
+ Center(
+ child: Container(
+ margin: EdgeInsets.all(16.0),
+ child: Text(
+ title,
+ style: Theme.of(context).textTheme.headline3,
+ textAlign: TextAlign.center,
+ ),
+ ),
+ ),
+ Container(
+ margin: EdgeInsets.all(16.0),
+ child: Text(
+ description,
+ textAlign: TextAlign.center,
+ ),
+ ),
+ ],
+ );
+ }
+}
diff --git a/demo/lib/demo/preview.dart b/demo/lib/demo/preview.dart
new file mode 100644
index 0000000..6b07a34
--- /dev/null
+++ b/demo/lib/demo/preview.dart
@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+
+/// Class for showing a preview of the given use case as an actual widget.
+class Preview extends StatelessWidget {
+ /// The preview widget that is shown within the preview area.
+ final Widget preview;
+
+ /// Creates an instance of [Preview].
+ Preview(this.preview);
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ margin: EdgeInsets.all(16.0),
+ child: ClipRRect(
+ borderRadius: BorderRadius.only(
+ topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0)),
+ child: preview),
+ );
+ }
+}
diff --git a/demo/lib/main.dart b/demo/lib/main.dart
new file mode 100644
index 0000000..326f0c8
--- /dev/null
+++ b/demo/lib/main.dart
@@ -0,0 +1,66 @@
+import 'package:demo/data/theme_data.dart';
+import 'package:demo/data/use_case.dart';
+import 'package:demo/demo/demo_page.dart';
+import 'package:demo/use_cases/contextual_controls/contextual_controls_use_case.dart';
+import 'package:demo/use_cases/contextual_info/contextual_info_use_case.dart';
+import 'package:demo/use_cases/filter/filter_use_case.dart';
+import 'package:demo/use_cases/navigation/navigation_use_case.dart';
+import 'package:flutter/material.dart';
+
+void main() => runApp(DemoApp());
+
+/// Demo app that provides a show-case of different backdrop use cases.
+class DemoApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: "Backdrop Gallery",
+ theme: GalleryThemeData.darkThemeData,
+ home: HomePage(),
+ );
+ }
+}
+
+/// The home page of the demo app showing a selection of use cases.
+class HomePage extends StatelessWidget {
+ List _useCases = [
+ ContextualInfoUseCase(),
+ ContextualControlsUseCase(),
+ NavigationUseCase(),
+ FilterUseCase(),
+ ];
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ appBar: AppBar(
+ title: Text("Backdrop Gallery"),
+ ),
+ body: Column(
+ children: [
+ Container(
+ margin: EdgeInsets.all(16.0),
+ child:
+ Text("This app shows some use cases for the backdrop widget. "
+ "Open any one to show information about it, preview it and "
+ "look at its code."),
+ ),
+ ListView.separated(
+ itemCount: _useCases.length,
+ itemBuilder: (BuildContext context, int index) => ListTile(
+ title: Text(_useCases[index].name),
+ onTap: () => _openDemoPage(context, _useCases[index]),
+ ),
+ shrinkWrap: true,
+ separatorBuilder: (context, index) => Divider(),
+ ),
+ ],
+ ),
+ );
+ }
+
+ _openDemoPage(BuildContext context, UseCase useCase) {
+ Navigator.push(
+ context, MaterialPageRoute(builder: (context) => DemoPage(useCase)));
+ }
+}
diff --git a/demo/lib/use_cases/contextual_controls/contextual_controls.dart b/demo/lib/use_cases/contextual_controls/contextual_controls.dart
new file mode 100644
index 0000000..f4bec5f
--- /dev/null
+++ b/demo/lib/use_cases/contextual_controls/contextual_controls.dart
@@ -0,0 +1,233 @@
+import 'package:backdrop/backdrop.dart';
+import 'package:flutter/material.dart';
+
+/// Contextual controls preview app.
+class ContextualControls extends StatefulWidget {
+ @override
+ _ContextualControlsState createState() => _ContextualControlsState();
+}
+
+class _ContextualControlsState extends State {
+ static final _COLOR_MAP = {
+ Colors.black: "Black",
+ Colors.red: "Red",
+ Colors.green: "Green",
+ Colors.blue: "Blue"
+ };
+ static const _RAM_CHOICES = [4, 8, 16];
+
+ Color _color = _COLOR_MAP.keys.first;
+ double _resolution = 15.0;
+ int _ram = _RAM_CHOICES.first;
+
+ @override
+ Widget build(BuildContext context) {
+ return Theme(
+ data: ThemeData.light(),
+ child: BackdropScaffold(
+ appBar: BackdropAppBar(
+ title: Text("Contextual Controls Example"),
+ automaticallyImplyLeading: false,
+ ),
+ backLayer: _createBackLayer(context),
+ frontLayer: _createFrontLayer(context),
+ stickyFrontLayer: true,
+ ),
+ );
+ }
+
+ Widget _createBackLayer(BuildContext context) => ListView(
+ children: [
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text(
+ "Color",
+ ),
+ ],
+ ),
+ title: DropdownButton(
+ isExpanded: true,
+ value: _color,
+ items: _COLOR_MAP.keys.map>((Color c) {
+ return DropdownMenuItem(
+ value: c,
+ child: Text(_COLOR_MAP[c]),
+ );
+ }).toList(),
+ onChanged: (Color newValue) {
+ setState(() {
+ _color = newValue;
+ });
+ },
+ ),
+ ),
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Resolution"),
+ ],
+ ),
+ title: Slider(
+ activeColor: Colors.white,
+ inactiveColor: Colors.lightBlue,
+ value: _resolution,
+ min: 14,
+ max: 17,
+ label: "$_resolution\"",
+ divisions: 3,
+ onChanged: (value) {
+ setState(() {
+ _resolution = value;
+ });
+ })),
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("RAM"),
+ ],
+ ),
+ title: DropdownButton(
+ isExpanded: true,
+ value: _ram,
+ items: _RAM_CHOICES.map>((int r) {
+ return DropdownMenuItem(
+ value: r,
+ child: Text("${r.toString()} GB"),
+ );
+ }).toList(),
+ onChanged: (int newValue) {
+ setState(() {
+ _ram = newValue;
+ });
+ },
+ ),
+ ),
+ Builder(
+ builder: (context) => MaterialButton(
+ child: Text("Return to product page"),
+ onPressed: () => Backdrop.of(context).fling(),
+ ))
+ ],
+ shrinkWrap: true,
+ );
+
+ Widget _createFrontLayer(BuildContext context) => Container(
+ margin: EdgeInsets.all(16.0),
+ child: Column(
+ children: [
+ Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: [
+ Icon(
+ Icons.computer,
+ size: 64.0,
+ color: _color,
+ ),
+ Text(
+ "Laptop",
+ style: Theme.of(context)
+ .textTheme
+ .headline3
+ .apply(color: Colors.black),
+ ),
+ ],
+ ),
+ Container(
+ margin: EdgeInsets.all(8.0),
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: [
+ Row(
+ children: [
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star_half, color: Colors.grey),
+ ],
+ ),
+ Text(
+ "73 Reviews",
+ style: TextStyle(color: Colors.grey),
+ )
+ ],
+ ),
+ ),
+ Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text(
+ "Price",
+ style: TextStyle(color: Colors.grey),
+ ),
+ Container(
+ margin: EdgeInsets.all(8.0),
+ child: Text(
+ "\$999",
+ style: TextStyle(fontSize: 18),
+ ),
+ ),
+ ],
+ ),
+ Container(
+ margin: EdgeInsets.only(
+ top: 32.0, left: 8.0, right: 8.0, bottom: 8.0),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ mainAxisSize: MainAxisSize.max,
+ children: [
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [Text("Resolution")],
+ ),
+ Text(
+ "${_resolution.toString()}\"",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ],
+ ),
+ ),
+ Container(
+ margin: EdgeInsets.only(
+ top: 8.0, left: 8.0, right: 8.0, bottom: 32.0),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ mainAxisSize: MainAxisSize.max,
+ children: [
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [Text("RAM")],
+ ),
+ Text(
+ "${_ram.toString()} GB",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ],
+ ),
+ ),
+ Container(
+ margin: EdgeInsets.all(16.0),
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: [
+ Builder(
+ builder: (context) => RaisedButton(
+ child: Text("Configure"),
+ onPressed: () => Backdrop.of(context).fling(),
+ ),
+ )
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+}
diff --git a/demo/lib/use_cases/contextual_controls/contextual_controls_use_case.dart b/demo/lib/use_cases/contextual_controls/contextual_controls_use_case.dart
new file mode 100644
index 0000000..0075df2
--- /dev/null
+++ b/demo/lib/use_cases/contextual_controls/contextual_controls_use_case.dart
@@ -0,0 +1,16 @@
+import 'package:demo/data/use_case.dart';
+import 'package:demo/use_cases/contextual_controls/contextual_controls.dart';
+
+/// Contextual controls use case description.
+class ContextualControlsUseCase extends UseCase {
+ /// Creates a ContextualControls use case instance
+ ContextualControlsUseCase() {
+ name = "Contextual Controls";
+ description =
+ "The backdrop's back layer can be used to control the content that is being "
+ "shown on the front layer.";
+ codeFile =
+ "lib/use_cases/contextual_controls/contextual_controls.dart";
+ preview = ContextualControls();
+ }
+}
diff --git a/demo/lib/use_cases/contextual_info/contextual_info.dart b/demo/lib/use_cases/contextual_info/contextual_info.dart
new file mode 100644
index 0000000..339e391
--- /dev/null
+++ b/demo/lib/use_cases/contextual_info/contextual_info.dart
@@ -0,0 +1,177 @@
+import 'package:backdrop/backdrop.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter/rendering.dart';
+
+/// Contextual info preview app.
+class ContextualInfo extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Theme(
+ data: ThemeData.light(),
+ child: BackdropScaffold(
+ appBar: BackdropAppBar(
+ title: Text("Contextual Info Example"),
+ automaticallyImplyLeading: false,
+ ),
+ backLayer: _createBackLayer(context),
+ frontLayer: _createFrontLayer(context),
+ stickyFrontLayer: true,
+ ),
+ );
+ }
+
+ Widget _createBackLayer(BuildContext context) => ListView(
+ children: [
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text(
+ "Name",
+ ),
+ ],
+ ),
+ title: Text(
+ "Laptop Model X",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ),
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Year of production"),
+ ],
+ ),
+ title: Text(
+ "2019",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ),
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Place of Manufacture"),
+ ],
+ ),
+ title: Text(
+ "USA",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ),
+ ListTile(
+ leading: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text("Price"),
+ ],
+ ),
+ title: Text(
+ "\$999",
+ style: TextStyle(fontWeight: FontWeight.bold),
+ ),
+ ),
+ ],
+ shrinkWrap: true,
+ );
+
+ Widget _createFrontLayer(BuildContext context) => Container(
+ margin: EdgeInsets.all(16.0),
+ child: Column(
+ children: [
+ Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: [
+ Icon(
+ Icons.computer,
+ size: 64.0,
+ ),
+ Text(
+ "Laptop",
+ style: Theme.of(context)
+ .textTheme
+ .headline3
+ .apply(color: Colors.black),
+ ),
+ ],
+ ),
+ Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text(
+ "Price",
+ style: TextStyle(color: Colors.grey),
+ ),
+ Container(
+ margin: EdgeInsets.all(8.0),
+ child: Text(
+ "\$999",
+ style: TextStyle(fontSize: 18),
+ ),
+ ),
+ ],
+ ),
+ Container(
+ margin: EdgeInsets.all(8.0),
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: [
+ Row(
+ children: [
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star, color: Colors.grey),
+ Icon(Icons.star_half, color: Colors.grey),
+ ],
+ ),
+ Text(
+ "73 Reviews",
+ style: TextStyle(color: Colors.grey),
+ )
+ ],
+ ),
+ ),
+ Container(
+ margin: EdgeInsets.all(16.0),
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ children: [
+ Builder(
+ builder: (context) => RaisedButton(
+ child: Text("More about this product"),
+ onPressed: () => Backdrop.of(context).fling(),
+ ),
+ )
+ ],
+ ),
+ ),
+ ListTile(
+ title: Text("Reviews",
+ style: Theme.of(context)
+ .textTheme
+ .headline6
+ .apply(color: Colors.black)),
+ ),
+ ListTile(
+ leading: Icon(Icons.account_box),
+ title: Text("Really satisfied!"),
+ subtitle: Text("John Doe"),
+ trailing: Text("5/5"),
+ ),
+ ListTile(
+ leading: Icon(Icons.account_box),
+ title: Text("Good price!"),
+ subtitle: Text("Jane Doe"),
+ trailing: Text("4.5/5"),
+ )
+ ],
+ ),
+ );
+}
diff --git a/demo/lib/use_cases/contextual_info/contextual_info_use_case.dart b/demo/lib/use_cases/contextual_info/contextual_info_use_case.dart
new file mode 100644
index 0000000..0bdadd2
--- /dev/null
+++ b/demo/lib/use_cases/contextual_info/contextual_info_use_case.dart
@@ -0,0 +1,15 @@
+import 'package:demo/data/use_case.dart';
+import 'package:demo/use_cases/contextual_info/contextual_info.dart';
+
+/// Contextual info use case description.
+class ContextualInfoUseCase extends UseCase {
+ /// Creates a ContextualInfo use case instance
+ ContextualInfoUseCase() {
+ name = "Contextual Info";
+ description =
+ "The backdrop's back layer can be used to show contextual information "
+ "in addition to the content shown on the front layer.";
+ codeFile = "lib/use_cases/contextual_info/contextual_info.dart";
+ preview = ContextualInfo();
+ }
+}
diff --git a/demo/lib/use_cases/filter/filter.dart b/demo/lib/use_cases/filter/filter.dart
new file mode 100644
index 0000000..053f988
--- /dev/null
+++ b/demo/lib/use_cases/filter/filter.dart
@@ -0,0 +1,130 @@
+import 'package:backdrop/backdrop.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+/// Filter preview app.
+class Filter extends StatefulWidget {
+ @override
+ _FilterState createState() => _FilterState();
+}
+
+class _FilterState extends State {
+ static const List _CATEGORIES = [
+ ItemCategory.Electronics,
+ ItemCategory.Transportation
+ ];
+ static const List- _ITEMS = [
+ Item(Icons.computer, "Laptop", ItemCategory.Electronics),
+ Item(Icons.child_friendly, "Stroller", ItemCategory.Transportation),
+ Item(Icons.tv, "TV", ItemCategory.Electronics),
+ Item(Icons.smartphone, "Smartphone", ItemCategory.Electronics),
+ Item(Icons.directions_car, "Car", ItemCategory.Transportation),
+ Item(Icons.motorcycle, "Motorcycle", ItemCategory.Transportation),
+ ];
+ Set _filteredCategories =
+ Set.from([ItemCategory.Electronics, ItemCategory.Transportation]);
+ List
- _shownItems;
+
+ @override
+ void initState() {
+ _filterItems();
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Theme(
+ data: ThemeData.light(),
+ child: BackdropScaffold(
+ appBar: BackdropAppBar(
+ title: Text("Filter Example"),
+ ),
+ backLayer: _createBackLayer(),
+ subHeader: BackdropSubHeader(
+ title: Text("${_shownItems.length} Items"),
+ ),
+ frontLayer: _createFrontLayer(context),
+ stickyFrontLayer: true,
+ ),
+ );
+ }
+
+ Widget _createFrontLayer(BuildContext context) => ListView.builder(
+ itemCount: _shownItems.length,
+ itemBuilder: (context, index) => ListTile(
+ leading: Icon(_shownItems[index].icon),
+ title: Text(_shownItems[index].name),
+ ),
+ shrinkWrap: true,
+ );
+
+ Widget _createBackLayer() => Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Container(
+ padding: EdgeInsets.all(16.0),
+ child: Text(
+ "Check/uncheck categories to show/hide them on the front layer",
+ ),
+ ),
+ ListView.builder(
+ itemCount: _CATEGORIES.length,
+ itemBuilder: (context, index) => CheckboxListTile(
+ onChanged: (bool checked) =>
+ _addOrRemoveFilterCategory(checked, _CATEGORIES[index]),
+ value: _filteredCategories.contains(_CATEGORIES[index]),
+ title: Text(describeEnum(_CATEGORIES[index].toString())),
+ activeColor: Colors.white,
+ checkColor: Theme.of(context).primaryColor,
+ ),
+ shrinkWrap: true,
+ ),
+ ],
+ );
+
+ void _filterItems() {
+ setState(() {
+ _shownItems = _ITEMS
+ .where((element) => _filteredCategories.contains(element.category))
+ .toList();
+ });
+ }
+
+ void _addOrRemoveFilterCategory(bool checked, ItemCategory category) {
+ if (checked) {
+ setState(() {
+ _filteredCategories.add(category);
+ });
+ } else {
+ setState(() {
+ _filteredCategories.remove(category);
+ });
+ }
+
+ _filterItems();
+ }
+}
+
+/// Enum defining the different item categories we have.
+enum ItemCategory {
+ /// Electronics item category.
+ Electronics,
+
+ /// Transportation item category.
+ Transportation
+}
+
+/// Class representing an online shop item.
+class Item {
+ /// The icon (photo) of the item.
+ final IconData icon;
+
+ /// The name of the item.
+ final String name;
+
+ /// The category the item belongs to.
+ final ItemCategory category;
+
+ /// Creates an instance of Item with the given attributes.
+ const Item(this.icon, this.name, this.category);
+}
diff --git a/demo/lib/use_cases/filter/filter_use_case.dart b/demo/lib/use_cases/filter/filter_use_case.dart
new file mode 100644
index 0000000..d8668ad
--- /dev/null
+++ b/demo/lib/use_cases/filter/filter_use_case.dart
@@ -0,0 +1,15 @@
+import 'package:demo/data/use_case.dart';
+import 'package:demo/use_cases/filter/filter.dart';
+
+/// Filter use case description.
+class FilterUseCase extends UseCase {
+ /// Creates a Filter use case instance
+ FilterUseCase() {
+ name = "Filter";
+ description =
+ "The backdrop's back layer can be used to filter the content displayed "
+ "on the front layer.";
+ codeFile = "lib/use_cases/filter/filter.dart";
+ preview = Filter();
+ }
+}
diff --git a/demo/lib/use_cases/navigation/navigation.dart b/demo/lib/use_cases/navigation/navigation.dart
new file mode 100644
index 0000000..3e913df
--- /dev/null
+++ b/demo/lib/use_cases/navigation/navigation.dart
@@ -0,0 +1,104 @@
+import 'package:backdrop/backdrop.dart';
+import 'package:flutter/material.dart';
+
+/// Navigation preview app.
+class Navigation extends StatefulWidget {
+ @override
+ _NavigationState createState() => _NavigationState();
+}
+
+class _NavigationState extends State {
+ int _currentIndex = 0;
+ final List _pages = [HomePage(), ItemsPage()];
+
+ @override
+ Widget build(BuildContext context) {
+ return Theme(
+ data: ThemeData.light(),
+ child: BackdropScaffold(
+ appBar: BackdropAppBar(
+ title: Text("Navigation Example"),
+ ),
+ stickyFrontLayer: true,
+ frontLayer: _pages[_currentIndex],
+ backLayer: _createBackLayer(),
+ subHeader: _currentIndex == 0
+ ? null // no subHeader for home-page
+ : BackdropSubHeader(
+ title: Text("Our products"),
+ ),
+ ),
+ );
+ }
+
+ Widget _createBackLayer() => BackdropNavigationBackLayer(
+ items: [
+ ListTile(
+ title: Text(
+ "Home",
+ )),
+ ListTile(
+ title: Text(
+ "Products",
+ )),
+ ],
+ onTap: (int position) => {setState(() => _currentIndex = position)},
+ separator: Divider(),
+ );
+}
+
+/// Home page of the online shop.
+class HomePage extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ children: [
+ Center(
+ child: Container(
+ margin: EdgeInsets.all(16.0),
+ child: Text(
+ "Welcome to the online shop!",
+ style: Theme.of(context).textTheme.headline6,
+ textAlign: TextAlign.center,
+ ),
+ ),
+ ),
+ Container(
+ margin: EdgeInsets.all(16.0),
+ child: Text(
+ "Please navigate to the products page to choose your product.",
+ textAlign: TextAlign.center,
+ ),
+ ),
+ ],
+ );
+ }
+}
+
+/// Items page showing the online shop's products.
+class ItemsPage extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return ListView(
+ children: [
+ ListTile(
+ leading: Icon(Icons.computer),
+ title: Text("Laptop"),
+ ),
+ ListTile(
+ leading: Icon(Icons.child_friendly),
+ title: Text("Stroller"),
+ ),
+ ListTile(
+ leading: Icon(Icons.tv),
+ title: Text("TV"),
+ ),
+ ListTile(
+ leading: Icon(Icons.directions_car),
+ title: Text("Car"),
+ ),
+ ],
+ shrinkWrap: true,
+ );
+ }
+}
diff --git a/demo/lib/use_cases/navigation/navigation_use_case.dart b/demo/lib/use_cases/navigation/navigation_use_case.dart
new file mode 100644
index 0000000..a3f785d
--- /dev/null
+++ b/demo/lib/use_cases/navigation/navigation_use_case.dart
@@ -0,0 +1,16 @@
+import 'package:demo/data/use_case.dart';
+import 'package:demo/use_cases/navigation/navigation.dart';
+
+/// Navigation use case description.
+class NavigationUseCase extends UseCase {
+ /// Creates a Navigation use case instance
+ NavigationUseCase() {
+ name = "Navigation";
+ description =
+ "Backdrop can be used for navigating between different front layers. "
+ "The back layer shows the navigation options and upon selecting any "
+ "one, the front layer changes its content.";
+ codeFile = "lib/use_cases/navigation/navigation.dart";
+ preview = Navigation();
+ }
+}
diff --git a/demo/pubspec.yaml b/demo/pubspec.yaml
new file mode 100644
index 0000000..facc74b
--- /dev/null
+++ b/demo/pubspec.yaml
@@ -0,0 +1,88 @@
+name: demo
+description: Demo application showing the use cases of backdrop.
+
+# The following line prevents the package from being accidentally published to
+# pub.dev using `pub publish`. This is preferred for private packages.
+publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+
+# The following defines the version and build number for your application.
+# A version number is three numbers separated by dots, like 1.2.43
+# followed by an optional build number separated by a +.
+# Both the version and the builder number may be overridden in flutter
+# build by specifying --build-name and --build-number, respectively.
+# In Android, build-name is used as versionName while build-number used as versionCode.
+# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
+# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
+# Read more about iOS versioning at
+# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
+version: 1.0.0+1
+
+environment:
+ sdk: ">=2.7.0 <3.0.0"
+
+dependencies:
+ flutter:
+ sdk: flutter
+
+ # The following adds the Cupertino Icons font to your application.
+ # Use with the CupertinoIcons class for iOS style icons.
+ cupertino_icons: ^0.1.3
+ google_fonts: ^1.1.0
+ flutter_highlight: ^0.6.0
+ # Add backdrop dependency here
+ backdrop:
+ path: "../"
+
+dev_dependencies:
+ flutter_test:
+ sdk: flutter
+ flutter_launcher_icons: "^0.7.3"
+
+flutter_icons:
+ android: false
+ ios: true
+ image_path: "assets/icon.png"
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter.
+flutter:
+
+ # The following line ensures that the Material Icons font is
+ # included with your application, so that you can use the icons in
+ # the material Icons class.
+ uses-material-design: true
+
+ # To add assets to your application, add an assets section, like this:
+ assets:
+ - lib/use_cases/navigation/navigation.dart
+ - lib/use_cases/contextual_info/contextual_info.dart
+ - lib/use_cases/contextual_controls/contextual_controls.dart
+ - lib/use_cases/filter/filter.dart
+
+ # An image asset can refer to one or more resolution-specific "variants", see
+ # https://flutter.dev/assets-and-images/#resolution-aware.
+
+ # For details regarding adding assets from package dependencies, see
+ # https://flutter.dev/assets-and-images/#from-packages
+
+ # To add custom fonts to your application, add a fonts section here,
+ # in this "flutter" section. Each entry in this list should have a
+ # "family" key with the font family name, and a "fonts" key with a
+ # list giving the asset and other descriptors for the font. For
+ # example:
+ # fonts:
+ # - family: Schyler
+ # fonts:
+ # - asset: fonts/Schyler-Regular.ttf
+ # - asset: fonts/Schyler-Italic.ttf
+ # style: italic
+ # - family: Trajan Pro
+ # fonts:
+ # - asset: fonts/TrajanPro.ttf
+ # - asset: fonts/TrajanPro_Bold.ttf
+ # weight: 700
+ #
+ # For details regarding fonts from package dependencies,
+ # see https://flutter.dev/custom-fonts/#from-packages
diff --git a/demo/test/widget_test.dart b/demo/test/widget_test.dart
new file mode 100644
index 0000000..ba39bc6
--- /dev/null
+++ b/demo/test/widget_test.dart
@@ -0,0 +1,30 @@
+// This is a basic Flutter widget test.
+//
+// To perform an interaction with a widget in your test, use the WidgetTester
+// utility that Flutter provides. For example, you can send tap and scroll
+// gestures. You can also use WidgetTester to find child widgets in the widget
+// tree, read text, and verify that the values of widget properties are correct.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:demo/main.dart';
+
+void main() {
+ testWidgets('Counter increments smoke test', (WidgetTester tester) async {
+ // Build our app and trigger a frame.
+ await tester.pumpWidget(DemoApp());
+
+ // Verify that our counter starts at 0.
+ expect(find.text('0'), findsOneWidget);
+ expect(find.text('1'), findsNothing);
+
+ // Tap the '+' icon and trigger a frame.
+ await tester.tap(find.byIcon(Icons.add));
+ await tester.pump();
+
+ // Verify that our counter has incremented.
+ expect(find.text('0'), findsNothing);
+ expect(find.text('1'), findsOneWidget);
+ });
+}
diff --git a/demo/web/icons/Icon-192.png b/demo/web/icons/Icon-192.png
new file mode 100644
index 0000000..e8a81bb
Binary files /dev/null and b/demo/web/icons/Icon-192.png differ
diff --git a/demo/web/icons/Icon-512.png b/demo/web/icons/Icon-512.png
new file mode 100644
index 0000000..209f15b
Binary files /dev/null and b/demo/web/icons/Icon-512.png differ
diff --git a/demo/web/icons/favicon.png b/demo/web/icons/favicon.png
new file mode 100644
index 0000000..b7587df
Binary files /dev/null and b/demo/web/icons/favicon.png differ
diff --git a/demo/web/index.html b/demo/web/index.html
new file mode 100644
index 0000000..c3f7b64
--- /dev/null
+++ b/demo/web/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ demo
+
+
+
+
+
+
+
+
diff --git a/demo/web/manifest.json b/demo/web/manifest.json
new file mode 100644
index 0000000..e3b4330
--- /dev/null
+++ b/demo/web/manifest.json
@@ -0,0 +1,23 @@
+{
+ "name": "Backdrop Demo",
+ "short_name": "Backdrop",
+ "start_url": ".",
+ "display": "standalone",
+ "background_color": "#4D1F7C",
+ "theme_color": "#4D1F7C",
+ "description": "Demo application showing the use cases of backdrop.",
+ "orientation": "portrait-primary",
+ "prefer_related_applications": false,
+ "icons": [
+ {
+ "src": "icons/Icon-192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "icons/Icon-512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ]
+}
diff --git a/lib/app_bar.dart b/lib/app_bar.dart
index b4e8fd3..9aba031 100644
--- a/lib/app_bar.dart
+++ b/lib/app_bar.dart
@@ -162,6 +162,7 @@ class BackdropAppBar extends StatelessWidget implements PreferredSizeWidget {
return AppBar(
leading: leading ??
(automaticallyImplyLeading ? BackdropToggleButton() : null),
+ automaticallyImplyLeading: automaticallyImplyLeading,
title: title,
actions: actions,
flexibleSpace: flexibleSpace,
diff --git a/lib/scaffold.dart b/lib/scaffold.dart
index 42d38d5..8927eea 100644
--- a/lib/scaffold.dart
+++ b/lib/scaffold.dart
@@ -261,6 +261,16 @@ class BackdropScaffoldState extends State
_headerHeight = _getHeaderHeight();
});
});
+
+ _controller.addStatusListener((status) {
+ setState(() {
+ // This is intentionally left empty. The state change itself takes
+ // place inside the AnimationController, so there's nothing to update.
+ // All we want is for the widget to rebuild and read the new animation
+ // state from the AnimationController.
+ // see https://github.com/flutter/flutter/pull/55414/commits/72d7d365be6639271a5e88ee3043b92833facb79
+ });
+ });
}
@override