TIL: Flutter | [노마드코더] Cards, Icon and Transforms - 230108

Lumpen·2023년 1월 8일
0

Flutter

목록 보기
11/17

withOpacity(0.8) 등 계산이 필요한 클래스를 사용하면
컴파일 전에 값을 알 수 없기 때문에
const 를 사용할 수 없게 된다

Container 에 어떤 스타일도 적용하지 않는다면
경고 메시지가 뜬다..ㅎ

플러터로 아직 엣지 디테일을 주기엔 어렵다

마크업만 하니까 굉장히 쉬운 것 같기도 하고...

Icon

Icon 위젯의 Icons 에는 굉장히 많은 아이콘들이 이미 있다

 const Icon(
 	Icons.euro_rounded,
    color: Colors.white,
    size: 98,
),

transformationWidget

css 의 position, transform 이 합쳐진 느낌에
사이즈 조절도 가능하다
3차원으로 만드는..
Transform.scale() 을 사용하면 사이즈 조절이 되고
Transform.translate() 를 사용하면 위치를 조절할 수 있다
Transform.rotate() 로 각도를 기울일 수도 있다

  Transform.scale(
  	scale: 5,
    child: const Icon(
    Icons.euro_rounded,
    color: Colors.white,
    size: 98,
),

icon 을 Euro Text 가 있는 박스 안에 선언했지만
3차원으로 변환되어 다른 영역도 침범할 수 있게 된다

Transform.scale(
	scale: 2.2,
    child: Transform.translate(
    	offset: const Offset(8, 15),
    	child: const Icon(
    		Icons.euro_rounded,
    		color: Colors.white,
    		size: 88,
    	),
  	),
),

이런식으로 Transform.scale() 로 영역에 대한 크기를 키우고
Transform.translate() 로 위치를 조절할 수도 있다

플러터는 이렇게 자유롭게 화면을 조절할 수 있는 부분이
가장 큰 강점이다
원하는 모든 것을 엔진이 해준다

가장 큰 단점인 코드푸쉬가 언제 될지
보통 배포 후 수 일에서 수 주가 걸린다는데..

clipBehavior

css 의 overflow 속성과 비슷한 역할로
Conatiner의 속성

Container(
	clipBehavior: Clip.hardEdge,
    child: [...]
);

error

에러가 뜨면 에뮬, 시뮬레이터의 연결이 종료되기 때문에
restart 해줘야한다

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글