Toggle navigation
Toggle navigation
This project
Loading...
Sign in
flutter_package
/
modal_bottom_sheet
Go to a project
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation pinning
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
Jaime Blasco
2022-09-09 12:07:36 +0200
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Committed by
GitHub
2022-09-09 12:07:36 +0200
Commit
7b559d1356ca35729aae9245ab55efe081ca8440
7b559d13
1 parent
0c02c42f
feat: add foldable example (#269)
Hide whitespace changes
Inline
Side-by-side
Showing
18 changed files
with
156 additions
and
43 deletions
docs/assets/foldable_phone.gif
sheet/example/.metadata
sheet/example/android/.gitignore
sheet/example/android/app/build.gradle
sheet/example/android/app/src/debug/AndroidManifest.xml
sheet/example/android/app/src/main/AndroidManifest.xml
sheet/example/android/app/src/main/kotlin/com/example/example/MainActivity.kt → sheet/example/android/app/src/main/kotlin/jb/example/example/MainActivity.kt
sheet/example/android/app/src/main/res/values-night/styles.xml
sheet/example/android/app/src/main/res/values/styles.xml
sheet/example/android/app/src/profile/AndroidManifest.xml
sheet/example/android/build.gradle
sheet/example/android/gradle/wrapper/gradle-wrapper.properties
sheet/example/lib/examples/route/modals/floating_sheet.dart
sheet/example/lib/examples/sheet/fold_screen_sheet.dart
sheet/example/lib/route_example_page.dart
sheet/example/lib/sheet_example_page.dart
sheet/example/web/icons/Icon-maskable-192.png
sheet/example/web/icons/Icon-maskable-512.png
docs/assets/foldable_phone.gif
0 → 100644
View file @
7b559d1
398 KB
sheet/example/.metadata
View file @
7b559d1
# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
# This file should be version controlled
and should not be manually edited
.
# This file should be version controlled.
version:
revision: 8cb266511897d79e6d7d60c08c0e425f4cdaf433
channel: master
revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
channel: stable
project_type: app
# Tracks metadata for the flutter migrate command
migration:
platforms:
- platform: root
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: android
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: ios
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: linux
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: macos
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: web
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
- platform: windows
create_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
base_revision: 4f9d92fbbdf072a70a70d2179a9f87392b94104c
# User provided section
# List of Local paths (relative to this file) that should be
# ignored by the migrate tool.
#
# Files that are not part of the templates will be ignored by default.
unmanaged_files:
- 'lib/main.dart'
- 'ios/Runner.xcodeproj/project.pbxproj'
...
...
sheet/example/android/.gitignore
View file @
7b559d1
...
...
@@ -9,3 +9,5 @@ GeneratedPluginRegistrant.java
# Remember to never publicly share your keystore.
# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
key.properties
**/*.keystore
**/*.jks
...
...
sheet/example/android/app/build.gradle
View file @
7b559d1
...
...
@@ -26,21 +26,29 @@ apply plugin: 'kotlin-android'
apply
from:
"$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android
{
compileSdkVersion
29
compileSdkVersion
flutter
.
compileSdkVersion
ndkVersion
flutter
.
ndkVersion
sourceSets
{
main
.
java
.
srcDirs
+=
'src/main/kotlin'
compileOptions
{
sourceCompatibility
JavaVersion
.
VERSION_1_8
targetCompatibility
JavaVersion
.
VERSION_1_8
}
kotlinOptions
{
jvmTarget
=
'1.8'
}
lintOptions
{
disable
'InvalidPackage'
sourceSets
{
main
.
java
.
srcDirs
+=
'src/main/kotlin'
}
defaultConfig
{
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId
"com.example.example"
minSdkVersion
16
targetSdkVersion
29
applicationId
"jb.example.example"
// You can update the following values to match your application needs.
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
minSdkVersion
flutter
.
minSdkVersion
targetSdkVersion
flutter
.
targetSdkVersion
versionCode
flutterVersionCode
.
toInteger
()
versionName
flutterVersionName
}
...
...
sheet/example/android/app/src/debug/AndroidManifest.xml
View file @
7b559d1
<manifest
xmlns:android=
"http://schemas.android.com/apk/res/android"
package=
"com.example.example"
>
<!-- Flutter needs it to communicate with the running application
package=
"jb.example.example"
>
<!-- The INTERNET permission is required for development. Specifically,
the Flutter tool needs it to communicate with the running application
to allow setting breakpoints, to provide hot reload, etc.
-->
<uses-permission
android:name=
"android.permission.INTERNET"
/>
...
...
sheet/example/android/app/src/main/AndroidManifest.xml
View file @
7b559d1
<manifest
xmlns:android=
"http://schemas.android.com/apk/res/android"
package=
"
com
.example.example"
>
package=
"
jb
.example.example"
>
<application
android:label=
"example"
android:name=
"${applicationName}"
android:icon=
"@mipmap/ic_launcher"
>
<activity
android:name=
".MainActivity"
android:exported=
"true"
android:launchMode=
"singleTop"
android:theme=
"@style/LaunchTheme"
android:configChanges=
"orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
...
...
@@ -18,15 +20,6 @@
android:name=
"io.flutter.embedding.android.NormalTheme"
android:resource=
"@style/NormalTheme"
/>
<!-- Displays an Android View that continues showing the launch screen
Drawable until Flutter paints its first frame, then this splash
screen fades out. A splash screen is useful to avoid any visual
gap between the end of Android's launch screen and the painting of
Flutter's first frame. -->
<meta-data
android:name=
"io.flutter.embedding.android.SplashScreenDrawable"
android:resource=
"@drawable/launch_background"
/>
<intent-filter>
<action
android:name=
"android.intent.action.MAIN"
/>
<category
android:name=
"android.intent.category.LAUNCHER"
/>
...
...
sheet/example/android/app/src/main/kotlin/
com
/example/example/MainActivity.kt → sheet/example/android/app/src/main/kotlin/
jb
/example/example/MainActivity.kt
View file @
7b559d1
package
com
.example.example
package
jb
.example.example
import io.flutter.embedding.android.FlutterActivity
...
...
sheet/example/android/app/src/main/res/values-night/styles.xml
View file @
7b559d1
...
...
@@ -3,14 +3,14 @@
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
<style
name=
"LaunchTheme"
parent=
"@android:style/Theme.Black.NoTitleBar"
>
<!-- Show a splash screen on the activity. Automatically removed when
Flutter
draws its first frame -->
the Flutter engine
draws its first frame -->
<item
name=
"android:windowBackground"
>
@drawable/launch_background
</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style
name=
"NormalTheme"
parent=
"@android:style/Theme.Black.NoTitleBar"
>
<item
name=
"android:windowBackground"
>
?android:colorBackground
</item>
...
...
sheet/example/android/app/src/main/res/values/styles.xml
View file @
7b559d1
...
...
@@ -3,14 +3,14 @@
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
<style
name=
"LaunchTheme"
parent=
"@android:style/Theme.Light.NoTitleBar"
>
<!-- Show a splash screen on the activity. Automatically removed when
Flutter
draws its first frame -->
the Flutter engine
draws its first frame -->
<item
name=
"android:windowBackground"
>
@drawable/launch_background
</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style
name=
"NormalTheme"
parent=
"@android:style/Theme.Light.NoTitleBar"
>
<item
name=
"android:windowBackground"
>
?android:colorBackground
</item>
...
...
sheet/example/android/app/src/profile/AndroidManifest.xml
View file @
7b559d1
<manifest
xmlns:android=
"http://schemas.android.com/apk/res/android"
package=
"com.example.example"
>
<!-- Flutter needs it to communicate with the running application
package=
"jb.example.example"
>
<!-- The INTERNET permission is required for development. Specifically,
the Flutter tool needs it to communicate with the running application
to allow setting breakpoints, to provide hot reload, etc.
-->
<uses-permission
android:name=
"android.permission.INTERNET"
/>
...
...
sheet/example/android/build.gradle
View file @
7b559d1
buildscript
{
ext
.
kotlin_version
=
'1.
3.5
0'
ext
.
kotlin_version
=
'1.
6.1
0'
repositories
{
google
()
jcenter
()
mavenCentral
()
}
dependencies
{
classpath
'com.android.tools.build:gradle:
3.5.0
'
classpath
'com.android.tools.build:gradle:
7.1.2
'
classpath
"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
...
...
@@ -14,7 +14,7 @@ buildscript {
allprojects
{
repositories
{
google
()
jcenter
()
mavenCentral
()
}
}
...
...
sheet/example/android/gradle/wrapper/gradle-wrapper.properties
View file @
7b559d1
#Fri Jun 23 08:50:38 CEST 2017
distributionBase
=
GRADLE_USER_HOME
distributionPath
=
wrapper/dists
zipStoreBase
=
GRADLE_USER_HOME
zipStorePath
=
wrapper/dists
distributionUrl
=
https
\:
//services.gradle.org/distributions/gradle-
5.6.2
-all.zip
distributionUrl
=
https
\:
//services.gradle.org/distributions/gradle-
7.4
-all.zip
...
...
sheet/example/lib/examples/route/modals/floating_sheet.dart
View file @
7b559d1
...
...
@@ -10,13 +10,18 @@ class FloatingModal extends StatelessWidget {
@override
Widget
build
(
BuildContext
context
)
{
return
SafeArea
(
minimum:
const
EdgeInsets
.
symmetric
(
horizontal:
20
,
vertical:
20
),
child:
Material
(
color:
backgroundColor
,
clipBehavior:
Clip
.
antiAlias
,
borderRadius:
BorderRadius
.
circular
(
12
),
child:
child
,
// DisplayFeatureSubScreen allows to display the modal in just
// one sub-screen of a foldable device.
return
DisplayFeatureSubScreen
(
anchorPoint:
Offset
.
infinite
,
child:
SafeArea
(
minimum:
const
EdgeInsets
.
symmetric
(
horizontal:
20
,
vertical:
20
),
child:
Material
(
color:
backgroundColor
,
clipBehavior:
Clip
.
antiAlias
,
borderRadius:
BorderRadius
.
circular
(
12
),
child:
child
,
),
),
);
}
...
...
sheet/example/lib/examples/sheet/fold_screen_sheet.dart
0 → 100644
View file @
7b559d1
import
'package:flutter/material.dart'
;
import
'package:sheet/sheet.dart'
;
class
FoldableScreenFloatingSheet
extends
StatefulWidget
{
@override
_FitSheetState
createState
()
=>
_FitSheetState
();
}
class
_FitSheetState
extends
State
<
FoldableScreenFloatingSheet
>
{
final
SheetController
controller
=
SheetController
();
@override
void
initState
()
{
Future
<
void
>.
delayed
(
const
Duration
(
milliseconds:
400
),
animateSheet
);
super
.
initState
();
}
void
animateSheet
()
{
controller
.
relativeAnimateTo
(
1
,
duration:
const
Duration
(
milliseconds:
400
),
curve:
Curves
.
easeOut
);
}
@override
void
dispose
()
{
controller
.
dispose
();
super
.
dispose
();
}
@override
Widget
build
(
BuildContext
context
)
{
return
DisplayFeatureSubScreen
(
anchorPoint:
Offset
.
infinite
,
child:
Sheet
.
raw
(
physics:
const
SnapSheetPhysics
(
parent:
BouncingSheetPhysics
(
overflowViewport:
false
),
stops:
<
double
>[
0
,
1
],
),
padding:
const
EdgeInsets
.
all
(
20
),
child:
Container
(
height:
200
,
alignment:
Alignment
.
topCenter
,
child:
Container
(
height:
200
,
width:
double
.
infinity
,
child:
Material
(
elevation:
1
,
shape:
RoundedRectangleBorder
(
borderRadius:
BorderRadius
.
circular
(
12
),
),
color:
Colors
.
grey
[
900
],
),
),
),
controller:
controller
,
),
);
}
}
...
...
sheet/example/lib/route_example_page.dart
View file @
7b559d1
...
...
@@ -270,6 +270,14 @@ class RouteExamplePage extends StatelessWidget {
),
),
ListTile
(
title:
const
Text
(
'Foldable Screen - Fit'
),
onTap:
()
=>
Navigator
.
of
(
context
).
push
(
FloatingSheetRoute
<
void
>(
builder:
(
BuildContext
context
)
=>
const
ModalFit
(),
),
),
),
ListTile
(
title:
const
Text
(
'Dialog Modal for tablet - Expanded'
),
onTap:
()
=>
Navigator
.
of
(
context
).
push
(
DialogSheetRoute
<
void
>(
...
...
sheet/example/lib/sheet_example_page.dart
View file @
7b559d1
...
...
@@ -12,6 +12,7 @@ import 'examples/sheet/fit_resizable_sheet.dart';
import
'examples/sheet/fit_sheet.dart'
;
import
'examples/sheet/fit_sheet_snap.dart'
;
import
'examples/sheet/floating_sheet.dart'
;
import
'examples/sheet/fold_screen_sheet.dart'
;
import
'examples/sheet/resizable_sheet.dart'
;
import
'examples/sheet/scrollable_sheet.dart'
;
import
'examples/sheet/scrollable_snap_sheet.dart'
;
...
...
@@ -55,6 +56,7 @@ class SheetExamplesPage extends StatelessWidget {
ExampleTile
.
sheet
(
'Fit, Resizable and Bouncing sheet'
,
FitResizableSheet
()),
ExampleTile
.
sheet
(
'Textfield sheet'
,
TextFieldSheet
()),
ExampleTile
.
sheet
(
'Foldable screen'
,
FoldableScreenFloatingSheet
()),
const
ExampleTile
(
title:
'Customizable sheet'
,
page:
SheetConfigurationPage
()),
const
SectionTitle
(
'SHOWCASE'
),
...
...
sheet/example/web/icons/Icon-maskable-192.png
0 → 100644
View file @
7b559d1
5.46 KB
sheet/example/web/icons/Icon-maskable-512.png
0 → 100644
View file @
7b559d1
20.5 KB
Please
register
or
login
to post a comment