flutter

flutter 공부3

Daekyue 2023. 1. 28. 00:22

- 여러 개의 container 사용 및 속성

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.cyanAccent,
        body: SafeArea(
          child: Column(
            mainAxisSize: MainAxisSize.min,	// column의 공간할당량을 필요한만큼으로 제한
            // verticalDirection: VerticalDirection.up   container를 역순 배열 3,2,1 순으로
            //mainAxisAlignment: MainAxisAlignment.center  container들이 수직축의 center에서부터 정렬
            // 				.spaceEvenly : 가운데에서 적당히 정렬됨
            //				.spaceBetween : 젤 위에 하나 가운데 하나 아래 하나로 정렬
            // crossAxisAlignment: CrossAxisAlignment.stretch	 반대되는 축의 방향으로 늘려준다
            children: [
              Container(
                height: 100,
                width: 100,
                color: Colors.red,
                child: Text('container1'),
              ),
              SizedBox(
              	height : 20	// container1과 2사이에 빈공간을 가진 박스 생성
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.lightBlueAccent,
                child: Text('container2'),
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.greenAccent,
                child: Text('container3'),
              )
            ],
          ),
        ),
      ),
    )
    ;
  }
}