[Flutter] 2. 플러터 앱페이지 기본 코드 이해하기 -by 코딩셰프

플러터 시작하기.

 

첫 플러터 프로젝트, 뭔가 정말 많아보인다!

 

 

가장 중요한 main.dart!

 

새로운 Flutter 프로젝트를 생성하면, 기본적으로 버튼을 클릭하면 Counting을 올려주는 앱 코드가 작성되어 있다. 이 것을 모두 삭제하고 차근차근 나아가보자!

 

텅 빈 main 함수에서부터 다시 시작하자!

 

 

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello World",
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
    home: MyHomePage(),
    
    );
  }
}

 

import 'package:flutter/material.dart';

• Flutter 앱 개발에 필수적인 material.dart 라이브러리를 불러옵니다. 이 라이브러리는 기본적인 UI 요소, 테마, 스타일 등을 제공합니다.

void main() => runApp(MyApp());

 

 

• 앱의 진입점 역할을 하는 main 함수입니다.
• runApp 함수를 사용하여 MyApp 위젯을 루트 위젯으로 설정하고 앱을 실행합니다.

 

MyApp 위젯

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hello World",
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(),
    );
  }
}

 

 

 

• StatelessWidget를 상속받은 MyApp 위젯을 정의합니다.
• build 메서드는 위젯의 UI를 구성하는 코드를 작성하는 곳입니다.
• MaterialApp 위젯으로 앱의 기본적인 설정을 합니다.
  • title: 앱의 제목을 "Hello World"로 설정합니다.
  • theme: 앱의 테마를 정의합니다.
    • primarySwatch: 기본 테마 색상을 파란색으로 설정합니다.
  • home: 앱의 루트 페이지를 MyHomePage 위젯으로 설정합니다.

 

 

🐦Flutter🐦 에서 MaterialApp📮 과 Scaffold⚰️ 의 관계   

MaterialApp과 Scaffold ?!

 

1. 위젯 트리 개요

Flutter 앱은 위젯 트리라는 계층 구조로 구성됩니다. 위젯 트리는 루트 위젯에서 시작하여 자식 위젯으로 점점 분기되는 형태를 가지고 있습니다. 각 위젯은 자체적인 속성과 메서드를 가지고 있으며, 서로 연결되어 앱의 UI를 구성합니다.

 

2. MaterialApp 위젯

• 역할: 앱의 전반적인 설정을 관리하고, 기본적인 테마, 스타일, 루트 네비게이션을 제공하는 역할을 합니다.
• 위치: 위젯 트리의 루트에 위치합니다.
• 핵심 속성:
  • title: 앱의 제목을 설정합니다.
  • theme: 앱의 테마를 설정합니다. (색상, 글꼴 등)
  • home: 앱의 루트 페이지를 설정합니다. -> Scaffold(..args..);

3. Scaffold 위젯

• 역할: 앱 화면의 기본 구조를 제공하고, AppBar, BottomNavigationBar, FloatingActionButton과 같은 공통 UI 요소들을 포함합니다.
• 위치: MaterialApp 위젯의 자식이 됩니다!
• 핵심 속성:
  • appBar: 앱 상단의 제목줄을 설정합니다.
  • body: 앱의 메인 콘텐츠 영역을 설정합니다.
  • floatingActionButton: 앱 화면 하단에 플로팅 버튼을 추가합니다.
  • bottomNavigationBar: 앱 화면 하단에 네비게이션 바를 추가합니다.

4. 위젯 트리에서의 관계:

• 계층 구조: MaterialApp 위젯은 위젯 트리의 루트에 위치하고, Scaffold 위젯은 그 자식 위젯으로 위치합니다. 이는 Scaffold 위젯이 MaterialApp 위젯의 설정과 기능을 상속받는다는 것을 의미합니다.
• 데이터 흐름: MaterialApp 위젯에서 설정된 테마, 스타일, 루트 네비게이션 정보는 Scaffold 위젯으로 전달됩니다. Scaffold 위젯은 이러한 정보를 사용하여 앱 화면의 기본 구조를 구성하고 공통 UI 요소들을 표시합니다.
• 커스터마이징: Scaffold 위젯의 속성들을 사용하여 앱 화면의 모양과 기능을 원하는 대로 커스터마이징할 수 있습니다.