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)
Show whitespace changes
Inline
Side-by-side
Showing
18 changed files
with
148 additions
and
35 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,7 +3,7 @@
<!-- 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.
...
...
sheet/example/android/app/src/main/res/values/styles.xml
View file @
7b559d1
...
...
@@ -3,7 +3,7 @@
<!-- 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.
...
...
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,7 +10,11 @@ class FloatingModal extends StatelessWidget {
@override
Widget
build
(
BuildContext
context
)
{
return
SafeArea
(
// 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
,
...
...
@@ -18,6 +22,7 @@ class FloatingModal extends StatelessWidget {
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