[Flutter] 레이아웃

SafeArea

• iPhone 노치와 같이 물리적인 레이아웃에 의해 상단바 등이 가리게 될때 사용하기 좋은 클래스
• 잘못된 예

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Text('Hello world'),
  );
}

• SafeArea 사용

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Text('Hello world'),
    ),
  );
}

Center

• 자식 위젯을 중앙에 표시한다

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Text('Hello world'),
    ),
  );
}

Padding

• 자식 위젯 주위에 padding을 표시한다

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      child: Text('Hello world'),
      padding: EdgeInsets.fromLTRB(100.0, 300.0, 10.0, 40.0),
    ),
  );
}

Container

• 기본적으로 최대한의 공간을 차지하여 표시한다

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Container'),
    ),
    body: Container(
      color: Colors.red,
    ),
  );
}

• Cotainer에 자식 위젯이 할당되면 자식 위젯의 사이즈로 표시된다

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Container'),
    ),
    body: Container(
      color: Colors.red,
      child: Text(
        'Hello world',
        style: TextStyle(color: Colors.yellow),
      ),
    ),
  );
}

• 여러가지 Parameter 사용가능