๐Ÿ‹ Flutter

[Flutter] ๋‘ ํ‚ค๋ณด๋“œ ํฌ์ปค์Šค ํ•ด์ œ ๋ฐฉ๋ฒ•์˜ ์ฐจ์ด (FocusScope VS FocusManager)

Dogfoot_JW 2025. 1. 8. 14:48

์„œ๋ก 

Flutter์—์„œ ํ‚ค๋ณด๋“œ๋ฅผ ๋‚ด๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. ๊ทธ์ค‘์—์„œ๋„ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด FocusManager.instance.primaryFocus?.unfocus();์™€

FocusScope.of(context).unfocus();์ด ์žˆ๋‹ค.

์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์ด ๋‘ ๋ฐฉ์‹์˜ ์ฐจ์ด์ ๊ณผ ๊ฐ๊ฐ์˜ ํŠน์ง•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์‚ดํŽด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

 


1. FocusManager.instance.primaryFocus?.unfocus();

์ด ๋ฐฉ์‹์€ ํ˜„์žฌ ํ™œ์„ฑํ™”๋œ ์ž…๋ ฅ ํฌ์ปค์Šค๋ฅผ ์ „์—ญ์ ์œผ๋กœ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. Flutter์˜ FocusManager๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด์˜ ํฌ์ปค์Šค ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ primaryFocus๋ฅผ ํ†ตํ•ด ํ˜„์žฌ ํ™œ์„ฑํ™”๋œ ํฌ์ปค์Šค๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ฐ’์„ ์‚ฌ์šฉํ•ด ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•˜๋ฉด ํ‚ค๋ณด๋“œ๊ฐ€ ๋‚ด๋ ค๊ฐ€๋Š” ์›๋ฆฌ๋‹ค.

ํŠน์ง•

  • ์ „์—ญ์ ์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค: ํŠน์ • context์™€ ๊ด€๊ณ„์—†์ด ํ˜„์žฌ ํ™œ์„ฑํ™”๋œ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•œ๋‹ค.
  • ๊ฐ„๋‹จํ•˜๋‹ค: ์ฝ”๋“œ ํ•œ ์ค„๋กœ ์†์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์žฅ์ 

  • ์–ด๋””์„œ๋“  ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค. BuildContext๊ฐ€ ํ•„์š” ์—†์œผ๋‹ˆ ์ „์—ญ์ ์ธ ํ‚ค๋ณด๋“œ ํ•ด์ œ ๋™์ž‘์„ ๊ตฌํ˜„ํ•  ๋•Œ ๊ฐ„ํŽธํ•˜๋‹ค.
  • ํ˜„์žฌ ํฌ์ปค์Šค ์ƒํƒœ๋ฅผ ์ง์ ‘ ๊ฐ€์ ธ์™€ ํ•ด์ œํ•˜๋ฏ€๋กœ ์ง๊ด€์ ์ด๋‹ค.

๋‹จ์ 

  • ํŠน์ • ์œ„์ ฏ ํŠธ๋ฆฌ ๋‚ด์—์„œ๋งŒ ๋™์ž‘์„ ์ œํ•œํ•˜๊ฑฐ๋‚˜ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ œ์–ดํ•˜๊ธฐ ์–ด๋ ต๋‹ค.
FocusManager.instance.primaryFocus?.unfocus();

 

 


2. FocusScope.of(context).unfocus();

์ด ๋ฐฉ์‹์€ ํŠน์ • ์œ„์ ฏ ํŠธ๋ฆฌ์™€ ๊ด€๋ จ๋œ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•  ๋•Œ ์‚ฌ์šฉ๋œ๋‹ค. Flutter์—์„œ๋Š” ํฌ์ปค์Šค๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฒ”์œ„(scope)๋ผ๋Š” ๊ฐœ๋…์ด ์žˆ๋Š”๋ฐ, FocusScope๋Š” ํ•ด๋‹น ๋ฒ”์œ„ ์•ˆ์˜ ๋ชจ๋“  ํฌ์ปค์Šค๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค. ์ด ๋ฒ”์œ„ ๋‚ด์˜ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•˜๋ฉด ํ‚ค๋ณด๋“œ๊ฐ€ ๋‚ด๋ ค๊ฐ€๋Š” ๋ฐฉ์‹์ด๋‹ค.

ํŠน์ง•

  • ๋กœ์ปฌํ•˜๊ฒŒ ๋™์ž‘ํ•œ๋‹ค: ํŠน์ • ์œ„์ ฏ ํŠธ๋ฆฌ์˜ context๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ด๋‹น ํŠธ๋ฆฌ ๋‚ด์˜ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•œ๋‹ค.
  • ํฌ์ปค์Šค ์Šค์ฝ”ํ”„๋ฅผ ์ œ์–ดํ•œ๋‹ค: ์—ฌ๋Ÿฌ ์œ„์ ฏ ๊ฐ„ ํฌ์ปค์Šค๋ฅผ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์กฐ์ž‘ํ•˜๊ฑฐ๋‚˜ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.

