๋ชฉ๋กdart (15)

ram2 ๐Ÿš—

[Flutter] FractionallySizedBox class ์ •๋ฆฌ

FractionallySizedBox class FractionallySizedBox class๋Š” ์ƒ์œ„ ๋ถ€๋ชจ์˜ ์‚ฌ์ด์ฆˆ ๋น„์œจ์— ๋งž๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰ ๋””์ž์ธ์˜ ํฌ๊ธฐ๊ฐ€ ์ƒ๋Œ€์ ์ด์–ด์•ผ ํ•  ๋•Œ ํฌ๊ธฐ๋ฅผ ์ƒ์œ„ ๋ถ€๋ชจ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๋น„์œจ๋กœ ํ‘œํ˜„ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. example) FractionallySizedBox๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ƒ์œ„ ๋ถ€๋ชจ์˜ ์‚ฌ์ด์ฆˆ ๋น„์œจ์„ ์ง€์ •ํ•˜์—ฌ child์˜ ํฌ๊ธฐ๋ฅผ ์ •ํ•˜๊ณ  ์žˆ๋‹ค. ์ฝ”๋“œ์—์„œ 0.7์€ 70%๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์ฆ‰ ์ƒ์œ„ ๋ถ€๋ชจ ์‚ฌ์ด์ฆˆ์˜ 70%๋งŒํผ child๋ฅผ ๋งŒ๋“ค๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. widthFactor์ฒ˜๋Ÿผ heightFactor์„ ์‚ฌ์šฉํ•˜์—ฌ ๋†’์ด์˜ ๋น„์œจ๋„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด์ฒ˜๋Ÿผ FractionallySizedBox class๋Š” ์ƒ์œ„ ๋ถ€๋ชจ์˜ ์‚ฌ์ด์ฆˆ ๋น„์œจ๋กœ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

๐Ÿ’ง flutter 2022. 7. 6. 00:43
[Flutter] FittedBox Class ์ •๋ฆฌ

FittedBox Class child ๋˜๋Š” ๋‚ด์šฉ์˜ ์–‘์— ๋”ฐ๋ผ ํฌ๊ธฐ๊ฐ€ ํ™•์žฅ๋˜๋Š” ์œ„์ ฏ์— ์˜ํ•ด ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ๊ฐ€ ๋ฐœ์ƒ๋˜๋Š” ๊ฒฝ์šฐ FittedBox๋กœ ๊ฐ์‹ธ๋ฉด ์ „์ฒด ํฌ๊ธฐ๋ฅผ ๋„˜์ง€ ์•Š๊ฒŒ ๋˜๋ฉฐ ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ๊ฐ€ ๋ฐฉ์ง€๋œ๋‹ค. alignment๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ๋ฐฐ์—ด๋กœ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค. example) ์‚ฌ์šฉ ์ „) ์‚ฌ์šฉ ํ›„) ์ด์ฒ˜๋Ÿผ ๋ถ€๋ชจ์—์„œ ์ฃผ์–ด์ง„ ํฌ๊ธฐ ๋‚ด์— child๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค. fittedBox๋Š” ๋ถ€๋ชจ ํฌ๊ธฐ์— ๋งž์ถฐ child ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. BoxFit.cover๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ถ€๋ชจ ํฌ๊ธฐ์— ๋”ฑ ๋งž๊ฒŒ child ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฐธ๊ณ ) https://medium.com/flutter-community/flutter-widgets-boxes-part-2-the-whol..

๐Ÿ’ง flutter 2022. 7. 6. 00:43