Flutter Basic Widget Structure

Flutter 기본 위젯 골격 구조

// Scaffold : 화이트 캔버스의 역할
return Scaffold(
	// 화이트 캔버스 상단 바를 생성함
	appBar: AppBar(
		title: 'Test APP',
	),
	// 캔버스의 전역적인 배경 색상
	backgroundColor: Colors.pink[100],
	// SafeArea : 모바일 기기의 전반적인 사용 공간을 잡아주는 역할
	body: SafeArea(
	// SafeArea 에서 bottom 영역은 제외
	bottom: false,
	// Container : html 에서 Div와 같은 역할로 생각
	child: Container(
	  // MediaQuery.of : 요청기기의 Spec을 가져올 수 있는 듯
	  width: MediaQuery.of(context).size.width,
	  // Column : 감싸져 있는 위젯을 세로형으로 영역을 나눌 수 있는 위젯
	  child: Column(
	    //column children의 간격을 지정해 줄 수 있는 기능
	    mainAxisAlignment: MainAxisAliment.spaceBetween,
        
	    // Column & Row 는 Children 을 기본적으로 사용할 수 있음
	    children: [
	        // colums 의 비율을 전체적으로 가져갈 수 있도록 해주는 위젯
	        Expanded: (
	            child: _TopPart(
	                selectedDate: selectedDate,
	                onPressed: onHeartPressed,
	            ),
	        ),
	        _BottomPart(),
	    ],
	  ),
	),
));

 

mainAxisAlignment - 주축정렬(전체를 잡아둔다)

• start : 시작
• end : 끝
• center : 가운데
• spaceBetween : 위젯과 위젯의 사이가 동일하게 배치
• spaceEvenly : 위젯을 같은 간격으로 배치하지만 끝과 끝에도 빈간격으로 시작
• spaceAround : 위젯을 같은 간격으로 배치하지만 끝과 끝의 간격은 반간격으로 시작

CrossAxisAlignment - 반대축 정렬(기본값은 center)

• stretch : 최대한으로 늘린다.

MediaQuery.*of*(context) 는 클라이언트 정보를 가져오는듯

MainAxisSize - 주축크기

• max : 최대
• min : 최소

Expanded / Flexible - Row 나 Column Children 위젯에서만 사용가능한 속성

Expended - 남아있는 공간을 전부 먹어버린다.

• flex : 남아 있는 공간을 비율로 나눌 수 있다. - 기본값 1

Flexible - 남는 공간은 모두 버리고, 설정한 값으로만 세팅한다