Skip to content

Commit 4299390

Browse files
committed
스플래시 화면 개선
스플래시 화면 개선
1 parent ef57f4b commit 4299390

File tree

37 files changed

+460
-153
lines changed

37 files changed

+460
-153
lines changed

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
## 메모
44

55
`flutter pub run build_runner watch`
6+
`dart run flutter_native_splash:create`
67
웹 CORS 끄기: `--web-browser-flag "--disable-web-security"`
78

89
### web build
Loading
Loading
Loading
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<!-- Modify this file to customize your launch splash screen -->
32
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4-
<item android:drawable="?android:colorBackground" />
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> -->
3+
<item>
4+
<bitmap android:gravity="fill" android:src="@drawable/background"/>
5+
</item>
6+
<item>
7+
<bitmap android:gravity="center" android:src="@drawable/splash"/>
8+
</item>
129
</layer-list>
Loading
Loading
Loading
69 Bytes
Loading
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<!-- Modify this file to customize your launch splash screen -->
32
<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> -->
3+
<item>
4+
<bitmap android:gravity="fill" android:src="@drawable/background"/>
5+
</item>
6+
<item>
7+
<bitmap android:gravity="center" android:src="@drawable/splash"/>
8+
</item>
129
</layer-list>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
4+
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
5+
<item name="android:forceDarkAllowed">false</item>
6+
<item name="android:windowFullscreen">false</item>
7+
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
8+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
9+
</style>
10+
<!-- Theme applied to the Android Window as soon as the process has started.
11+
This theme determines the color of the Android Window while your
12+
Flutter UI initializes, as well as behind your Flutter UI while its
13+
running.
14+
15+
This Theme is only used starting with V2 of Flutter's Android embedding. -->
16+
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
17+
<item name="android:windowBackground">?android:colorBackground</item>
18+
</style>
19+
</resources>

android/app/src/main/res/values-night/styles.xml

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<!-- Show a splash screen on the activity. Automatically removed when
66
the Flutter engine draws its first frame -->
77
<item name="android:windowBackground">@drawable/launch_background</item>
8+
<item name="android:forceDarkAllowed">false</item>
9+
<item name="android:windowFullscreen">false</item>
10+
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
11+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
812
</style>
913
<!-- Theme applied to the Android Window as soon as the process has started.
1014
This theme determines the color of the Android Window while your
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
4+
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
5+
<item name="android:forceDarkAllowed">false</item>
6+
<item name="android:windowFullscreen">false</item>
7+
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
8+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
9+
</style>
10+
<!-- Theme applied to the Android Window as soon as the process has started.
11+
This theme determines the color of the Android Window while your
12+
Flutter UI initializes, as well as behind your Flutter UI while its
13+
running.
14+
15+
This Theme is only used starting with V2 of Flutter's Android embedding. -->
16+
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
17+
<item name="android:windowBackground">?android:colorBackground</item>
18+
</style>
19+
</resources>

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

+4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<!-- Show a splash screen on the activity. Automatically removed when
66
the Flutter engine draws its first frame -->
77
<item name="android:windowBackground">@drawable/launch_background</item>
8+
<item name="android:forceDarkAllowed">false</item>
9+
<item name="android:windowFullscreen">false</item>
10+
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
11+
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
812
</style>
913
<!-- Theme applied to the Android Window as soon as the process has started.
1014
This theme determines the color of the Android Window while your

assets/logo/white_2.png

61.2 KB
Loading

