플루터(Flutter)로 Hello World 찍어보기

Ref. 플루터 설치 및 App 생성하는 방법

2019/12/08 - [Mobile/Flutter] - Flutter (플루터) Window 환경에 설치하기

Flutter (플루터) Window 환경에 설치하기

2019/12/08 - [Mobile/Flutter] - 플루터(Flutter) App 생성 및 실행

Flutter App 생성 및 실행

Flutter로 Hello world 찍어보기

lib/main.dart의 코드를 수정하여 아래와 같이 작성합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "나의 첫번째 플루터 앱",
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter App'),
        ),
        body: Center(
          child: Text('Hello Flutter'),
        )
      )
    );
  }
}

 

삼성 DEX 를 통해 확인해본 모바일 앱

코드 설명

import 'package:flutter/material.dart';

material.dart를 임포트하고 있는데, material은 모바일 및 웹에서 표준으로 사용되는 시각 디자인 언어입니다.

 

https://material.io/design/ (참고)

Design

---

class MyApp extends StatelessWidget {
...
}

StatelessWidget을 상속받아 앱 자체를 위젯으로 만듭니다. (Flutter에서는 정렬, 여백, 레이아웃 등 거의 모든것이 위젯)

---

return MaterialApp(
	title: "나의 첫번째 플루터 앱",
		home: Scaffold(
			appBar: AppBar(
			title: Text('First Flutter App'),
		),
		body: Center(
			child: Text('Hello Flutter'),
		)
	)
);

머티리얼(material) 라이브러리의 Scaffold 위젯은 홈 스크린의 위젯 트리를 구성하는 속성을 기본으로 제공합니다.

• app bar
• title
• body

(위젯 하위 트리는 상당히 복잡하다)

---

@override
Widget build(BuildContext context) {
  ...
}

 

위젯의 주된 임무는 다른 하위 위젯을 어떻게 표현할 지를 설명하는 build() 메서드를 제공하는 것입니다.

---

...
	body: Center(
		child: Text('Hello Flutter'),
	)
...

 

Center 위젯은 하위 위젯을 화면 중앙에 정렬합니다.

 

Reference

https://flutter-ko.dev/docs/get-started/codelab

첫 Flutter 앱 작성하기 - 1부