상중하로 나눠주는 Scaffold() 위젯과 정렬하기

Scaffold

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(), // 상단
        body: Container( child: Text('중단입니다.'),), // 중단
        bottomNavigationBar: BottomAppBar( child: Text('하단입니다.'),), // 하단
      )
    );
  }
}

---

정렬하기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('앱임')), // AppBar는 title 파라미터를 가짐.

        body: Container(
          child: Text('안녕'),
        ),

        bottomNavigationBar: BottomAppBar(
          child : SizedBox(
            height: 50,
            child: Row( // 가로 정렬하기 (css의 flex 같은거)
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
            ),
          )
        )
      )
    );
  }
}

---

• AppBar() 는 상단바 간단히 넣고싶을 때 쓰는 기본 위젯이며 title 파라미터를 가질 수 있다.

• BottomAppBar() 는 하단바 넣고싶을 때 쓰는 기본 위젯이며 child 파라미터를 가질 수 있다.

• Container는 무겁기 때문에 "간단한" 박스라면 SizedBox 사용을 권장함.