상세 컨텐츠

본문 제목

Flutter - 자주 사용하는 위젯 & 클래스

Flutter

by devTak 2024. 1. 18. 09:47

본문

반응형

페이지 이동 - Forward

// push 를 하게되면 state 위젯을 init 부터 새로 생성한다.
Navigator.of(context).push<int>(
	MaterialPageRoute(builder: (BuildContext context) {
		return "스크린위젯명";
	})
)

페이지 이동 - Backward

// pop 을 하게되면 이전 페이지로 이동하고 현재 stateFul 클래스는 dispose 된다.
Navigator.of(context).pop();

패딩 - Padding

Padding(
	padding: EdgeInsets.{option},
	child: Cloumn()..
)

컬럼 / 로우 - Column Row

Column(
	// 세로 children 들의 여백 옵션
	mainAsixAlignment: MainAsixAlignment.{option},
	// 가로 children 들의 여백 옵션
	crossAxisAlignment : CrossAsixAlignment.{option}, // row mainAsixAlignment(stretch)
	children: []
)

Row(
	// 가로 children 들의 여백 옵션
	mainAsixAlignment: MainAsixAlignment.{option},
	// 세로 children 들의 여백 옵션
	crossAxisAlignment : CrossAsixAlignment.{option}, // cloumn mainAsixAlignment
	children: []
)

클라이언트 기기 안전패딩 - SafeArea

SafeArea(
	// 아래쪽은 적용하지 않음
	botton: false,
	child: ..
)

슬라이드 - Slider

Slider(
	value: ..,
	min: ..,
	max: ..,

	// 콜백 함수은 ValueChanged<double>?
	onChanged: () {
		...
	}
)

버튼 - ElevatedButton

ElevatedButton(
	// 콜백 함수은 VoidCallback
	onPressed: () {
		...
	}
	style: ElevatedButton.StyleForm(
		primary: Color();
	),
)

버튼 - IconButton

IconButton(
	// 콜백 함수은 VoidCallback
	onPressed: () {
		...
	},
	iconSize: 60.0,
	icon: Icon(
		Icons.{option},
		color: Color(),
	),
)

사이즈 최대확장 - Expanded

Expanded(
	child: Column(
		...
	)
)

캔버스 - Scaffold

Scaffold(
	backgroundColor: Color(),
	body: ..{}
)

영역그룹핑 - Container

Container(
	child: ..
)

클라이언트 환경정보(추측) - MediaQuery

MediaQuery.of(context).{}

Asset 이미지 - Image

Image.asset('asset/img/test.png');
반응형

'Flutter' 카테고리의 다른 글

Flutter Basic Widget Structure  (0) 2024.01.17
Flutter 지원 클래스 / Stateless, Stateful Life Cycle  (0) 2024.01.16

관련글 더보기