Fabio/aves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

poc: floating app bar & translucent nav bar

Browse source
This commit is contained in:
Thibault Deckers 2019-07-20 21:09:56 +09:00
parent 48d30cfa20
commit 1313d0c845
7 changed files with 64 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
android/app/src/main/AndroidManifest.xml
View file

@ -10,17 +10,13 @@
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:theme="@style/AppTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- This keeps the window background of the activity showing
until Flutter renders its first frame. It can be removed if
there is no splash screen (such as the default splash screen
defined in @style/LaunchTheme). -->
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
android:value="false" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>

4
android/app/src/main/res/values-land/flags.xml Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<bool name="translucentNavBar">false</bool>
</resources>

4
android/app/src/main/res/values/flags.xml Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<bool name="translucentNavBar">true</bool>
</resources>

6
android/app/src/main/res/values/styles.xml
View file

@ -1,8 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<style name="AppTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowTranslucentNavigation">@bool/translucentNavBar</item> <!-- API19+, tinted background & request the SYSTEM_UI_FLAG_LAYOUT_STABLE and SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN flags -->
</style>
</resources>

11
lib/common/fake_app_bar.dart Normal file
View file

@ -0,0 +1,11 @@
import 'package:flutter/widgets.dart';
class FakeAppBar extends StatelessWidget with PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return SafeArea(child: SizedBox.shrink());
}
@override
Size get preferredSize => Size.zero;
}

31
lib/main.dart
View file

@ -1,3 +1,4 @@
import 'package:aves/common/fake_app_bar.dart';
import 'package:aves/model/image_fetcher.dart';
import 'package:aves/thumbnail_collection.dart';
import 'package:flutter/material.dart';
@ -14,18 +15,14 @@ class MyApp extends StatelessWidget {
title: 'Aves',
theme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blue,
accentColor: Colors.amberAccent,
),
home: HomePage(title: 'Home'),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_HomePageState createState() => _HomePageState();
}
@ -47,15 +44,21 @@ class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
debugPrint('MediaQuery.of(context).viewInsets.bottom=${MediaQuery.of(context).viewInsets.bottom}');
return MediaQuery.removeViewInsets(
context: context,
// remove bottom view insets to paint underneath the translucent navigation bar
removeBottom: true,
child: Scaffold(
// fake app bar so that content is safe from status bar, even though we use a SliverAppBar
appBar: FakeAppBar(),
body: imageEntryList == null
? Center(
child: CircularProgressIndicator(),
)
: ThumbnailCollection(imageEntryList),
),
body: imageEntryList == null
? Center(
child: CircularProgressIndicator(),
)
: ThumbnailCollection(imageEntryList),
);
}
}

44
lib/thumbnail_collection.dart
View file

@ -42,27 +42,31 @@ class ThumbnailCollection extends StatelessWidget {
controller: scrollController,
child: CustomScrollView(
controller: scrollController,
slivers: sections.keys
.map((sectionKey) => SliverStickyHeader(
header: SectionHeader(sectionKey),
sliver: SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) {
var entries = sections[sectionKey];
if (index >= entries.length) return null;
return Thumbnail(
entry: entries[index],
extent: extent,
);
},
childCount: sections[sectionKey].length,
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columnCount,
),
slivers: [
SliverAppBar(
title: Text('Aves - All'),
floating: true,
),
...sections.keys.map((sectionKey) => SliverStickyHeader(
header: SectionHeader(sectionKey),
sliver: SliverGrid(
delegate: SliverChildBuilderDelegate(
(context, index) {
var entries = sections[sectionKey];
if (index >= entries.length) return null;
return Thumbnail(
entry: entries[index],
extent: extent,
);
},
childCount: sections[sectionKey].length,
),
))
.toList(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columnCount,
),
),
))
],
),
);
}