Skip to content

BackdropAppBar #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daadu merged 10 commits into from
May 27, 2020
Merged

BackdropAppBar #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
de81b31
Implemented BackdropAppBar
WieFel May 23, 2020
7e8e82d
Adapted example app to use BackdropAppBar
WieFel May 23, 2020
6ad9b71
Adapted documentation examples to use new BackdropAppBar
WieFel May 23, 2020
54281ce
Updated readme examples
WieFel May 23, 2020
09a35d8
Changed order of properties, moved appBar up
WieFel May 23, 2020
e0372dd
Adapted documentation
WieFel May 23, 2020
14e61fe
Added title, actions, iconPosition again for backwards compatibility
WieFel May 27, 2020
eb1cf08
Moved @Deprecated of properties inside constructor.
WieFel May 27, 2020
5c7f6c1
Small spelling correction
WieFel May 27, 2020
f30fa66
Correction in deprecated message
WieFel May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 35 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,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">
Expand All @@ -54,33 +60,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)},
),
),
);
}
```

Expand Down
15 changes: 8 additions & 7 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
],
),
);
}
Expand Down
15 changes: 8 additions & 7 deletions example/lib/navigation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
Loading