Flutter: 3๊ฐœ ์ด์ƒ์˜ ํ•ญ๋ชฉ์ด ์žˆ๋Š” ๊ฒฝ์šฐ BottomNavigationBar ํ•ญ๋ชฉ์ด ํฐ์ƒ‰์ด ๋ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 12์›” 17์ผ  ยท  21์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: flutter/flutter

๋ฒˆ์‹ ๋‹จ๊ณ„

BottomNavigationBar ์— 3๊ฐœ ์ด์ƒ์˜ ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ชจ๋“  ํ•ญ๋ชฉ์ด ํฐ์ƒ‰์œผ๋กœ ๋ฐ”๋€Œ๊ณ  ๋ฐ์€ ํšŒ์ƒ‰ ๋ฐฐ๊ฒฝ์—์„œ ์ฝ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํ™œ์„ฑ ํ•ญ๋ชฉ๋„ ํฐ์ƒ‰์ด๋ฉฐ ์ œ๊ณต๋œ fixedColor ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ตœ์†Œ ์ฝ”๋“œ ์ƒ˜ํ”Œ์€ ์—ฌ๊ธฐ ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ์ด๋ฏธ์ง€๋„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

schermafbeelding 2017-12-17 om 20 52 39

schermafbeelding 2017-12-17 om 20 52 50

๋กœ๊ทธ

ํ•ด๋‹น ์—†์Œ

ํ”Œ๋Ÿฌํ„ฐ ๋‹ฅํ„ฐ

[โœ“] 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)
annoyance material design framework

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,

๋ชจ๋“  21 ๋Œ“๊ธ€

/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์— ์ถ”๊ฐ€
๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ชจ๋‘ ํ‘œ์‹œ

ํƒญ ์ˆ˜์— ๋”ฐ๋ผ ๋™์ž‘์„ ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ์•ˆ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์€ ์ €๋ฟ์ธ๊ฐ€์š”?
๋‹ค๋ฅธ ํ–‰๋™์„ ๊ธฐ๋Œ€ํ•˜๋Š” ๊ฒƒ์ด ์ง๊ด€์ ์ด์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ฐ™์€ ์ƒ๊ฐ

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