Layout

Column

Child 위젯들을 세로로 배치하는 레이아웃

스크린샷 2024-10-28 17.27.01.png

Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 수직축 정렬
  mainAxisAlignment: MainAxisAlignment.start, // 수평축 정렬
  mainAxisSize: MainAxisSize.max, // 수평축 크기
  children: [
    Text("Text 1"),
    Text("Text 2"),
    Text("Text 3")
  ]
)

Row

Child 위젯들을 가로로 배치하는 레이아웃

스크린샷 2024-10-28 17.28.40.png

Row(
  crossAxisAlignment: CrossAxisAlignment.start, // 수직축 정렬
  mainAxisAlignment: MainAxisAlignment.center, // 수평축 정렬
  mainAxisSize: MainAxisSize.max, // 수평축 크기
  children: [
    Text("Text 1"),
    Text("Text 2"),
    Text("Text 3")
  ]
)

Stack

겹치게 배치하는 레이아웃

스크린샷 2024-10-28 17.29.37.png

Stack(
  children: [
    Text("Text 1"),
    Text("Text 2"),
    Text("Text 3")
  ]
)

Layout Options

Center

Container(
  height: 200,
  width: 200,
  color: Colors.red,
  child: Center(
    child: Text("Text ABCDE")
  )
)

스크린샷 2024-10-28 17.31.42.png

Padding

Container(
  height: 200,
  width: 200,
  color: Colors.red,
  child: Padding(
    padding: EdgeInsets.all(20),
    padding: EdgeInsets.only(left: 20),
    padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
    child: Text("Text ABCDE")
  )
)

스크린샷 2024-10-28 17.32.28.png

Widget

Text

Text(
  "Text ABCDE"
  style: TextStyle(
		fontWeight: FontWeight.bold,
		fontSize: 22,
		color: Colors.red,
	)
)