flutter_native_splash.yaml

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
flutter_native_splash:
2+
# This package generates native code to customize Flutter's default white native splash screen
3+
# with background color and splash image.
4+
# Customize the parameters below, and run the following command in the terminal:
5+
# dart run flutter_native_splash:create
6+
# To restore Flutter's default white splash screen, run the following command in the terminal:
7+
# dart run flutter_native_splash:remove
8+
9+
# IMPORTANT NOTE: These parameter do not affect the configuration of Android 12 and later, which
10+
# handle splash screens differently that prior versions of Android. Android 12 and later must be
11+
# configured specifically in the android_12 section below.
12+
13+
# color or background_image is the only required parameter. Use color to set the background
14+
# of your splash screen to a solid color. Use background_image to set the background of your
15+
# splash screen to a png image. This is useful for gradients. The image will be stretch to the
16+
# size of the app. Only one parameter can be used, color and background_image cannot both be set.
17+
color: "#0ED2F7"
18+
#background_image: "assets/icon/white_2.svg"
19+
20+
# Optional parameters are listed below. To enable a parameter, uncomment the line by removing
21+
# the leading # character.
22+
23+
# The image parameter allows you to specify an image used in the splash screen. It must be a
24+
# png file and should be sized for 4x pixel density.
25+
image: "assets/logo/white_2.png"
26+
27+
# The branding property allows you to specify an image used as branding in the splash screen.
28+
# It must be a png file. It is supported for Android, iOS and the Web. For Android 12,
29+
# see the Android 12 section below.
30+
#branding: assets/dart.png
31+
32+
# To position the branding image at the bottom of the screen you can use bottom, bottomRight,
33+
# and bottomLeft. The default values is bottom if not specified or specified something else.
34+
#branding_mode: bottom
35+
36+
# Set the branding padding from the bottom of the screen. The default value is 0
37+
# branding_bottom_padding: 24
38+
39+
# The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
40+
# and image when the device is in dark mode. If they are not specified, the app will use the
41+
# parameters from above. If the image_dark parameter is specified, color_dark or
42+
# background_image_dark must be specified. color_dark and background_image_dark cannot both be
43+
# set.
44+
#color_dark: "#042a49"
45+
#background_image_dark: "assets/dark-background.png"
46+
#image_dark: assets/splash-invert.png
47+
#branding_dark: assets/dart_dark.png
48+
49+
# From Android 12 onwards, the splash screen is handled differently than in previous versions.
50+
# Please visit https://developer.android.com/guide/topics/ui/splash-screen
51+
# Following are specific parameters for Android 12+.
52+
android_12:
53+
# The image parameter sets the splash screen icon image. If this parameter is not specified,
54+
# the app's launcher icon will be used instead.
55+
# Please note that the splash screen will be clipped to a circle on the center of the screen.
56+
# App icon with an icon background: This should be 960×960 pixels, and fit within a circle
57+
# 640 pixels in diameter.
58+
# App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
59+
# 768 pixels in diameter.
60+
#image: assets/android12splash.png
61+
62+
# Splash screen background color.
63+
#color: "#42a5f5"
64+
65+
# App icon background color.
66+
#icon_background_color: "#111111"
67+
68+
# The branding property allows you to specify an image used as branding in the splash screen.
69+
#branding: assets/dart.png
70+
71+
# The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
72+
# apply when the device is in dark mode. If they are not specified, the app will use the
73+
# parameters from above.
74+
#image_dark: assets/android12splash-invert.png
75+
#color_dark: "#042a49"
76+
#icon_background_color_dark: "#eeeeee"
77+
78+
# The android, ios and web parameters can be used to disable generating a splash screen on a given
79+
# platform.
80+
#android: false
81+
#ios: false
82+
#web: false
83+
84+
# Platform specific images can be specified with the following parameters, which will override
85+
# the respective parameter. You may specify all, selected, or none of these parameters:
86+
#color_android: "#42a5f5"
87+
#color_dark_android: "#042a49"
88+
#color_ios: "#42a5f5"
89+
#color_dark_ios: "#042a49"
90+
#color_web: "#42a5f5"
91+
#color_dark_web: "#042a49"
92+
#image_android: assets/splash-android.png
93+
#image_dark_android: assets/splash-invert-android.png
94+
#image_ios: assets/splash-ios.png
95+
#image_dark_ios: assets/splash-invert-ios.png
96+
#image_web: assets/splash-web.gif
97+
#image_dark_web: assets/splash-invert-web.gif
98+
#background_image_android: "assets/background-android.png"
99+
#background_image_dark_android: "assets/dark-background-android.png"
100+
#background_image_ios: "assets/background-ios.png"
101+
#background_image_dark_ios: "assets/dark-background-ios.png"
102+
#background_image_web: "assets/background-web.png"
103+
#background_image_dark_web: "assets/dark-background-web.png"
104+
#branding_android: assets/brand-android.png
105+
#branding_bottom_padding_android: 24
106+
#branding_dark_android: assets/dart_dark-android.png
107+
#branding_ios: assets/brand-ios.png
108+
#branding_bottom_padding_ios: 24
109+
#branding_dark_ios: assets/dart_dark-ios.png
110+
#branding_web: assets/brand-web.gif
111+
#branding_dark_web: assets/dart_dark-web.gif
112+
113+
# The position of the splash image can be set with android_gravity, ios_content_mode, and
114+
# web_image_mode parameters. All default to center.
115+
#
116+
# android_gravity can be one of the following Android Gravity (see
117+
# https://developer.android.com/reference/android/view/Gravity): bottom, center,
118+
# center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
119+
# fill_vertical, left, right, start, or top.
120+
#android_gravity: center
121+
#
122+
# ios_content_mode can be one of the following iOS UIView.ContentMode (see
123+
# https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
124+
# scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
125+
# bottomLeft, or bottomRight.
126+
#ios_content_mode: center
127+
#
128+
# web_image_mode can be one of the following modes: center, contain, stretch, and cover.
129+
#web_image_mode: center
130+
131+
# The screen orientation can be set in Android with the android_screen_orientation parameter.
132+
# Valid parameters can be found here:
133+
# https://developer.android.com/guide/topics/manifest/activity-element#screen
134+
#android_screen_orientation: sensorLandscape
135+
136+
# To hide the notification bar, use the fullscreen parameter. Has no effect in web since web
137+
# has no notification bar. Defaults to false.
138+
# NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
139+
# To show the notification bar, add the following code to your Flutter app:
140+
# WidgetsFlutterBinding.ensureInitialized();
141+
# SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top], );
142+
#fullscreen: true
143+
144+
# If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
145+
# with the info_plist_files parameter. Remove only the # characters in the three lines below,
146+
# do not remove any spaces:
147+
#info_plist_files:
148+
# - 'ios/Runner/Info-Debug.plist'
149+
# - 'ios/Runner/Info-Release.plist'
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"images" : [
3+
{
4+
"filename" : "background.png",
5+
"idiom" : "universal",
6+
"scale" : "1x"
7+
},
8+
{
9+
"idiom" : "universal",
10+
"scale" : "2x"
11+
},
12+
{
13+
"idiom" : "universal",
14+
"scale" : "3x"
15+
}
16+
],
17+
"info" : {
18+
"author" : "xcode",
19+
"version" : 1
20+
}
21+
}
Loading
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
{
22
"images" : [
33
{
4-
"idiom" : "universal",
54
"filename" : "LaunchImage.png",
5+
"idiom" : "universal",
66
"scale" : "1x"
77
},
88
{
9-
"idiom" : "universal",
109
"filename" : "[email protected]",
10+
"idiom" : "universal",
1111
"scale" : "2x"
1212
},
1313
{
14-
"idiom" : "universal",
1514
"filename" : "[email protected]",
15+
"idiom" : "universal",
1616
"scale" : "3x"
1717
}
1818
],
1919
"info" : {
20-
"version" : 1,
21-
"author" : "xcode"
20+
"author" : "xcode",
21+
"version" : 1
2222
}
2323
}
Loading
Loading
Loading

