Flutter - Hello World

2023. 5. 7. 18:10·📘 Frontend/Flutter
목차
  1. Hello World 앱 만들기
  2. 안드로이드 스튜디오에는 여러가지 버튼들이 있다.
  3. Widget Tree

Hello World 앱 만들기

runApp() : 플러터의 진입 포인트

MaterialApp() : 어플리케이션의 시작

Scaffold() : 화면 정의, backgorundColor : 화면의 배경색 정의

Center() : 컨텐츠의 중앙 위치

Text() : 텍스트, TextStyle : 말그대로 텍스트 스타일

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    /* Scaffold - 페이지 작성, 어플리케이션 화면 - Body */
    home: Scaffold(
      backgroundColor: Colors.black,
      body: Center(
          child: Text(
        'Hello World',
        style: TextStyle(color: Colors.white, fontSize: 20.0),
      )),
    ),
  ));
}
image-20230507180809962

안드로이드 스튜디오에는 여러가지 버튼들이 있다.

  • 핫 리로드는 가상 머신에 변경된 코드를 불러오고 위젯 트리를 재빌드한다. 이때 앱의 상태를 보존하기 때문에 main()이나 initState()를 재실행하지 않는다. (Intellij와 Android Studio에서는 ⌘, VSCode에서는 ⌃F5)
  • 핫 리스타트 는 가상 머신에 변경된 코드를 불러오고 Flutter 앱을 재시작한다. 이때 앱의 상태는 잃어버린다. (Intellij와 Android Studio에서는 ⇧⌘, VSCode에서는 ⇧⌘F5)
  • 풀 리스타트는 iOS, Android, Web 어플을 재시작한다. 이는 앞선 두가지보다 더 많은 시간을 필요로하는데 Java / Kotlin / ObjC / Swift 코드를 재 컴파일링 해야하기 때문이다. Web의 경우에는 Dart Development Compiler를 재시작하기까지 한다. 풀 리스타트에는 단축키는 따로 없어서 직접 앱을 멈췄다가 시작해야한다.

Widget Tree

Widget이란 클래스의 일종이며, 위에서 봤던 Material, Scaffold, Center, Text 전부 위젯이다.

위젯 트리를 그려보면 아래와 같다.

image-20230507180655798


저작자표시 (새창열림)

'📘 Frontend > Flutter' 카테고리의 다른 글

Flutter - Row and Column (Expanded & Flexible Widget)  (0) 2023.05.29
Flutter - Row and Column (CrossAxisAlignment)  (0) 2023.05.29
Flutter - Row and Column (MainAxisAlignment)  (0) 2023.05.29
Flutter - Row and Column (Safe Area)  (0) 2023.05.29
Flutter Project 환경설정 (iOS, Windows)  (1) 2023.05.07
  1. Hello World 앱 만들기
  2. 안드로이드 스튜디오에는 여러가지 버튼들이 있다.
  3. Widget Tree
'📘 Frontend/Flutter' 카테고리의 다른 글
  • Flutter - Row and Column (CrossAxisAlignment)
  • Flutter - Row and Column (MainAxisAlignment)
  • Flutter - Row and Column (Safe Area)
  • Flutter Project 환경설정 (iOS, Windows)
신건우
신건우
조용한 개발자
우주먼지조용한 개발자
  • 신건우
    우주먼지
    신건우
  • 전체
    오늘
    어제
    • 분류 전체보기 (422)
      • 📘 Frontend (71)
        • Markup (1)
        • Style Sheet (2)
        • Dart (8)
        • Javascript (12)
        • TypeScript (1)
        • Vue (36)
        • React (2)
        • Flutter (9)
      • 📘 Backend (143)
        • Java (34)
        • Concurrency (19)
        • Reflection (1)
        • Kotlin (29)
        • Python (1)
        • Spring (42)
        • Spring Cloud (5)
        • Message Broker (5)
        • Streaming (2)
        • 기능 개발 (5)
      • 💻 Server (6)
        • Linux (6)
      • ❌ Error Handling (11)
      • 📦 Database (62)
        • SQL (31)
        • NoSQL (2)
        • JPQL (9)
        • QueryDSL (12)
        • Basic (4)
        • Firebase (4)
      • ⚙️ Ops (57)
        • CS (6)
        • AWS (9)
        • Docker (8)
        • Kubernetes (13)
        • MSA (1)
        • CI & CD (20)
      • 📚 Data Architect (48)
        • Data Structure (10)
        • Algorithm (8)
        • Programmers (17)
        • BaekJoon (5)
        • CodeUp (4)
        • Design Pattern (4)
        • AI (0)
      • ⚒️ Management & Tool (8)
        • Git (7)
        • IntelliJ (1)
      • 📄 Document (10)
        • Project 설계 (6)
        • Server Migration (3)
      • 📄 책읽기 (2)
        • 시작하세요! 도커 & 쿠버네티스 (2)
      • 🎮 Game (4)
        • Stardew Vally (1)
        • Path of Exile (3)
  • 블로그 메뉴

    • 링크

      • Github
    • 공지사항

    • 인기 글

    • 태그

      Lock #Thread #Concurrency
      React #Markdown
      GStreamer #Pipeline
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    신건우
    Flutter - Hello World
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.