Flutter 기초 - MaterialApp, Scaffold (10)

 

Flutter 기초 - MaterialApp, Scaffold (10)

 

1. MaterialApp

 - 앱의 최상위 레벨에 위치하며 Material Design앱을 만드는데에 필요한 여러 설정과 기능을 제공한다.

네비게이션	Navigator를 이용해 화면간의 라우팅 관리를 한다. (홈 화면, 상세 화면 등)
테마	전체 애플리케이션에 일관된 테마(색상, 폰트, 아이콘 스타일 등)를 적용해 앱의 외관을 통일할 수 있다.
로케일	다국어 지원을 위한 로케일 설정

void main(){
  runApp(MaterialApp(
    home: Scaffold(
      
    ),
  ))
}

 - main함수에서 시작해 MaterialApp 위젯을 앱 전체를 감싸 MaterialApp 위젯이 최상위 컨테이너 역할 을 수행한다.

 - home속성으로 Scaffold를 사용해 앱이 실행될때 처음 보여지는 화면을 나타내고 Scafflod 위젯은 기본적인 레이아웃 구조를 제공한다.

 

2. Scaffold

 - Material Design의 레이아웃 구조를 구현하는 위젯으로 다양한 UI요소를 손쉽게 추가하고 관리할 수 있도록 한다.

AppBar	화면 상단에 위치하는 앱바(툴바)로 제목, 네비게이션 아이콘, 액션 버튼 등을 포함할 수 있다.
Body	실제 앱의 내용이 표시되는 영역으로 주요 위젯을 배치한다.
FloatingActionButton	동작 버튼으로 중요한 액션을 유도하는데 사용된다.
Drawer	옆에서 슬라이드하여 나오는 메뉴로 앱의 네비게이션 링크를 포함할 수 있다.
BottomNavigationBar	화면 하단에 위치하는 메뉴 바

 

AppBar

 - title: Text 위젯을 사용해 앱 바의 제목을 표시한다.

 - contentTitle 위젯은 제목의 위치를 결정하고 false로 설정할 경우 왼쪽에 위치하게 된다.

 - actions 위젯은 앱바에서 수행할 수 있는 액션을 배열 형태고 정의한다.

void main(){
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        contentTitle: false,
        title: Text('This is App bar'),
        actions: [
          IconButton(icon: Icon(Icons.home), onPressed: (){
            print('Tab!');
          })
          Icon(Icons.play_arrow),
        ],
      ),
    ),
  ));
}

 

---

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          actions: [
      IconButton(icon: Icon(Icons.home), onPressed: () {
        print('Tab!');
    }, ),
      Icon(Icons.play_arrow),
      ],
        centerTitle: false,
        title: Text('This is App bar'),
    ),
    body: TestWidget(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.bug_report),
        onPressed: (){
          print('Tab! FAB!');
        },
      ),
  ),
  ),);
}

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            fontSize: 60,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}