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 503 additions and 381 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(
child: Center(
child: Hero(
tag: 'image',
child: Image.asset('assets/demo_image.jpeg'),
)),
),
bottomNavigationBar: bottomAppBar(context));
}
final baseTextStyle = CupertinoTheme.of(context).textTheme.textStyle;
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,
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'),
),
),
),
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>[
... ... @@ -76,182 +98,250 @@ class PhotoShareBottomSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
child: Material(
color: Colors.transparent,
child: Scaffold(
backgroundColor: CupertinoTheme.of(context)
.scaffoldBackgroundColor
.withOpacity(0.95),
extendBodyBehindAppBar: true,
appBar: appBar(context),
body: CustomScrollView(
physics: ClampingScrollPhysics(),
controller: ModalScrollController.of(context),
slivers: <Widget>[
SliverSafeArea(
bottom: false,
sliver: SliverToBoxAdapter(
child: Container(
height: 318,
child: ListView(
padding: EdgeInsets.all(12).copyWith(
right:
MediaQuery.of(context).size.width / 2 - 100),
reverse: true,
scrollDirection: Axis.horizontal,
physics: PageScrollPhysics(),
filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
child: Material(
color: Colors.transparent,
child: Scaffold(
backgroundColor: CupertinoTheme.of(context).scaffoldBackgroundColor,
extendBodyBehindAppBar: true,
appBar: appBar(context),
body: CustomScrollView(
physics: ClampingScrollPhysics(),
controller: ModalScrollController.of(context),
slivers: <Widget>[
SliverSafeArea(
bottom: false,
sliver: SliverToBoxAdapter(
child: Container(
height: 318,
child: ListView(
padding: EdgeInsets.all(12).copyWith(
right: MediaQuery.of(context).size.width / 2 - 100),
reverse: true,
scrollDirection: Axis.horizontal,
physics: PageScrollPhysics(),
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Hero(
tag: 'image',
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'),
),
),
],
),
),
),
),
SliverToBoxAdapter(
child: Divider(height: 1),
),
sliverContactsSection(context),
SliverToBoxAdapter(
child: Divider(height: 1),
),
SliverToBoxAdapter(
child: Container(
height: 120,
padding: EdgeInsets.only(top: 12),
child: ListView.builder(
padding: EdgeInsets.all(10),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final app = apps[index];
return Container(
width: 72,
margin: EdgeInsets.symmetric(horizontal: 4),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Hero(
tag: 'image',
child:
Image.asset('assets/demo_image.jpeg'),
))),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
if (app.imageUrl != null)
Material(
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'),
)),
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(app.imageUrl!),
fit: BoxFit.cover),
color: Colors.white,
borderRadius:
BorderRadius.circular(15)),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 12,
shadowColor: Colors.black12,
),
SizedBox(height: 8),
Text(
app.title,
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 11),
)
],
),
);
},
itemCount: apps.length,
),
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(
actions.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
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),
),
),
),
SliverToBoxAdapter(
child: Divider(height: 1),
),
sliverContactsSection(context),
SliverToBoxAdapter(
child: Divider(height: 1),
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(
actions1.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
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),
),
),
),
SliverToBoxAdapter(
child: Container(
height: 120,
padding: EdgeInsets.only(top: 12),
child: ListView.builder(
padding: EdgeInsets.all(10),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final app = apps[index];
return Container(
width: 72,
margin: EdgeInsets.symmetric(horizontal: 4),
child: Column(
children: <Widget>[
if (app.imageUrl != null)
Material(
child: ClipRRect(
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage(app.imageUrl!),
fit: BoxFit.cover),
color: Colors.white,
borderRadius:
BorderRadius.circular(15)),
),
),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(15)),
elevation: 12,
shadowColor: Colors.black12,
),
SizedBox(height: 8),
Text(
app.title,
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 11),
)
],
));
},
itemCount: apps.length,
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 4),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
List<Widget>.from(
actions2.map(
(action) => Container(
padding: EdgeInsets.symmetric(
vertical: 16, horizontal: 16),
child: Text(
action.title,
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),
),
),
),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
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(
height: 1,
))),
)),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 6),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
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(
height: 1,
))),
)),
SliverPadding(
padding:
EdgeInsets.symmetric(horizontal: 18, vertical: 4),
sliver: SliverList(
delegate: SliverChildListDelegate.fixed(
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(
height: 1,
))),
)),
SliverSafeArea(
top: false,
sliver: SliverPadding(
padding: EdgeInsets.only(
bottom: 20,
)),
)
],
),
),
)));
SliverSafeArea(
top: false,
sliver: SliverPadding(
padding: EdgeInsets.only(
bottom: 20,
),
),
)
],
),
),
),
);
}
Widget sliverContactsSection(BuildContext context) {
... ... @@ -317,28 +407,29 @@ class PhotoShareBottomSheet extends StatelessWidget {
children: <Widget>[
SizedBox(width: 18),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.asset(
'assets/demo_image.jpeg',
fit: BoxFit.cover,
height: 40,
width: 40,
)),
borderRadius: BorderRadius.circular(4),
child: Image.asset(
'assets/demo_image.jpeg',
fit: BoxFit.cover,
height: 40,
width: 40,
),
),
SizedBox(width: 12),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'1 Photo selected',
style: CupertinoTheme.of(context)
.textTheme
.textStyle
.copyWith(fontWeight: FontWeight.w600),
),
SizedBox(height: 4),
Row(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'1 Photo selected',
style: CupertinoTheme.of(context)
.textTheme
.textStyle
.copyWith(fontWeight: FontWeight.w600),
),
SizedBox(height: 4),
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: <Widget>[
... ... @@ -348,8 +439,9 @@ class PhotoShareBottomSheet extends StatelessWidget {
.textTheme
.actionTextStyle
.copyWith(
fontSize: 14,
fontWeight: FontWeight.normal),
fontSize: 14,
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,9 +24,16 @@ 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: child!,
child: CupertinoTheme(
data: CupertinoThemeData(
brightness: Theme.of(context).brightness,
scaffoldBackgroundColor: CupertinoColors.systemBackground,
),
child: child!,
),
),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
... ... @@ -36,47 +43,48 @@ class MyApp extends StatelessWidget {
settings: settings);
}
return MaterialPageRoute(
builder: (context) => Scaffold(
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(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => Stack(
children: <Widget>[
ModalWithScroll(),
Positioned(
height: 40,
left: 40,
right: 40,
bottom: 20,
child: MaterialButton(
onPressed: () => Navigator.of(
context)
.popUntil((route) =>
route.settings.name == '/'),
child: Text('Pop back home'),
),
)
],
),
)),
builder: (context) => Scaffold(
body: CupertinoScaffold(
body: Builder(
builder: (context) => CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: Text('Normal Navigation Presentation'),
trailing: GestureDetector(
child: Icon(Icons.arrow_upward),
onTap: () =>
CupertinoScaffold.showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => Stack(
children: <Widget>[
ModalWithScroll(),
Positioned(
height: 40,
left: 40,
right: 40,
bottom: 20,
child: MaterialButton(
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'),
... ... @@ -123,43 +130,48 @@ class _MyHomePageState extends State<MyHomePage> {
builder: (context) => CupertinoSharePage()))),
section('STYLES'),
ListTile(
title: Text('Material fit'),
onTap: () => showMaterialModalBottomSheet(
expand: false,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
)),
title: Text('Material fit'),
onTap: () => showMaterialModalBottomSheet(
expand: false,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
),
),
ListTile(
title: Text('Bar Modal'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
title: Text('Bar Modal'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
),
),
ListTile(
title: Text('Avatar Modal'),
onTap: () => showAvatarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
title: Text('Avatar Modal'),
onTap: () => showAvatarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
),
),
ListTile(
title: Text('Float Modal'),
onTap: () => showFloatingModalBottomSheet(
context: context,
builder: (context) => ModalFit(),
)),
title: Text('Float Modal'),
onTap: () => showFloatingModalBottomSheet(
context: context,
builder: (context) => ModalFit(),
),
),
ListTile(
title: Text('Cupertino Modal fit'),
onTap: () => showCupertinoModalBottomSheet(
expand: false,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
)),
title: Text('Cupertino Modal fit'),
onTap: () => showCupertinoModalBottomSheet(
expand: false,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalFit(),
),
),
section('COMPLEX CASES'),
ListTile(
title: Text('Cupertino Small Modal forced to expand'),
... ... @@ -170,22 +182,23 @@ class _MyHomePageState extends State<MyHomePage> {
builder: (context) => ModalFit(),
)),
ListTile(
title: Text('Reverse list'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) =>
ModalInsideModal(reverse: true),
)),
title: Text('Reverse list'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(reverse: true),
),
),
ListTile(
title: Text('Cupertino Modal inside modal'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
)),
title: Text('Cupertino Modal inside modal'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalInsideModal(),
),
),
ListTile(
title: Text('Cupertino Modal with inside navigation'),
onTap: () => showCupertinoModalBottomSheet(
... ... @@ -195,36 +208,40 @@ class _MyHomePageState extends State<MyHomePage> {
builder: (context) => ModalWithNavigator(),
)),
ListTile(
title:
Text('Cupertino Navigator + Scroll + WillPopScope'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ComplexModal(),
)),
title:
Text('Cupertino Navigator + Scroll + WillPopScope'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ComplexModal(),
),
),
ListTile(
title: Text('Modal with WillPopScope'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalWillScope(),
)),
title: Text('Modal with WillPopScope'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context) => ModalWillScope(),
),
),
ListTile(
title: Text('Modal with Nested Scroll'),
onTap: () => showCupertinoModalBottomSheet(
expand: true,
context: context,
builder: (context) => NestedScrollModal(),
)),
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(),
)),
title: Text('Modal with PageView'),
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
builder: (context) => ModalWithPageView(),
),
),
SizedBox(
height: 60,
)
... ... @@ -240,10 +257,11 @@ class _MyHomePageState extends State<MyHomePage> {
Widget section(String title) {
return Padding(
padding: EdgeInsets.fromLTRB(16, 20, 16, 8),
child: Text(
title,
style: Theme.of(context).textTheme.caption,
));
padding: EdgeInsets.fromLTRB(16, 20, 16, 8),
child: Text(
title,
style: Theme.of(context).textTheme.caption,
),
);
}
}
... ...
... ... @@ -17,52 +17,59 @@ class AvatarBottomSheet extends StatelessWidget {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 12),
SafeArea(
bottom: false,
child: AnimatedBuilder(
animation: animation,
builder: (context, child) => Transform.translate(
offset: Offset(0, (1 - animation.value) * 100),
child: Opacity(
child: child,
opacity: max(0, animation.value * 2 - 1))),
child: Row(
children: <Widget>[
SizedBox(width: 20),
CircleAvatar(
child: Text('JB'),
radius: 32,
),
],
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 12),
SafeArea(
bottom: false,
child: AnimatedBuilder(
animation: animation,
builder: (context, child) => Transform.translate(
offset: Offset(0, (1 - animation.value) * 100),
child: Opacity(
child: child, opacity: max(0, animation.value * 2 - 1))),
child: Row(
children: <Widget>[
SizedBox(width: 20),
CircleAvatar(
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)),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
boxShadow: [
BoxShadow(
blurRadius: 10,
color: Colors.black12,
spreadRadius: 5)
]),
width: double.infinity,
child: MediaQuery.removePadding(
context: context, removeTop: true, child: child)),
],
),
),
]),
),
SizedBox(height: 12),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15), topRight: Radius.circular(15)),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor,
boxShadow: [
BoxShadow(
blurRadius: 10,
color: Colors.black12,
spreadRadius: 5,
),
],
),
width: double.infinity,
child: MediaQuery.removePadding(
context: context, removeTop: true, child: child),
),
),
),
],
),
);
}
}
... ...