// 머터리얼 디자인 import
// 기본 위젯 제공
import 'package:flutter/material.dart';
// 플러터 프로젝트 실행하는 함수
void main() {
runApp(
// 머터리얼 디자인 위젯
MaterialApp(
// Scaffold 위젯
home: Scaffold(
// Text 위젯
body: Text(
'Hello World', // 마지막 매개변수 끝에 콤마
),
),
),
);
}
MaterialApp : 머터리얼 디자인 기반의 위젯을 사용
Scaffold 위젯 : 화면 전체를 차지. 레이아웃을 도와주고 UI 관련 특수 기능 제공(알림과 같은 스낵바 실행, 화면의 위에 앱바를 추가, 아래에 탭바를 추가 등)
※ MaterialApp 과 Scaffold 위젯을 추가하는 것이 기본 설정.
Text 위젯 : 글자를 화면에 출력하기 위해 사용.
실행
에뮬레이터를 선택하고 실행 버튼을 클릭한다.
에뮬레이터에서 결과 화면 확인.
- 화면 좌측 상단에 Hello World 글자가 보인다.(자세히 봐야 보인다. --;;)
$ flutter create hello_world2
....
All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
In order to run your application, type:
$ cd hello_world2
$ flutter run
Your application code is in hello_world2\lib\main.dart.
Flutter는 고성능, 고품질의 iOS, Android, 웹(tech preview) 앱을 단일 코드 베이스로 개발할 수 있는 모바일 앱 SDK입니다.
스크롤 동작, 글씨, 아이콘과 같이 플랫폼 별로 달라지는 부분들을 아울러서 서로 다른 플랫폼에서도 자연스럽게 동작하는 고성능의 앱을 개발할 수 있게 하는 것이 Flutter의 목표입니다.
Flutter의 장점 ● 높은 생산성 ○ 단일 코드베이스로 iOS와 Android 개발할 수 있습니다. ○ 모던하고 표현적인 언어 그리고 선언적 접근법을 통해 단일 OS에서 더 적은 코드로 더 많은 것을 할 수 있습니다. ○쉽게 프로토타입을 제작하고 반복할 수 있습니다. √ 앱 실행 중에 코드를 바꾸고 리로드하여 개발을 할 수 있습니다. ( hot reload) √ 앱이 중단된 지점에서 문제를 수정하고 디버깅을 이어나갈 수 있습니다.
●아름답고, 고도로 커스터마이징된 UX를 만들 수 있습니다. ○Flutter의 자체 프레임워크를 사용하여 머티리얼 디자인과 쿠퍼티노 (iOS) 스타일의 풍부한 위젯들을 만들 수 있습니다. ○OEM 위젯의 제한없이 맞춤형의 아름다운 브랜드 주도 디자인을 실현할 수 있습니다.
핵심 원리
Flutter는 현대적인 react-style 프레임워크, 2D 렌더링 엔진, 바로 이용 가능한 위젯들, 그리고 개발 툴들을 포함합니다.
이러한 구성 요소들을 통해 앱을 디자인, 개발, 테스트 그리고 디버깅할 수 있습니다. 모든 것은 몇가지 핵심 원리들을 중심으로 구성됩니다.
모든 것은 위젯입니다
위젯은 Flutter 앱 UI의 기본 단위입니다. 모든 위젯은 UI의 불변 선언입니다.
뷰, 뷰 컨트롤러, 레이아웃 그리고 기타 다른 속성들을 분리하는 다른 프레임워크들과 다르게, Flutter는 일관적이고 통일된 오브젝트 모델을 갖고 있는데, 그것이 바로 위젯입니다.
위젯은 다음의 것들을 정의할 수 있습니다:
● 구조적인 요소 (예: 버튼이나 메뉴)
● 스타일적인 요소 (예: 폰트나 색상)
● 레이아웃 요소 (예: 패딩)
● 기타 등등…
위젯은 구성을 기반으로 계층 구조를 형성합니다.
각 위젯은 내부에 중첩되고 부모의 속성들을 상속받습니다.
별도 “application” 오브젝트가 없는 대신 최상위 위젯이 그 역할을 하게 됩니다.
프레임워크에게 위젯을 계층 구조 상 다른 위젯으로 교체하게 함으로써, 사용자 상호작용과 같은 이벤트를 구현할 수 있습니다. 프레임워크는 새로운 위젯과 기존 위젯을 비교하고 효을적으로 UI를 업데이트하게 됩니다.
구성 > 상속
위젯은 종종 강력한 효과를 내기 위해 단일 목적의 여러 작은 위젯들로 구성됩니다.
예를 들어, 일반적으로 사용되는 Container 위젯은 painting, positioning, sizing과 같은 레이아웃 관련 위젯들로 구성됩니다.
