๋ชฉ๋กFLUTTER (21)

ram2 ๐Ÿš—

[Flutter] IntrinsicHeight class ์ •๋ฆฌ

IntrinsicHeight class ์ด๋ฆ„์„ ๋ณด์ž๋งˆ์ž Intrinsic์ด ๋ฌด์Šจ ์˜๋ฏธ์ง€? ํ•˜๋Š” ์งˆ๋ฌธ์ด ์ƒ๊ฒผ๋‹ค. ์ฐพ์•„๋ณด๋‹ˆ Intrinsic๋Š” ๊ณ ์œ ํ•œ, ๋ณธ์งˆ์ ์ธ ์ด๋ผ๋Š” ๋œป์ด๋‹ค. ๋œป ๊ทธ๋Œ€๋กœ IntrinsicHeight๋Š” child์˜ ๊ณ ์œ  ๋†’์ด์— ๋งž์ถฐ child์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ•˜๋Š” ์œ„์ ฏ์ด๋‹ค. ์ด ์œ„์ ฏ์€ ๋†’์ด๊ฐ€ ์ œํ•œ๋˜์ง€ ์•Š๊ณ  ๋ฌดํ•œ ํ™•์žฅ์„ ์‹œ๋„ํ•˜๋Š” child๋ฅผ ํ•„์š”๋กœ ํ•  ๋•Œ ์œ ์šฉํ•˜๋‹ค. ์ด ์œ„์ ฏ์ด child์—๊ฒŒ ์ „๋‹ฌํ•˜๋Š” constraints๋Š” ๋ถ€๋ชจ์˜ constraints๋ฅผ ์ง€ํ‚ค๊ธฐ ๋•Œ๋ฌธ์— ๋งŒ์•ฝ constraints๊ฐ€ child์˜ ์ตœ๋Œ€ ๊ณ ์œ  ๋†’์ด๋ฅผ ํฌํ•จํ•  ๋งŒํผ ์ถฉ๋ถ„ํžˆ ํฌ์ง€ ์•Š์œผ๋ฉด ๋น„๊ต์  ๋‚ฎ์€ ๋†’์ด๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋œ๋‹ค. ๋ฐ˜๋Œ€๋กœ, ์ตœ์†Œ ๋†’์ด constraints๊ฐ€ child์˜ ์ตœ๋Œ€ ๊ณ ์œ  ๋†’์ด๋ณด๋‹ค ํฌ๋ฉด ๋น„๊ต์  ๋” ๋งŽ์€ ๋†’์ด๊ฐ€ ์ง€์ •๋œ..

๐Ÿ’ง flutter 2022. 7. 6. 00:44
[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