์žฅ์ 

  • ํŠน์ • ๋ฒ”์œ„์˜ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•  ์ˆ˜ ์žˆ์–ด, ์—ฌ๋Ÿฌ ์ž…๋ ฅ ํ•„๋“œ๊ฐ€ ์žˆ๋Š” ํ™”๋ฉด์—์„œ๋„ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.
  • FocusScope๋ฅผ ํ™œ์šฉํ•˜๋ฉด ํฌ์ปค์Šค๋ฅผ ์ „ํ™˜ํ•˜๊ฑฐ๋‚˜ ํŠน์ • ์กฐ๊ฑด์—์„œ๋งŒ ๋™์ž‘ํ•˜๋„๋ก ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋‹จ์ 

  • ํ˜ธ์ถœํ•˜๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ BuildContext๊ฐ€ ํ•„์š”ํ•˜๋‹ค.
  • ์ „์—ญ์ ์œผ๋กœ ํ‚ค๋ณด๋“œ๋ฅผ ์ˆจ๊ธฐ๊ธฐ์—๋Š” ์ ํ•ฉํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

์‚ฌ์šฉ ์˜ˆ์‹œ

FocusScope.of(context).unfocus();

 

 

 


์ฃผ์š” ์ฐจ์ด์ 

 

ํŠน์ง• FocusManger.instance FocusScope.of(context)
๋™์ž‘ ๋ฒ”์œ„ ์ „์—ญ์ ์œผ๋กœ ํ™œ์„ฑํ™”๋œ ํฌ์ปค์Šค ํŠน์ • context ๋‚ด์˜ ํฌ์ปค์Šค
context ํ•„์š” ์—ฌ๋ถ€ ํ•„์š” ์—†์Œ ํ•„์š”
๋Œ€์ƒ ํ˜„์žฌ ํ™œ์„ฑํ™”๋œ ํฌ์ปค์Šค ํ•ด๋‹น ์ปจํ…์ŠคํŠธ์™€ ์—ฐ๊ฒฐ๋œ ํฌ์ปค์Šค
์ฃผ์š” ํ™œ์šฉ ์ „์—ญ ํ‚ค๋ณด๋“œ ํ•ด์ œ ํŠน์ • ์œ„์ ฏ ํŠธ๋ฆฌ ๋‚ด ํฌ์ปค์Šค ํ•ด์ œ
์„ธ๋ถ€ ์ œ์–ด ๊ฐ€๋Šฅ ์—ฌ๋ถ€ ๋ถˆ๊ฐ€๋Šฅ ๊ฐ€๋Šฅ

 


 

์–ธ์ œ ์–ด๋–ค ๋ฐฉ์‹์„ ์จ์•ผ ํ• ๊นŒ?

FocusManager.instance.primaryFocus?.unfocus();

  • ์ „์—ญ์ ์œผ๋กœ ํ‚ค๋ณด๋“œ๋ฅผ ๋‚ด๋ฆฌ๊ณ  ์‹ถ์„ ๋•Œ.
  • ํŠน์ • ์œ„์ ฏ์ด๋‚˜ ํ™”๋ฉด๊ณผ ๊ด€๊ณ„์—†์ด ํ™œ์„ฑํ™”๋œ ํฌ์ปค์Šค๋ฅผ ๋น ๋ฅด๊ฒŒ ํ•ด์ œํ•ด์•ผ ํ•  ๋•Œ.

FocusScope.of(context).unfocus();

  • ํŠน์ • ํ™”๋ฉด์ด๋‚˜ ์œ„์ ฏ ํŠธ๋ฆฌ ๋‚ด์—์„œ๋งŒ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•˜๊ณ  ์‹ถ์„ ๋•Œ.
  • ์—ฌ๋Ÿฌ TextField๊ฐ€ ์žˆ๋Š” ํ™”๋ฉด์—์„œ ๋กœ์ปฌํ•˜๊ฒŒ ํฌ์ปค์Šค๋ฅผ ๊ด€๋ฆฌํ•ด์•ผ ํ•  ๋•Œ.
  • FocusScope๋ฅผ ํ™œ์šฉํ•ด ํฌ์ปค์Šค๋ฅผ ์ „ํ™˜ํ•˜๊ฑฐ๋‚˜ ์„ธ๋ฐ€ํ•œ ์ œ์–ด๊ฐ€ ํ•„์š”ํ•  ๋•Œ.

 

๊ฒฐ๋ก 

๋‘ ๋ฐฉ์‹ ๋ชจ๋‘ ํ‚ค๋ณด๋“œ๋ฅผ ๋‚ด๋ฆฌ๋Š” ๋ฐ ์ž์ฃผ ์‚ฌ์šฉ๋˜์ง€๋งŒ, ์ƒํ™ฉ์— ๋”ฐ๋ผ ์ ์ ˆํ•œ ๋ฐฉ์‹์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

์ „์—ญ์ ์œผ๋กœ ๊ฐ„๋‹จํžˆ ํฌ์ปค์Šค๋ฅผ ํ•ด์ œํ•˜๋ ค๋ฉด FocusManager.instance.primaryFocus?.unfocus();๊ฐ€ ๋” ์ ํ•ฉํ•˜๋‹ค.

๋ฐ˜๋ฉด, ํŠน์ • ์ปจํ…์ŠคํŠธ ๋‚ด์—์„œ๋งŒ ๋™์ž‘ํ•˜๋„๋ก ์ œํ•œํ•˜๋ ค๋ฉด FocusScope.of(context).unfocus();๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋งž๋‹ค.

Flutter ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ์ด ๋‘ ๊ฐ€์ง€๋ฅผ ์ ์ ˆํžˆ ํ™œ์šฉํ•˜๋ฉด ํ‚ค๋ณด๋“œ ์ œ์–ด๊ฐ€ ํ›จ์”ฌ ์ˆ˜์›”ํ•ด์งˆ ๊ฒƒ์ด๋‹ค.