BottomNavigationBar
์ 3๊ฐ ์ด์์ ํญ๋ชฉ์ ์ถ๊ฐํ๋ฉด ๋ชจ๋ ํญ๋ชฉ์ด ํฐ์์ผ๋ก ๋ฐ๋๊ณ ๋ฐ์ ํ์ ๋ฐฐ๊ฒฝ์์ ์ฝ์ ์ ์์ต๋๋ค. ๋ํ ํ์ฑ ํญ๋ชฉ๋ ํฐ์์ด๋ฉฐ ์ ๊ณต๋ fixedColor
๊ฐ ์๋๋๋ค. ์ต์ ์ฝ๋ ์ํ์ ์ฌ๊ธฐ ์์ ์ฐพ์ ์ ์์ต๋๋ค.
๋ค์ ์ด๋ฏธ์ง๋ ์ฐธ์กฐํ์ญ์์ค.
ํด๋น ์์
[โ] Flutter (on Mac OS X 10.13.1 17B1003, locale nl-NL, channel alpha)
โข Flutter at /Users/dirk/Developer/flutter/sdk
โข Framework revision 8f65fec5f5 (5 days ago), 2017-12-12 09:50:14 -0800
โข Engine revision edaecdc8b8
โข Tools Dart version 1.25.0-dev.11.0
โข Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e
[โ] Android toolchain - develop for Android devices (Android SDK 26.0.0)
โข Android SDK at /Users/dirk/Library/Android/sdk
โข Android NDK location not configured (optional; useful for native profiling support)
โข Platform android-26, build-tools 26.0.0
โข Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
โข Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)
[-] iOS toolchain - develop for iOS devices (Xcode 9.2)
โข Xcode at /Applications/Xcode.app/Contents/Developer
โข Xcode 9.2, Build version 9C40b
โ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
โ ios-deploy not installed. To install:
brew install ios-deploy
โข CocoaPods version 1.2.0
[โ] Android Studio (version 2.3)
โข Android Studio at /Applications/Android Studio.app/Contents
โข Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)
[โ] IntelliJ IDEA Ultimate Edition (version 2017.3)
โข Flutter plugin version 20.0.3
โข Dart plugin version 173.3727.108
[โ] Connected devices
โข iPhone X โข 9500EA8E-1292-4223-BFFF-1B2134D5C47C โข ios โข iOS 11.2 (simulator)
/cc @xster
cc @HansMuller , ์ด๊ฒ์ ๋ํ ์ค๋๋ ๋ฒ๊ทธ๋ฅผ ๋ณธ ๊ธฐ์ต์ด ์ด๋ ดํ์ด ์์ง๋ง ์ฐพ์ ์ ์์ต๋๋ค.
BottomNavigationBarType.fixed๋ฅผ ์ฌ์ฉํ ๋ OK ๏ผ๊ทธ๋ฌ๋ BottomNavigationBarType.shifting์ ์ฌ์ฉํ ๋ ์๋ชป๋
๋๋์ด ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์๋ฌด๋ ์ด๊ฒ์ ์์ ํ๋ ๋ฐฉ๋ฒ์ ์๊ณ ์์ต๋๊น?
๋์๊ฒ ๊ฐ์ ๋ฌธ์
๋๋ ์ด๊ฒ์ ์ฌํด ํ๋ฐ์ ๋ณผ ๊ฒ๋ค์ ๋ชฉ๋ก์ ์ถ๊ฐํ์ต๋๋ค. ํ์ง๋ง ๋๊ตฌ๋ ์ง ์ฝ๋๋ฅผ ๋ณด๊ณ ์ด๋ค ์ผ์ด ์ผ์ด๋๊ณ ์๋์ง ์์๋ผ ๊ธฐํ๊ฐ ์๋ค๋ฉด ํจ์น๋ฅผ ๊ฒํ ํ๊ฒ ๋์ด ๊ธฐ์ฉ๋๋ค.
3๊ฐ ์ด์์ BottomNavigationBar ํญ๋ชฉ์ด ์ ๊ณต๋๋ฉด ์ ํ์ด ์ง์ ๋์ง ์์ ๊ฒฝ์ฐ https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html ์ ๋ฐ๋ผ BottomNavigationBarType.shifting
๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. ์ด ์ ๋ณด๋ ์์
๋ฌธ์์์ ๊ฐ์กฐ ํ์๋์ด์ผ ํฉ๋๋ค. ๊ทธ๊ฒ์ด ์ด๋์ ์๋์ง ๊ฐ๊ณผํ๊ธฐ ์ฝ์ต๋๋ค (๋๋ ๊ทธ๊ฒ์ ๊ฐ๊ณผํ์ต๋๋ค).
BottomNavigationBar์ ์ ํ์ด BottomNavigationBarType.shifting
์ธ ๊ฒฝ์ฐ ํญ๋ชฉ ํ
์คํธ์ ์์ด์ฝ์ DefaultTextStyle ๋ฐ IconTheme๋ฅผ ํตํด ํฐ์์ผ๋ก ๋ ๋๋ง๋ฉ๋๋ค. BottomNavigationBarItem.backgroundColor
๊ฐ ๋๋น๋๋ ์์์ผ๋ก ์ง์ ๋๋ค๊ณ ๊ฐ์ ํฉ๋๋ค. ์ด๊ฒ์ ๋ถ๋ช
ํ ํผ๋์ค๋ฝ์ต๋๋ค.
shifting
์ ํ ํ๋จ ํ์ ๋ชจ์์ ์ ๋ฐ์ ์ธ ์์ด๋์ด๋ ํญ๋ชฉ์ด ์ ํ๋ ๋ ํด๋น ์์์ด ์ ์ฒด ํ์ ๋ชจ์์ ์์์ด ๋๊ธฐ ๋๋ฌธ์ ๊ฐ ํญ๋ชฉ์ด ๋ค๋ฅธ ๋ฐฐ๊ฒฝ์(ํฐ์๊ณผ ๋์กฐ๋จ)์ ๊ฐ๋๋ค๋ ๊ฒ์
๋๋ค.
BottomNavigationBar ๋ฐ NavigationBarItem์ ๋ํ ๋ฌธ์๋ฅผ ๊ฐ์ ํด์ผ ํฉ๋๋ค.
@HansMuller ๊ฐ์ฌํฉ๋๋ค. ํจ๊ณผ๊ฐ ์์์ต๋๋ค!
@HansMuller , ๊ฐ์ฌํฉ๋๋ค!
ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ดํดํ์ง ๋ชปํ ๊ฒฝ์ฐ:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
ํญ ์์ ๋ฐ๋ผ ๋์์ด ์๋์ผ๋ก ๋ณ๊ฒฝ๋์ง ์์์ผ ํ๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ ์ ๋ฟ์ธ๊ฐ์?
๋ค๋ฅธ ํ๋์ ๊ธฐ๋ํ๋ ๊ฒ์ด ์ง๊ด์ ์ด์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค ๐
๊ฐ์ฌ ํด์.
์์ด์ฝ์ด ํฐ์์ด ๋๋ ๊ฒ์ ์ํ์ง ์์ง๋ง ์ด๋ํ๋ ๋์์ด ์์ด์ผ ํ๋ ๊ฒฝ์ฐ ์ด๋ป๊ฒ ํด์ผ ํฉ๋๊น?
๊ธฐ๋ณธ ์ ํ์ .fixed๋ก ์ง์ ํ์ง ์๋ ์ด์ ๋ ๋ฌด์์ ๋๊น?
์ด ๋ฌธ์ ๊ฐ ์ข
๋ฃ๋์๋ค๋ ๊ฒ์ ์๊ณ ์์ง๋ง ์ค๋ช
์๊ฐ ๋ฉ์ง๊ฒ ์
๋ฐ์ดํธ๋์์์๋ ๋ถ๊ตฌํ๊ณ ์ฌ์ ํ ๋ฒ๊ทธ์ฒ๋ผ ๋๊ปด์ง๋๋ค.
๊ธฐ๋ณธ๊ฐ์ ์์ ํ๊ฑฐ๋ 4๊ฐ์ ํญ๋ชฉ์ผ๋ก BottomNavigationBarType.shifting์ ๋์์ ์์ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
๊ฐ "BottomNavigationBarItem"์ ๋ํด " backgroundColor" arument๋ฅผ ์ ๊ณตํ๊ณ ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋์์ต๋๋ค.
์ ๋ BottomNavigationBar์ showUnselectedLabels: true ์์ฑ์ ์ ๋ ฅํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
์๋ก์ด BottomNavigationBar(
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[...
์ธ ๊ฐ ์ด์์ ํญ๋ชฉ์ด ์๋ ๊ฒฝ์ฐ ๋์์ด ๋ฐ๋๋ ๊ฒ์ ์ํ์ง ์๋ ๊ฒ์ ๋ฌด์์ ๋๊น? ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
BottomNavigationBar์ showUnselected tedLabels:true ์ถ๊ฐ
backgroundColor: Colors.blue๋ฅผ BottomNavigationBarItem์ ์ถ๊ฐ
๊ทธ๋ฐ ๋ค์ ๋ชจ๋ ํ์
ํญ ์์ ๋ฐ๋ผ ๋์์ ์๋์ผ๋ก ๋ณ๊ฒฝํ๋ฉด ์ ๋๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ ์ ๋ฟ์ธ๊ฐ์?
๋ค๋ฅธ ํ๋์ ๊ธฐ๋ํ๋ ๊ฒ์ด ์ง๊ด์ ์ด์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค.
๋๋ ๊ฐ์ ์๊ฐ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ดํดํ์ง ๋ชปํ ๊ฒฝ์ฐ: