flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
Jaime Blasco
Committed by GitHub
8ec96679 2 parents a63a1d89 094a626b

Merge pull request #232 from bierbaumtim/example-darkmode 

Darkmode support for example
Inline Side-by-side
Showing 6 changed files with 234 additions and 112 deletions
... ... @@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android {
compileSdkVersion 30
compileSdkVersion 31
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
... ... @@ -36,7 +36,7 @@ android {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.example"
minSdkVersion 16
targetSdkVersion 30
targetSdkVersion 31
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
... ...
... ... @@ -9,7 +9,8 @@
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
android:windowSoftInputMode="adjustResize"
android:exported="true">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
... ...
buildscript {
ext.kotlin_version = '1.3.50'
ext.kotlin_version = '1.6.10'
repositories {
google()
jcenter()
... ...
... ... @@ -7,38 +7,60 @@ import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
class CupertinoSharePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: appBar(context),
body: CupertinoPageScaffold(
final baseTextStyle = CupertinoTheme.of(context).textTheme.textStyle;
return CupertinoPageScaffold(
backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
navigationBar: CupertinoNavigationBar(
backgroundColor: CupertinoTheme.of(context).barBackgroundColor,
middle: Column(
children: <Widget>[
Text(
'New York',
style: baseTextStyle,
),
Text(
'1 February 11:45',
style: baseTextStyle.copyWith(
fontWeight: FontWeight.normal,
fontSize: 12,
),
),
],
),
trailing: CupertinoButton(
child: Text('Edit'),
padding: EdgeInsets.zero,
onPressed: () {},
),
),
child: Column(
children: [
Expanded(
child: Center(
child: Hero(
tag: 'image',
child: Image.asset('assets/demo_image.jpeg'),
)),
),
bottomNavigationBar: bottomAppBar(context));
}
PreferredSizeWidget appBar(BuildContext context) {
return CupertinoNavigationBar(
middle: Column(
children: <Widget>[
Text('New York', style: TextStyle(fontWeight: FontWeight.normal)),
Text('1 February 11:45',
style: TextStyle(fontWeight: FontWeight.normal, fontSize: 12))
],
),
trailing: Text(
'Edit',
style: TextStyle(
color: CupertinoTheme.of(context).primaryColor,
),
bottomAppBar(context),
],
),
);
}
Widget bottomAppBar(BuildContext context) {
return BottomAppBar(
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 0.5,
color: CupertinoColors.separator.resolveFrom(context),
),
),
color: CupertinoTheme.of(context).barBackgroundColor,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
... ... @@ -80,9 +102,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
child: Material(
color: Colors.transparent,
child: Scaffold(
backgroundColor: CupertinoTheme.of(context)
.scaffoldBackgroundColor
.withOpacity(0.95),
backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
extendBodyBehindAppBar: true,
appBar: appBar(context),
body: CustomScrollView(
... ... @@ -96,8 +116,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
height: 318,
child: ListView(
padding: EdgeInsets.all(12).copyWith(
right:
MediaQuery.of(context).size.width / 2 - 100),
right: MediaQuery.of(context).size.width / 2 - 100),
reverse: true,
scrollDirection: Axis.horizontal,
physics: PageScrollPhysics(),
... ... @@ -108,21 +127,24 @@ class PhotoShareBottomSheet extends StatelessWidget {
borderRadius: BorderRadius.circular(12),
child: Hero(
tag: 'image',
child:
Image.asset('assets/demo_image.jpeg'),
))),
child: Image.asset('assets/demo_image.jpeg'),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.asset('assets/demo_image.jpeg'),
)),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.asset('assets/demo_image.jpeg'),
)),
),
),
],
),
),
... ... @@ -157,8 +179,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
width: 60,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage(app.imageUrl!),
image: AssetImage(app.imageUrl!),
fit: BoxFit.cover),
color: Colors.white,
borderRadius:
... ... @@ -166,8 +187,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
),
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(15)),
borderRadius: BorderRadius.circular(15),
),
elevation: 12,
shadowColor: Colors.black12,
),
... ... @@ -179,79 +200,148 @@ class PhotoShareBottomSheet extends StatelessWidget {
style: TextStyle(fontSize: 11),
)
],
));
),
);
},
itemCount: apps.length,
),
),
),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 6),
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(actions.map(
List<Widget>.from(
actions.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
style: CupertinoTheme.of(context)
.textTheme
.textStyle,
)),
)).addItemInBetween(Divider(
style:
CupertinoTheme.of(context).textTheme.textStyle,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: CupertinoColors
.tertiarySystemGroupedBackground
.resolveFrom(context),
),
),
),
).addItemInBetween(
Container(
width: double.infinity,
height: 1,
))),
)),
color: CupertinoColors.separator.resolveFrom(context),
),
),
),
),
),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 6),
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(actions1.map(
List<Widget>.from(
actions1.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
style: CupertinoTheme.of(context)
.textTheme
.textStyle,
)),
)).addItemInBetween(Divider(
style:
CupertinoTheme.of(context).textTheme.textStyle,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: action == actions1.first
? Radius.circular(8)
: Radius.zero,
topRight: action == actions1.first
? Radius.circular(8)
: Radius.zero,
bottomLeft: action == actions1.last
? Radius.circular(8)
: Radius.zero,
bottomRight: action == actions1.last
? Radius.circular(8)
: Radius.zero,
),
color: CupertinoColors
.tertiarySystemGroupedBackground
.resolveFrom(context),
),
),
),
).addItemInBetween(
Container(
width: double.infinity,
height: 1,
))),
)),
color: CupertinoColors.separator.resolveFrom(context),
),
),
),
),
),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 4),
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 4),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(actions2.map(
List<Widget>.from(
actions2.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
style: CupertinoTheme.of(context)
.textTheme
.textStyle,
)),
)).addItemInBetween(Divider(
style:
CupertinoTheme.of(context).textTheme.textStyle,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: action == actions2.first
? Radius.circular(8)
: Radius.zero,
topRight: action == actions2.first
? Radius.circular(8)
: Radius.zero,
bottomLeft: action == actions2.last
? Radius.circular(8)
: Radius.zero,
bottomRight: action == actions2.last
? Radius.circular(8)
: Radius.zero,
),
color: CupertinoColors
.tertiarySystemGroupedBackground
.resolveFrom(context),
),
),
),
).addItemInBetween(
Container(
width: double.infinity,
height: 1,
))),
)),
color: CupertinoColors.separator.resolveFrom(context),
),
),
),
),
),
SliverSafeArea(
top: false,
sliver: SliverPadding(
padding: EdgeInsets.only(
bottom: 20,
)),
),
),
)
],
),
)));
),
),
);
}
Widget sliverContactsSection(BuildContext context) {
... ... @@ -323,7 +413,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
fit: BoxFit.cover,
height: 40,
width: 40,
)),
),
),
SizedBox(width: 12),
Expanded(
child: Column(
... ... @@ -349,7 +440,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
.actionTextStyle
.copyWith(
fontSize: 14,
fontWeight: FontWeight.normal),
fontWeight: FontWeight.normal,
),
),
SizedBox(width: 2),
Icon(
... ... @@ -358,9 +450,11 @@ class PhotoShareBottomSheet extends StatelessWidget {
color:
CupertinoTheme.of(context).primaryColor,
)
]),
],
)),
),
],
),
),
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Align(
... ... @@ -369,13 +463,15 @@ class PhotoShareBottomSheet extends StatelessWidget {
margin: EdgeInsets.only(top: 14),
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.1),
color: CupertinoColors.secondarySystemFill
.resolveFrom(context),
shape: BoxShape.circle,
),
child: Icon(
Icons.close,
size: 24,
color: Colors.black54,
color: CupertinoColors.systemFill
.resolveFrom(context),
),
),
),
... ...
... ... @@ -24,10 +24,17 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(platform: TargetPlatform.iOS),
darkTheme: ThemeData.dark().copyWith(platform: TargetPlatform.iOS),
title: 'BottomSheet Modals',
builder: (context, Widget? child) => WebFrame(
child: CupertinoTheme(
data: CupertinoThemeData(
brightness: Theme.of(context).brightness,
scaffoldBackgroundColor: CupertinoColors.systemBackground,
),
child: child!,
),
),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
... ... @@ -40,14 +47,13 @@ class MyApp extends StatelessWidget {
body: CupertinoScaffold(
body: Builder(
builder: (context) => CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: Text('Normal Navigation Presentation'),
trailing: GestureDetector(
child: Icon(Icons.arrow_upward),
onTap: () => CupertinoScaffold
.showCupertinoModalBottomSheet(
onTap: () =>
CupertinoScaffold.showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
... ... @@ -60,23 +66,25 @@ class MyApp extends StatelessWidget {
right: 40,
bottom: 20,
child: MaterialButton(
onPressed: () => Navigator.of(
context)
.popUntil((route) =>
route.settings.name == '/'),
onPressed: () => Navigator.of(context).popUntil(
(route) => route.settings.name == '/'),
child: Text('Pop back home'),
),
)
],
),
)),
),
child: Center(child: Container()),
),
),
child: Center(
child: Container(),
),
),
settings: settings);
),
),
),
settings: settings,
);
},
debugShowCheckedModeBanner: false,
);
... ... @@ -98,7 +106,6 @@ class _MyHomePageState extends State<MyHomePage> {
return Material(
child: Scaffold(
body: CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: Text('iOS13 Modal Presentation'),
... ... @@ -129,7 +136,8 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
)),
),
),
ListTile(
title: Text('Bar Modal'),
onTap: () => showBarModalBottomSheet(
... ... @@ -137,7 +145,8 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
),
),
ListTile(
title: Text('Avatar Modal'),
onTap: () => showAvatarModalBottomSheet(
... ... @@ -145,13 +154,15 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
),
),
ListTile(
title: Text('Float Modal'),
onTap: () => showFloatingModalBottomSheet(
context: context,
builder: (context) => ModalFit(),
)),
),
),
ListTile(
title: Text('Cupertino Modal fit'),
onTap: () => showCupertinoModalBottomSheet(
... ... @@ -159,7 +170,8 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
)),
),
),
section('COMPLEX CASES'),
ListTile(
title: Text('Cupertino Small Modal forced to expand'),
... ... @@ -175,9 +187,9 @@ class _MyHomePageState extends State<MyHomePage> {
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) =>
ModalInsideModal(reverse: true),
)),
builder: (context) => ModalInsideModal(reverse: true),
),
),
ListTile(
title: Text('Cupertino Modal inside modal'),
onTap: () => showCupertinoModalBottomSheet(
... ... @@ -185,7 +197,8 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
),
),
ListTile(
title: Text('Cupertino Modal with inside navigation'),
onTap: () => showCupertinoModalBottomSheet(
... ... @@ -202,7 +215,8 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ComplexModal(),
)),
),
),
ListTile(
title: Text('Modal with WillPopScope'),
onTap: () => showCupertinoModalBottomSheet(
... ... @@ -210,21 +224,24 @@ class _MyHomePageState extends State<MyHomePage> {
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalWillScope(),
)),
),
),
ListTile(
title: Text('Modal with Nested Scroll'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
builder: (context) => NestedScrollModal(),
)),
),
),
ListTile(
title: Text('Modal with PageView'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
builder: (context) => ModalWithPageView(),
)),
),
),
SizedBox(
height: 60,
)
... ... @@ -244,6 +261,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: Text(
title,
style: Theme.of(context).textTheme.caption,
));
),
);
}
}
... ...
... ... @@ -28,26 +28,29 @@ class AvatarBottomSheet extends StatelessWidget {
builder: (context, child) => Transform.translate(
offset: Offset(0, (1 - animation.value) * 100),
child: Opacity(
child: child,
opacity: max(0, animation.value * 2 - 1))),
child: child, opacity: max(0, animation.value * 2 - 1))),
child: Row(
children: <Widget>[
SizedBox(width: 20),
CircleAvatar(
child: Text('JB'),
child: Text(
'JB',
style: TextStyle(color: Colors.black),
),
radius: 32,
backgroundColor: Colors.blueAccent,
),
],
),
)),
),
),
SizedBox(height: 12),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15)),
topLeft: Radius.circular(15), topRight: Radius.circular(15)),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
... ... @@ -55,14 +58,18 @@ class AvatarBottomSheet extends StatelessWidget {
BoxShadow(
blurRadius: 10,
color: Colors.black12,
spreadRadius: 5)
]),
spreadRadius: 5,
),
],
),
width: double.infinity,
child: MediaQuery.removePadding(
context: context, removeTop: true, child: child)),
context: context, removeTop: true, child: child),
),
),
),
]),
],
),
);
}
}
... ...