이 튜토리얼에서 배울 내용
- 안드로이드와 iOS 앱을 생성
- 플로터앱의 기본 구조
- 패퀴지를 찾는 방법과 사용하는 법
- 개발사이클을 이해하기
- 지연 로딩 리스트 만들기
https://flutter.dev/docs/get-started/codelab#what-youll-learn-in-part-1
필요사항
- Flutter SDK 와 editor
1단계 . Flutter 앱 만들기
안드로이드 스튜디오를 이용하여 flutter 어플리케이션 실행
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
1. 프로젝트의 폴더에서 lib/main.dart 파일을 위에 코드를 교체하고 프로젝트를 run 하면 헬로우월드가 나타난다.
- Terminal: Run
flutter format <filename>.
위에 명령어를 입력하면 코드가 포맷팅 된다. 복사 붙혀넣기 과정에서 코드의 간격이 일그러지 경우 위에 명령어를 입력하면 도움이 된다.
관찰
- flutter는 모든것이 위젯이다. 이 예제에서는 StatelessWidget를 사용하여 개발된 것이다.
- 윗젯은 여백, 간격, 정렬등이 포함된 하나의 컴포넌트라고 보면 된다.
- statelessWidget은 자신이 앱의 형태를 만든다.
- Scaffold 윗젯은 매트리얼 라이브리러, 제목, 본문 속성의 트리구조를 가진다. 이 위젯의 하부구조는 복잡하게 될 수 있다.
- 윗젯의 주된 역할은 build() 메소드를 제공하는 것이다. 다른 위젯 또는 다른 하위 윗젯에게 어떻게 디스플레이할것인가를 표시하는 방법을 설명한다.
- 코드에서 보면 하위 body라는 속성에 Text 자식 윗젯을 포함하는 Center라는 윗제를 구성한다. Center 위젯은 하위에 위젯들을 화면 가운데로 정렬한다.
- 트리구조를 갖는다.
