Skip to content

Commit 325c5a5

Browse files
xsterRedBrogdon
xster
authored and
RedBrogdon
committed
Add a Material/Cupertino adaptive application example (#69)
1 parent 08beb69 commit 325c5a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+2718
-0
lines changed

‎platform_design/.gitignore

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
12+
# IntelliJ related
13+
*.iml
14+
*.ipr
15+
*.iws
16+
.idea/
17+
18+
# Visual Studio Code related
19+
.vscode/
20+
21+
# Flutter/Dart/Pub related
22+
**/doc/api/
23+
.dart_tool/
24+
.flutter-plugins
25+
.packages
26+
.pub-cache/
27+
.pub/
28+
/build/
29+
30+
# Android related
31+
**/android/**/gradle-wrapper.jar
32+
**/android/.gradle
33+
**/android/captures/
34+
**/android/gradlew
35+
**/android/gradlew.bat
36+
**/android/local.properties
37+
**/android/**/GeneratedPluginRegistrant.java
38+
39+
# iOS/XCode related
40+
**/ios/**/*.mode1v3
41+
**/ios/**/*.mode2v3
42+
**/ios/**/*.moved-aside
43+
**/ios/**/*.pbxuser
44+
**/ios/**/*.perspectivev3
45+
**/ios/**/*sync/
46+
**/ios/**/.sconsign.dblite
47+
**/ios/**/.tags*
48+
**/ios/**/.vagrant/
49+
**/ios/**/DerivedData/
50+
**/ios/**/Icon?
51+
**/ios/**/Pods/
52+
**/ios/**/.symlinks/
53+
**/ios/**/profile
54+
**/ios/**/xcuserdata
55+
**/ios/.generated/
56+
**/ios/Flutter/App.framework
57+
**/ios/Flutter/Flutter.framework
58+
**/ios/Flutter/Generated.xcconfig
59+
**/ios/Flutter/app.flx
60+
**/ios/Flutter/app.zip
61+
**/ios/Flutter/flutter_assets/
62+
**/ios/ServiceDefinitions.json
63+
**/ios/Runner/GeneratedPluginRegistrant.*
64+
65+
# Exceptions to above rules.
66+
!**/ios/**/default.mode1v3
67+
!**/ios/**/default.mode2v3
68+
!**/ios/**/default.pbxuser
69+
!**/ios/**/default.perspectivev3
70+
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

‎platform_design/.metadata

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: 8bea3fb2ebadc3933b6b213483d2d4379ac53a5c
8+
channel: master
9+
10+
project_type: app

‎platform_design/README.md

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Platform Design
2+
3+
Instead of transliterating widgets one by one between Cupertino and Material,
4+
Android and iOS apps often follow different information architecture patterns
5+
that require some design decisions.
6+
7+
This sample project shows a Flutter app that maximizes application code reuse
8+
while adhering to different design patterns on Android and iOS. On
9+
Android, it uses Material's [lateral navigation](https://material.io/design/navigation/understanding-navigation.html#types-of-navigation)
10+
based on a drawer and on iOS, it adheres to Apple Human Interface Guideline's
11+
[flat navigation](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/)
12+
by using a bottom tab bar.
13+
14+
Visually, the app presents platform-agnostic content surrounded by
15+
platform-specific 'chrome'.
16+
17+
# Preview
18+
19+
![App's platform toggling preview](adaptive-overview.gif)
20+
21+
See https://youtu.be/svhbbFZg1IA for a longer non-gif format.
22+
23+
# Features
24+
25+
## Home
26+
27+
Defines the top level navigation structure of the app and shows the contents
28+
of the songs tab on launch.
29+
30+
### Android
31+
32+
* Uses the drawer paradigm on the root page.
33+
34+
### iOS
35+
36+
* Uses bottom tab bars with parallel navigation stacks.
37+
38+
## Songs feed tab
39+
40+
Shows platform-agnostic cards that is tappable and that performs a hero
41+
transition on top of the platform native page transitions.
42+
43+
Both platforms also show a button in their app/nav bar to toggle the platform.
44+
45+
### Android
46+
47+
* Android uses a static pull-to-refresh pattern with an additional refresh
48+
button in the app bar.
49+
* The song details page must be popped in order to change tabs on Android.
50+
51+
### iOS
52+
53+
* The iOS songs tab uses a scrollable iOS 11 large title style navigation bar.
54+
* iOS uses an overscrolling pull-to-refresh pattern.
55+
* On iOS, parallel tabs are always accessible and the songs tab's navigation
56+
stack is preserved when changing tabs.
57+
58+
## News Tab
59+
60+
Shows platform-agnostic news boxes.
61+
62+
### Android
63+
64+
* The news tab always appears on top of the songs tab when summoned from the
65+
drawer.
66+
67+
### iOS
68+
69+
* The news tab appears instead of the songs tab on iOS when switching tabs from
70+
the tab bar.
71+
72+
## Profile Tab
73+
74+
Shows a number of user preferences.
75+
76+
### Android
77+
78+
* The profile tab appears on top of the songs tab on Android.
79+
* Has tappable preference cards which shows a multiple-choice dialog on Android.
80+
* The log out button shows a 2 button dialog on Android.
81+
82+
### iOS
83+
84+
* The profile tab appears instead of the songs tab on iOS.
85+
* Has tappable preference cards which shows a picker on iOS.
86+
* The log out button shows a 3 choice action sheet on iOS.
87+
88+
## Settings Tab
89+
90+
Shows a number of app settings via Material switches which auto adapt to the
91+
platform.
92+
93+
### Android
94+
95+
* The settings is directly available in the drawer on Android since a Material
96+
Design drawer can fit many tabs.
97+
98+
### iOS
99+
100+
* The settings is accessible from a button inside the profile tab's nav bar on
101+
iOS. This is a common pattern since there are conventionally more items in the
102+
drawer than there are tabs.
103+
* On iOS, the settings page is shown as a full screen dialog instead of a tab
104+
in the tab scaffold.

‎platform_design/adaptive-overview.gif

8.02 MB
Loading

‎platform_design/android/app/build.gradle

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
def localProperties = new Properties()
2+
def localPropertiesFile = rootProject.file('local.properties')
3+
if (localPropertiesFile.exists()) {
4+
localPropertiesFile.withReader('UTF-8') { reader ->
5+
localProperties.load(reader)
6+
}
7+
}
8+
9+
def flutterRoot = localProperties.getProperty('flutter.sdk')
10+
if (flutterRoot == null) {
11+
throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
12+
}
13+
14+
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
15+
if (flutterVersionCode == null) {
16+
flutterVersionCode = '1'
17+
}
18+
19+
def flutterVersionName = localProperties.getProperty('flutter.versionName')
20+
if (flutterVersionName == null) {
21+
flutterVersionName = '1.0'
22+
}
23+
24+
apply plugin: 'com.android.application'
25+
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
26+
27+
android {
28+
compileSdkVersion 28
29+
30+
lintOptions {
31+
disable 'InvalidPackage'
32+
}
33+
34+
defaultConfig {
35+
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
36+
applicationId "com.example.platform_design"
37+
minSdkVersion 16
38+
targetSdkVersion 28
39+
versionCode flutterVersionCode.toInteger()
40+
versionName flutterVersionName
41+
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
42+
}
43+
44+
buildTypes {
45+
release {
46+
// TODO: Add your own signing config for the release build.
47+
// Signing with the debug keys for now, so `flutter run --release` works.
48+
signingConfig signingConfigs.debug
49+
}
50+
}
51+
}
52+
53+
flutter {
54+
source '../..'
55+
}
56+
57+
dependencies {
58+
testImplementation 'junit:junit:4.12'
59+
androidTestImplementation 'com.android.support.test:runner:1.0.2'
60+
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
61+
}

‎platform_design/android/app/src/debug/AndroidManifest.xml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
package="com.example.platform_design">
3+
<!-- Flutter needs it to communicate with the running application
4+
to allow setting breakpoints, to provide hot reload, etc.
5+
-->
6+
<uses-permission android:name="android.permission.INTERNET"/>
7+
</manifest>

‎platform_design/android/app/src/main/AndroidManifest.xml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
package="com.example.platform_design">
3+
4+
<!-- io.flutter.app.FlutterApplication is an android.app.Application that
5+
calls FlutterMain.startInitialization(this); in its onCreate method.
6+
In most cases you can leave this as-is, but you if you want to provide
7+
additional functionality it is fine to subclass or reimplement
8+
FlutterApplication and put your custom class here. -->
9+
<application
10+
android:name="io.flutter.app.FlutterApplication"
11+
android:label="platform_design"
12+
android:icon="@mipmap/ic_launcher">
13+
<activity
14+
android:name=".MainActivity"
15+
android:launchMode="singleTop"
16+
android:theme="@style/LaunchTheme"
17+
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
18+
android:hardwareAccelerated="true"
19+
android:windowSoftInputMode="adjustResize">
20+
<!-- This keeps the window background of the activity showing
21+
until Flutter renders its first frame. It can be removed if
22+
there is no splash screen (such as the default splash screen
23+
defined in @style/LaunchTheme). -->
24+
<meta-data
25+
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
26+
android:value="true" />
27+
<intent-filter>
28+
<action android:name="android.intent.action.MAIN"/>
29+
<category android:name="android.intent.category.LAUNCHER"/>
30+
</intent-filter>
31+
</activity>
32+
</application>
33+
</manifest>

‎platform_design/android/app/src/main/java/com/example/platform_design/MainActivity.java

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
package com.example.platform_design;
2+
3+
import android.os.Bundle;
4+
import io.flutter.app.FlutterActivity;
5+
import io.flutter.plugins.GeneratedPluginRegistrant;
6+
7+
public class MainActivity extends FlutterActivity {
8+
@Override
9+
protected void onCreate(Bundle savedInstanceState) {
10+
super.onCreate(savedInstanceState);
11+
GeneratedPluginRegistrant.registerWith(this);
12+
}
13+
}

‎platform_design/android/app/src/main/res/drawable/launch_background.xml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- Modify this file to customize your launch splash screen -->
3+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4+
<item android:drawable="@android:color/white" />
5+
6+
<!-- You can insert your own image assets here -->
7+
<!-- <item>
8+
<bitmap
9+
android:gravity="center"
10+
android:src="@mipmap/launch_image" />
11+
</item> -->
12+
</layer-list>

‎platform_design/android/app/src/main/res/mipmap-hdpi/ic_launcher.png

544 Bytes
Loading

‎platform_design/android/app/src/main/res/mipmap-mdpi/ic_launcher.png

442 Bytes
Loading

‎platform_design/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png

721 Bytes
Loading

‎platform_design/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png

1.01 KB
Loading

‎platform_design/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

1.41 KB
Loading

‎platform_design/android/app/src/main/res/values/styles.xml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
4+
<!-- Show a splash screen on the activity. Automatically removed when
5+
Flutter draws its first frame -->
6+
<item name="android:windowBackground">@drawable/launch_background</item>
7+
</style>
8+
</resources>

‎platform_design/android/app/src/profile/AndroidManifest.xml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
package="com.example.platform_design">
3+
<!-- Flutter needs it to communicate with the running application
4+
to allow setting breakpoints, to provide hot reload, etc.
5+
-->
6+
<uses-permission android:name="android.permission.INTERNET"/>
7+
</manifest>

‎platform_design/android/build.gradle

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
buildscript {
2+
repositories {
3+
google()
4+
jcenter()
5+
}
6+
7+
dependencies {
8+
classpath 'com.android.tools.build:gradle:3.2.1'
9+
}
10+
}
11+
12+
allprojects {
13+
repositories {
14+
google()
15+
jcenter()
16+
}
17+
}
18+
19+
rootProject.buildDir = '../build'
20+
subprojects {
21+
project.buildDir = "${rootProject.buildDir}/${project.name}"
22+
}
23+
subprojects {
24+
project.evaluationDependsOn(':app')
25+
}
26+
27+
task clean(type: Delete) {
28+
delete rootProject.buildDir
29+
}

‎platform_design/android/gradle.properties

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
org.gradle.jvmargs=-Xmx1536M

‎platform_design/android/gradle/wrapper/gradle-wrapper.properties

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#Fri Jun 23 08:50:38 CEST 2017
2+
distributionBase=GRADLE_USER_HOME
3+
distributionPath=wrapper/dists
4+
zipStoreBase=GRADLE_USER_HOME
5+
zipStorePath=wrapper/dists
6+
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip

‎platform_design/android/settings.gradle

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
include ':app'
2+
3+
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
4+
5+
def plugins = new Properties()
6+
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
7+
if (pluginsFile.exists()) {
8+
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
9+
}
10+
11+
plugins.each { name, path ->
12+
def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
13+
include ":$name"
14+
project(":$name").projectDir = pluginDirectory
15+
}

0 commit comments

Comments
 (0)