flutter_package / modal_bottom_sheet

Go to a project
Toggle navigation Toggle navigation pinning
Jaime Blasco
d125f1ce 1 parent ce4f8f11

Update examples to work on web, save assets offline

Inline Side-by-side
Showing 22 changed files with 265 additions and 61 deletions
... ... @@ -14,11 +14,10 @@ class CupertinoSharePage extends StatelessWidget {
appBar: appBar(context),
body: CupertinoPageScaffold(
child: Center(
child: Hero(
tag: 'image',
child: Image.network(
'https://images.unsplash.com/photo-1586042062881-03688ce69774')),
),
child: Hero(
tag: 'image',
child: Image.asset('assets/demo_image.jpeg'),
)),
),
bottomNavigationBar: bottomAppBar(context));
}
... ... @@ -116,22 +115,20 @@ class PhotoShareBottomSheet extends StatelessWidget {
borderRadius: BorderRadius.circular(12),
child: Hero(
tag: 'image',
child: Image.network(
'https://images.unsplash.com/photo-1586042062881-03688ce69774'),
child:
Image.asset('assets/demo_image.jpeg'),
))),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
'https://images.unsplash.com/photo-1586042062881-03688ce69774'),
child: Image.asset('assets/demo_image.jpeg'),
)),
Padding(
padding: EdgeInsets.symmetric(horizontal: 6),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
'https://images.unsplash.com/photo-1586042062881-03688ce69774'),
child: Image.asset('assets/demo_image.jpeg'),
)),
],
),
... ... @@ -167,7 +164,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage(app.imageUrl),
AssetImage(app.imageUrl),
fit: BoxFit.cover),
color: Colors.white,
borderRadius:
... ... @@ -292,7 +289,7 @@ class PhotoShareBottomSheet extends StatelessWidget {
children: <Widget>[
Material(
child: CircleAvatar(
backgroundImage: NetworkImage(
backgroundImage: AssetImage(
person.imageUrl,
),
radius: 30,
... ... @@ -338,8 +335,8 @@ class PhotoShareBottomSheet extends StatelessWidget {
SizedBox(width: 18),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
'https://images.unsplash.com/photo-1586042062881-03688ce69774',
child: Image.asset(
'assets/demo_image.jpeg',
fit: BoxFit.cover,
height: 40,
width: 40,
... ... @@ -422,31 +419,24 @@ class Item {
}
final people = [
Item('MacBook Pro',
'https://www.uoduckstore.com/TDS%20Product%20Images/Apple%20MacBook%20Pro%2016%20w%20T%20Bar%20Late%202019_1.jpg'),
Item('Jaime Blasco',
'https://media-exp1.licdn.com/dms/image/C5603AQGfIMBxWBRMSg/profile-displayphoto-shrink_200_200/0?e=1591833600&v=beta&t=r6xnd4oBDfb3A3IcsgliyrT_avYaeBEwRr9XtlizWq8'),
Item('Mya Johnston',
'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7'),
Item('MacBook Pro', 'assets/MacBook.jpg'),
Item('Jaime Blasco', 'assets/jaimeblasco.jpeg'),
Item('Mya Johnston', 'assets/person1.jpeg'),
// https://images.unsplash.com/photo-1520813792240-56fc4a3765a7'
Item('Maxime Nicholls',
'https://images.unsplash.com/photo-1520719627573-5e2c1a6610f0'),
'assets/person4.jpeg'), //https://images.unsplash.com/photo-1568707043650-eb03f2536825'
Item('Susanna Thorne',
'https://images.unsplash.com/photo-1568707043650-eb03f2536825'),
Item('Jarod Aguilar',
'https://images.unsplash.com/photo-1547106634-56dcd53ae883')
'assets/person2.jpeg'), //https://images.unsplash.com/photo-1520719627573-5e2c1a6610f0
Item('Jarod Aguilar', 'assets/person3.jpeg')
//https://images.unsplash.com/photo-1547106634-56dcd53ae883
];
final apps = [
Item('Messages',
'https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IMessage_logo.svg/1200px-IMessage_logo.svg.png'),
Item('Github',
'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'),
Item('Slack',
'https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/6e/80/06/6e80063f-e5c8-3f20-d8d5-22dd0740f5ba/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.png'),
Item('Twitter',
'https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2015/06/Twitter-bird-white-blue2.png'),
Item('Mail',
'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Mail_%28iOS%29.svg/1200px-Mail_%28iOS%29.svg.png'),
Item('Messages', 'assets/message.png'),
Item('Github', 'assets/github_app.png'),
Item('Slack', 'assets/slack.png'),
Item('Twitter', 'assets/twitter.png'),
Item('Mail', 'assets/mail.png'),
];
final actions = [
... ...
import 'package:example/modals/circular_modal.dart';
import 'package:example/web_frame.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
... ... @@ -22,6 +23,9 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(platform: TargetPlatform.iOS),
title: 'BottomSheet Modals',
builder: (context, child) => WebFrame(child: child,),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
... ... @@ -36,6 +40,7 @@ class MyApp extends StatelessWidget {
builder: (context) => CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: Text('Normal Navigation Presentation'),
trailing: GestureDetector(
child: Icon(Icons.arrow_upward),
... ... @@ -95,6 +100,7 @@ class _MyHomePageState extends State<MyHomePage> {
child: CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
transitionBetweenRoutes: false,
middle: Text('iOS13 Modal Presentation'),
trailing: GestureDetector(
child: Icon(Icons.arrow_forward),
... ...
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
class WebFrame extends StatelessWidget {
final Widget child;
const WebFrame({Key key, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
if (kIsWeb && MediaQuery.of(context).size.width > 600) {
final date = DateTime.now();
final MediaQueryData mediaQuery = MediaQueryData(
size: Size(414, 896),
padding: EdgeInsets.only(
top: 44,
bottom: 34,
),
devicePixelRatio: 2,
);
return Material(
child: Padding(
padding: EdgeInsets.all(60),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
flex: 2,
key: Key('Preview'),
child: FittedBox(
fit: BoxFit.contain,
child: Builder(builder: (context) {
final device = MediaQuery(
data: mediaQuery,
child: Container(
width: mediaQuery.size.width,
height: mediaQuery.size.height,
alignment: Alignment.center,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
child,
Positioned(
top: 0,
left: 0,
right: 0,
height: 44,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 30, top: 4),
child: Text(
'${date.hour}:${date.minute}',
style: TextStyle(
fontWeight: FontWeight.bold),
)),
Padding(
padding: EdgeInsets.only(right: 18),
child: Row(
children: <Widget>[
Icon(
Icons.signal_cellular_4_bar,
size: 14,
),
SizedBox(width: 4),
Icon(Icons.wifi, size: 16),
SizedBox(width: 4),
Icon(
CupertinoIcons.battery_charging,
size: 20)
],
))
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(bottom: 8),
height: 4,
width: 140,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(4)),
),
)
],
)),
);
return Container(
child: ClipRRect(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(38.5),
child: device),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black, width: 12)),
);
}),
),
),
SizedBox(width: 80),
Flexible(
flex: 1,
child: FittedBox(
fit: BoxFit.scaleDown,
child: Container(
padding: EdgeInsets.only(bottom: 40),
width: mediaQuery.size.width,
height: mediaQuery.size.height,
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Text(
'Modal\nBottom\nSheet',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 80,
),
maxLines: 3,
overflow: TextOverflow.clip,
)),
Spacer(),
Row(children: <Widget>[
InkWell(
onTap: () => launch('https://pub.dev/packages/modal_bottom_sheet'),
child: Image.asset('assets/flutter.png', height: 60),
),
Spacer(),
InkWell(
onTap: () => launch('https://github.com/jamesblasco/modal_bottom_sheet'),
child: Image.asset('assets/github.png', height: 60),
),
],)
],
))))
],
),
),
);
} else {
return child;
}
}
}
... ...
... ... @@ -7,42 +7,42 @@ packages:
name: archive
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
version: "2.0.13"
args:
dependency: transitive
description:
name: args
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
version: "1.6.0"
async:
dependency: transitive
description:
name: async
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
version: "2.4.1"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
version: "2.0.0"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.2"
version: "1.1.3"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.14.11"
version: "1.14.12"
convert:
dependency: transitive
description:
... ... @@ -56,7 +56,7 @@ packages:
name: crypto
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
version: "2.1.4"
cupertino_icons:
dependency: "direct main"
description:
... ... @@ -74,13 +74,18 @@ packages:
description: flutter
source: sdk
version: "0.0.0"
flutter_web_plugins:
dependency: transitive
description: flutter
source: sdk
version: "0.0.0"
image:
dependency: transitive
description:
name: image
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.4"
version: "2.1.12"
matcher:
dependency: transitive
description:
... ... @@ -96,12 +101,12 @@ packages:
source: hosted
version: "1.1.8"
modal_bottom_sheet:
dependency: "direct dev"
dependency: "direct main"
description:
path: ".."
relative: true
source: path
version: "0.1.0"
version: "0.1.3"
path:
dependency: transitive
description:
... ... @@ -109,27 +114,27 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.4"
pedantic:
petitparser:
dependency: transitive
description:
name: pedantic
name: petitparser
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0+1"
petitparser:
version: "3.0.2"
plugin_platform_interface:
dependency: transitive
description:
name: petitparser
name: plugin_platform_interface
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
version: "1.0.2"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
version: "2.1.3"
sky_engine:
dependency: transitive
description: flutter
... ... @@ -141,7 +146,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.5"
version: "1.7.0"
stack_trace:
dependency: transitive
description:
... ... @@ -176,7 +181,7 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.11"
version: "0.2.15"
typed_data:
dependency: transitive
description:
... ... @@ -184,6 +189,34 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
url_launcher:
dependency: "direct main"
description:
name: url_launcher
url: "https://pub.dartlang.org"
source: hosted
version: "5.4.2"
url_launcher_macos:
dependency: transitive
description:
name: url_launcher_macos
url: "https://pub.dartlang.org"
source: hosted
version: "0.0.1+4"
url_launcher_platform_interface:
dependency: transitive
description:
name: url_launcher_platform_interface
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.6"
url_launcher_web:
dependency: transitive
description:
name: url_launcher_web
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.1+1"
vector_math:
dependency: transitive
description:
... ... @@ -197,6 +230,7 @@ packages:
name: xml
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
version: "3.7.0"
sdks:
dart: ">=2.4.0 <3.0.0"
dart: ">=2.7.0 <3.0.0"
flutter: ">=1.12.8 <2.0.0"
... ...
... ... @@ -19,6 +19,9 @@ environment:
dependencies:
flutter:
sdk: flutter
url_launcher: ^5.4.2
modal_bottom_sheet:
path: '../'
# The following adds the Cupertino Icons font to your application.
... ... @@ -28,8 +31,6 @@ dependencies:
dev_dependencies:
flutter_test:
sdk: flutter
modal_bottom_sheet:
path: '../'
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
... ... @@ -42,6 +43,8 @@ flutter:
# the material Icons class.
uses-material-design: true
assets:
- assets/
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
... ...
... ... @@ -3,7 +3,24 @@
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- Primary Meta Tags -->
<title>Flutter Modal Bottom Sheets</title>
<meta name="title" content="Flutter Modal Bottom Sheets">
<meta name="description" content="Build advanced modals. Cupertino, material or create your own">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://jamesblasco.github.io/modal_bottom_sheet/">
<meta property="og:title" content="Flutter Modal Bottom Sheets">
<meta property="og:description" content="Build advanced modals. Cupertino, material or create your own">
<meta property="og:image" content="https://jamesblasco.github.io/modal_bottom_sheet/icons/image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://jamesblasco.github.io/modal_bottom_sheet/">
<meta property="twitter:title" content="Flutter Modal Bottom Sheets">
<meta property="twitter:description" content="Build advanced modals. Cupertino, material or create your own">
<meta property="og:image" content="https://jamesblasco.github.io/modal_bottom_sheet/icons/image.png">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
... ... @@ -14,7 +31,6 @@
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>example</title>
<link rel="manifest" href="/manifest.json">
</head>
<body>
... ...
... ... @@ -178,7 +178,7 @@ class _CupertinoModalTransition extends StatelessWidget {
Widget build(BuildContext context) {
double startRoundCorner = 0;
final paddingTop = MediaQuery.of(context).padding.top;
if (defaultTargetPlatform == TargetPlatform.iOS && paddingTop > 20) {
if (Theme.of(context).platform == TargetPlatform.iOS && paddingTop > 20) {
startRoundCorner = 38.5;
//https://kylebashour.com/posts/finding-the-real-iphone-x-corner-radius
}
... ...