- ๋ค๋น๊ฒ์ด์ ํญ๋ฐ๋ฅผ Stateful ์์ ฏ์ผ๋ก ๋ง๋ค์ด ํญํ ์ ํ๋์ ์์ด์ฝ ์ด๋ฏธ์ง๋ก ๋ฐ๊ฟ ์ ์์์ผ๋
- ๊ฐ๊ธ์ Stateless ์์ ฏ์ ์ฌ์ฉํ์ฌ ์ต์ ํ ์ํค๊ณ ์ถ์๋ค.
- Statless ์์ ฏ์ ์ฌ์ฉํ๋ฉด์ ์ด๋ฏธ์ง์ ์์ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์.
์ฐธ๊ณ ๋งํฌ: https://api.flutter.dev/flutter/dart-ui/BlendMode.html
Flutter์ UI๋ ๋๋ง ๊ณผ์ ์ดํดํ๊ธฐ
Flutter์ UI๋ ๋๋ง ๊ณผ์ ์ ์๋์ ๊ฐ๋ค
- ๊ฐ๋ฐ์๊ฐ ์์ฑํ ์ฝ๋๋ฅผ ํตํด ์์ ฏ ํธ๋ฆฌ๊ฐ ์์ฑ๋๋ค.
- ์์ ฏ ํธ๋ฆฌ๊ฐ ๋น๋๋ ํ, Flutter๋ ์ํ์ ์์ ฏํธ๋ฆฌ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ๋ Element Tree, ๊ทธ๋ฆฌ๊ณ ์์ ฏ์ ์์น์ ํฌ๊ธฐ ์ ๋ณด๋ฅผ ๊ฐ์ง๊ณ ์๋ Render Tree๋ฅผ ๋ง๋ ๋ค.
- ์์์์ ฏ๋ถํฐ ํ์์์ ฏ๊น์ง ์ ์ฝ์กฐ๊ฑด์ด ์กํ๊ณ , ๋ค์ ํ์๋ถํฐ ์์๊น์ง ์ฌ์ด์ฆ๊ฐ ๊ฒฐ์ ๋์ด ๋ ์ด์์์ด ์กํ๋ฉด Render Widget์์๋ paint ๋จ๊ณ๋ฅผ ์งํํ๋ฉด์ ๋ ์ด์์์ด ์กํ ์์ ฏ์ ๋ด๋ถ ๊ตฌํ์ ์ฑ์ฐ๊ฒ ๋๋ค.
- Paint phase ๋ ์์๋ถํฐ ํ์๋ก ์งํ๋๋ฉฐ ๊ฐ ์์ ฏ์ ๊ทธ๋ํฝ ๋ด์ฉ์ Canvas์ ๊ทธ๋ฆฌ๊ฒ ๋๋ค.
- ํ์ธํธ ๋จ๊ณ๊ฐ ๋๋๋ฉด ๋ค์์ผ๋ก๋ Compositioning phase ๋ก ๋์ด๊ฐ๋ค. ์ฌ๊ธฐ์๋ ๋ง๋ค์ด์ง ๋ ์ด์ด๋ค์ด ํฉ์ณ์ ์ต์ข ์ด๋ฏธ์ง๋ฅผ ์์ฑํ๊ฒ๋๋๋ฐ, ์ด๊ณณ์์ Blend Mode๊ฐ ์ ์ฉ๋๋ค.
ColorFiltered ์ BlendMode ์ดํดํ๊ธฐ
- BlendMode ํ์ ์ Compositioning Phase์์ ๋ ๊ฐ์ง ๊ฐ์ฒด๊ฐ ์ด๋ป๊ฒ ํผํฉ๋๋์ง ๊ฒฐ์ ํ๋ ๋ฐฉ๋ฒ์ enum์ผ๋ก ๋์ดํด๋ ํ์ ์ด๋ค.
- ์ฌ๊ธฐ์ ๋๊ฐ์ง ๊ฐ์ฒด๋ Source Object์ Destination Object๋ก ์ ์๋ ์๋ก๊ทธ๋ฆฌ๋ ค๋ ๊ทธ๋ํฝ ์์, ํ์๋ ์ด๋ฏธ ์บ๋ฒ์ค์ ์กด์ฌํ๋ ๊ทธ๋ํฝ์์์ด๋ค.
- BlendMode์ enum ์ ์ ์๋ ๋ฐฉ๋ฒ์ ํ๋ ์ ํํ์ฌ ๋ ๊ฐ์ฒด๋ฅผ ์ด๋ป๊ฒ ๊ฒฐํฉํด์ UI๋ฅผ ๋ณด์ฌ์ค ๊ฒ์ธ์ง ๊ฐ๋ฐ์๊ฐ ์ ์ํ ์ ์๋ค.
- ์๋ฅผ๋ค์ด BlendMode.multiply๋ฅผ ์ ํํ๋ฉด ๋ ๊ฐ์ฒด์ ์์์ ๊ณฑํ์ฌ ๋ ์ด๋์ด ์์์ ์์ฑํ๋ค. ๊ฒฐ๊ณผ์ ์ผ๋ก ๋ ์ฌ๊ฐํ์ด ๊ฒน์น๋ ์์ญ์ ๋ ์ด๋์ด ์์์ผ๋ก ๋ํ๋๋ค.
- ์ด๋ฌํ BlendMode ํ์ ์ ColorFiltered ํด๋์ค ๋ด๋ถ์ ์ ์ธ๋์ด์๋ค. ๋ฐ๋ผ์ ColorFiltered ํด๋์ค๋ฅผ ํตํด ์์ ฏ์ ๋ค์ํ ํํฐํจ๊ณผ๋ฅผ ์ ์ฉ์ํฌ ์ ์๋ค.
- Colorfiltered ํด๋์ค๋ฅผ ํตํด BlendMode enumํ์ ์ ์ ๊ทผํ์ฌ srcIn ์ ์ค์ ํด์ค๋ค.
- srcIn๋ฅผ ์ฑํํ๊ฒ๋๋ฉด, ๋ ์ด๋ฏธ์ง๊ฐ ๊ฒน์น๋ ๋ถ๋ถ์์๋ง Source Object๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ญํ ์ ํ๋ค.
- ์ฌ๊ธฐ์ Destination Object๋ ๋ ๋๋ง๋์ง ์๊ณ ๋จ์ํ ๋ง์คํฌ๋ก ์ทจ๊ธ๋๋ค.
- ๋์ ์ด๋ฏธ์ง์ ์์ ์ฑ๋์ ๋ฌด์๋๊ณ ์ค์ง ๋ถํฌ๋ช ๋(opacity)๋ง ์ํฅ์ ๋ฏธ์น๋ ํจ๊ณผ๋ฅผ ์ป์ ์ ์๋ค.
'๐ฆ Flutter' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Tabbar ์ ๋ ฌ ๋ฐ ์ฌ๋ฐฑ์กฐ์ ์ด ์๋๋ ์ด์ (0) | 2024.08.31 |
---|---|
Warning: integration_test plugin was not detected. ์ด์ (0) | 2024.08.14 |
Flutter 3.24 ์ ๋ฐ์ดํธ! ์ด์ shared preference ์ฌ์ฉํด๋ ๋ฉ๋๋ค! (0) | 2024.08.07 |
Freezed ํจํค์ง ์ฌ์ฉ์ด์ ์์๋ณด๊ธฐ (0) | 2024.08.03 |
Don't use 'BuildContext's across async gaps ์ด์ (0) | 2024.08.01 |