ram2 ๐Ÿš—

Padding class ๋ณธ๋ฌธ

๐Ÿ’ง flutter

Padding class

coram22 2022. 7. 6. 00:50
728x90
๋ฐ˜์‘ํ˜•

Padding class

์ •ํ•ด์ง„ padding์— ๋งž์ถฐ child๋ฅผ ๋„ฃ๋Š” ์œ„์ ฏ์ด๋‹ค.

์œ„ ์‚ฌ์ง„์€ ๊ณต๊ฐ„์ด ์ „ํ˜€ ์—†์–ด ๋‹ต๋‹ตํ•ด ๋ณด์ด์ง€ ์•Š์€๊ฐ€?
๊ฐ๊ฐ์˜ ์‚ฌ๊ฐํ˜• ์‚ฌ์ด์— ๊ณต๊ฐ„์„ ์กฐ๊ธˆ ๋‘๋ฉด ์–ด๋–จ๊นŒ?

์ด๋ ‡๊ฒŒ ๊ณต๊ฐ„ ์ฆ‰ ์—ฌ๋ฐฑ์ด ํ•„์š”ํ•  ๋•Œ ์šฐ๋ฆฌ๋Š” padding ์œ„์ ฏ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.
Padding ์œ„์ ฏ์„ ์‚ฌ์šฉํ•˜๋ฉด ๊ณต๊ฐ„์„ ๋งŒ๋“ค์–ด ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
๋‹ค์Œ์€ padding ์œ„์ ฏ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ณต๊ฐ„์„ ๋งŒ๋“  ๊ฒฐ๊ณผ์ด๋‹ค.



๊ทธ๋ ‡๋‹ค๋ฉด padding์€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ๊นŒ?

์ด๋ ‡๊ฒŒ ์–ด๋Š ๋ถ€๋ถ„์— ์–ผ๋งˆ๋‚˜ ๊ณต๊ฐ„์„ ๋‘˜ ๊ฒƒ์ธ์ง€ ์ •ํ•˜๊ณ , padding์ด ์ ์šฉ๋  child๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

padding์„ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์–‘ํ•˜๋‹ค.
์ด๋Š” EdgeInsets์˜ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ๋ฐฉ๋ฒ•์ด ๋‚˜๋‰œ๋‹ค.

1. EdgeInsets.fromLTRB()

LTRB๋Š” ์ˆœ์„œ๋Œ€๋กœ Left, Top, Right, Bottom์˜ ์•ž ๋ฌธ์ž๋ฅผ ๋”ฐ์˜จ ๊ฒƒ์ด๋‹ค.
EdgeInsets.fromLTRB๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›ํ•˜๋Š” child์˜ ์™ผ์ชฝ, ์œ„, ์˜ค๋ฅธ์ชฝ, ์•„๋ž˜ ๊ฐ๊ฐ์˜ ์—ฌ๋ฐฑ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์˜ˆ)


2. EdgeInsets.all()

๋ชจ๋“  ๋ถ€๋ถ„(์™ผ์ชฝ, ์˜ค๋ฅธ์ชฝ, ์œ„์ชฝ, ์•„๋ž˜์ชฝ)์— ๊ฐ™์€ ํฌ๊ธฐ์˜ ์—ฌ๋ฐฑ์„ ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.



3. EdgeInsets.only()

ํŠน์ • ๋ถ€๋ถ„์— ์ง€์ •ํ•œ ๊ฐ’์˜ ํฌ๊ธฐ๋งŒํผ ์—ฌ๋ฐฑ์„ ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

์˜ˆ)

EdgeInsets.only(top: 30, bottom: 20)


์ด๋Ÿฐ์‹์œผ๋กœ left, top, bottom, right ์ค‘ ํŠน์ •ํ•œ ๋ถ€๋ถ„์— ๊ฐ๊ฐ ๋‹ค๋ฅธ ๊ฐ’์„ ์—ฌ๋ฐฑ์œผ๋กœ ์ค„ ์ˆ˜ ์žˆ๋‹ค.



4. EdgeInsets.symmetric()

์„ธ๋กœ์™€ ๊ฐ€๋กœ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์—ฌ๋ฐฑ ๊ฐ’์„ ์ œ์‹œํ•œ๋‹ค.


horizontal= ๊ฐ€๋กœ
vertical= ์„ธ๋กœ
์ด๋ ‡๊ฒŒ horizontal์— ๊ฐ’์„ ์ง€์ •ํ•˜๋ฉด ์™ผ์ชฝ๊ณผ ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ์ด ์ •ํ•ด์ง€๊ณ ,
vertical์— ๊ฐ’์„ ์ง€์ •ํ•˜๋ฉด ์œ„์ชฝ๊ณผ ์•„๋ž˜์ชฝ ์—ฌ๋ฐฑ์ด ์ •ํ•ด์ง„๋‹ค.





5. EdgeInsets.fromSTEB

STEB๋Š” ์ˆœ์„œ๋Œ€๋กœ Start, Top, End, Bottom์˜ ์•ž ๋ฌธ์ž๋ฅผ ๋”ฐ์˜จ ๊ฒƒ์ด๋‹ค.
์ด๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์™ผ์ชฝ์ด start, ์˜ค๋ฅธ์ชฝ์ด end๊ฐ€ ๋œ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•

'๐Ÿ’ง flutter' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

flutter album ์ ‘๊ทผ  (0) 2022.07.08
[Flutter] no device  (0) 2022.07.08
[Flutter] Expanded class  (0) 2022.07.06
[Flutter] Transform class ์ •๋ฆฌ  (0) 2022.07.06
[Flutter] SizedOverflowBox class ์ •๋ฆฌ  (0) 2022.07.06