[Flutter ] "Hello Flutter" 화면에 띄우기

1) 프로젝트 생성
지난 블로그 포스팅에서 프로젝트 생성까지 다뤄봤다.

https://soso-study.tistory.com/7?category=928023

Flutter 설치 및 개발환경 설정하기

 

2) main.dart 의 구조

main.dart 파일은 다음과 같은 구조로 되어있다.

• import : c 언어에서 헤더파일과 비슷한 역할. 외부 라이브러리나 외부 파일을 참조하겠다는 의미

• main : 앱 안에 만들 속성들을 작성
  runApp() 함수의 괄호 안에 사용할 위젯(Widget)을 삽입하면 해당 위젯을 사용할 수 있다.

• StatelessWidget(무상태위젯) / StatefulWidget(상태위젯)
  모든 UI 컴포넌트에 해당한다.
  
  👌 StatelessWidget 무상태위젯 : 변화가 없는 화면만 표시.(JAVA의 awt-label 컴포넌트 느낌). 어플리케이션의 root.
  
  👌 StatefulWidget 상태위젯 : 변경 가능한 상태를 가진 위젯. UI가 생명주기 동안 변경됨. 생성 시 2개의 클래스가 기본으로 생성된다. (ex / MyHomePage - _MyHomePageState)

• bulid : 작성한 위젯을 프레임워크를 돌려 화면에 표시할 수 있게 해주는 역할

3) "Hello Flutter"를 화면에 띄우기

코드는 다음과 같다.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
} 
// same function : void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter',
      home: Scaffold(
        appBar: AppBar(title: Text("Hello Flutter!")),
        body: Center(child: Text("I want to go next step")),
      )
    );
  }
}

 

4) 결과

실행하기 : 에뮬레이터를 켠 상태로 Run code (초록색 플레이버튼)

 

📝 참고  Flutter ) StatefulWidget 자세히 살펴보기 출처: https://zeddios.tistory.com/1115 [ZeddiOS] [Flutter] #2 Hello Flutter 만들기 출처 : brunch.co.kr/@yudong/106 [책 쓰는 프로그래머 유동] Android 스튜디오 사용자 가이드 developer.android.com/studio/run/emulator 왜 Flutter는 Dart를 사용하는가? 출처 : medium.com/flutter-korea/%EC%99%9C-flutter%EB%8A%94-dart%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80-e838b9415f57 [조은, Eun Cho]