ram2 ๐Ÿš—

[Flutter] Transform class ์ •๋ฆฌ ๋ณธ๋ฌธ

๐Ÿ’ง flutter

[Flutter] Transform class ์ •๋ฆฌ

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

Transform class

transform class๋Š” ์ง€๊ธˆ๊นŒ์ง€ ๋ณธ ์œ„์ ฏ๋“ค ์ค‘ ๊ฐ€์žฅ ์žฌ๋ฐŒ๊ณ  ์‹ ๊ธฐํ•˜๊ฒŒ ๋‹ค๊ฐ€์™”๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ํ”ํžˆ ํŒŒ์›Œํฌ์ธํŠธ๋‚˜, ์˜์ƒ, ์•ฑ ์‚ฌ์šฉ ์ค‘ ๋ดค์„ ๋ฒ•ํ•œ ๊ธฐ๋Šฅ๋“ค์ด transform ์œ„์ ฏ์„ ์‚ฌ์šฉํ•œ ๊ฒƒ์ด๋‹ค.

์•„๋ž˜ ์ฒจ๋ถ€ํ•œ ์˜์ƒ์„ ๋ณด๋ฉด ๋‚˜๋„ ๋ชจ๋ฅด๊ฒŒ '์šฐ์™€' ํ•˜๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค.

transform์—๋Š” ์ •๋ง ๋งŽ์€ ๊ธฐ๋Šฅ๋“ค์ด ์žˆ๋Š”๋ฐ, ๊ทธ ์ค‘ 3๊ฐœ์˜ ๊ธฐ๋Šฅ์„ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•œ๋‹ค.

1. Transform.rotate

  • child๋ฅผ ์›ํ•˜๋Š” ๊ฐ์œผ๋กœ ํšŒ์ „ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

2. Transform.scale

  • child์˜ ํฌ๊ธฐ๋ฅผ ์›ํ•˜๋Š” ํฌ๊ธฐ๋กœ ์กฐ์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

3. Transform.translate

  • child์˜ ์œ„์น˜๋ฅผ ์›ํ•˜๋Š” ์œ„์น˜๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์ด ์™ธ์—๋„ skew, 3D perspective ๋“ฑ ์šฐ๋ฆฌ๊ฐ€ ์‹ค์ œ๋กœ ๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๊ฒƒ๋“ค๋„ transform ์œ„์ ฏ์„ ํ†ตํ•ด ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

์ฐธ๊ณ ์˜์ƒ) https://youtu.be/9z_YNlRlWfA

 
728x90
๋ฐ˜์‘ํ˜•

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

Padding class  (0) 2022.07.06
[Flutter] Expanded class  (0) 2022.07.06
[Flutter] SizedOverflowBox class ์ •๋ฆฌ  (0) 2022.07.06
[Flutter] OverflowBox class ์ •๋ฆฌ  (0) 2022.07.06
[Flutter] Offstage class ์ •๋ฆฌ  (0) 2022.07.06