ios/Runner/Base.lproj/LaunchScreen.storyboard

+12-5
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,19 @@
1616
<view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
1717
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
1818
<subviews>
19-
<imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
20-
</imageView>
19+
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" image="LaunchBackground" translatesAutoresizingMaskIntoConstraints="NO" id="tWc-Dq-wcI"/>
20+
<imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4"></imageView>
2121
</subviews>
2222
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
2323
<constraints>
24-
<constraint firstItem="YRO-k0-Ey4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="1a2-6s-vTC"/>
25-
<constraint firstItem="YRO-k0-Ey4" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="4X2-HB-R7a"/>
24+
<constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="3T2-ad-Qdv"/>
25+
<constraint firstItem="tWc-Dq-wcI" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="RPx-PI-7Xg"/>
26+
<constraint firstItem="tWc-Dq-wcI" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="SdS-ul-q2q"/>
27+
<constraint firstAttribute="trailing" secondItem="tWc-Dq-wcI" secondAttribute="trailing" id="Swv-Gf-Rwn"/>
28+
<constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="TQA-XW-tRk"/>
29+
<constraint firstItem="YRO-k0-Ey4" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="duK-uY-Gun"/>
30+
<constraint firstItem="tWc-Dq-wcI" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="kV7-tw-vXt"/>
31+
<constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="xPn-NY-SIU"/>
2632
</constraints>
2733
</view>
2834
</viewController>
@@ -32,6 +38,7 @@
3238
</scene>
3339
</scenes>
3440
<resources>
35-
<image name="LaunchImage" width="168" height="185"/>
41+
<image name="LaunchImage" width="1024" height="1024"/>
42+
<image name="LaunchBackground" width="1" height="1"/>
3643
</resources>
3744
</document>

0 commit comments

Comments
 (0)