[Angela Yu] Flutter Start

Flutter 강의를 듣기 시작했다. udemy에서 가장 유명한 Angela Yu님의 강의와 좀 더 쉽게 이해할려고 코딩애플 강의 2개를 들을려고 한다. 천천히 다른 언어를 배운다는게 까다롭지만 조금씩 이해하면서 하나씩 해볼려고 한다.

 

What is Flutter?

• 개발자들이 다양한 화면 크기와 장치에 맞게 멋지 인터페이스를 쉽게 디자인할 수 있도록 해주는 도구 키트
• 앱을 쉽게 레이아웃 할 수 있도록 미리 빌드된 위젯도 함께 제공 예를들어, 앱을 행이나 열, 스택으로 배치
• 플러터가 하는 일은 빈 화면에 애니메이션, 상호 작용이든 변경이든 간단히 레고 블록 형태의 위젯들로 앱을 만들 수 있다
• 모든 디바이스와 플랫폼에 많은 위젯들을 커스터마이징 해서 쉽게 사용할 수 있다

why Flutter?

• 하나의 코드로 모든 디바이스를 관리 및 유지보수 할 수 있다
• 왜? 하나의 언어인 dart를 배우면 ios / android / webapp을 다 사용 할 수 있기 때문
• dart는 매우 간단하고 모던한 object 언어이다
• 유연하고 심플한 레이아웃 시스템을 가지고 있다
• 10초에서 30초 사이에 UI 업데이트를 실시간으로 확인가능하다
• flutter는 오픈소스이기 때문에 버튼이 어떻게 구현되는지 보고 싶다면 그냥 클릭만 하면 어떻게 코드를 작성했는지 볼 수 있다. 즉, 화면에 나오는 뭐든 클릭할 수 있고 작성한 원본 코드도 볼 수 있다

The Anatomy of a Flutter App

플러터 앱 해부

• 플러터 앱 안의 모든 건 위젯이다. 레고 블럭위에 레고 블록을 얹은 것 처럼 위젯위에 위젯을 쌓아서 앱을 만든다
• 트리구조로 이어나가면서 작성한다
  • 서로 다른 위젯들이 중첩되어 있는 것들이다

Scaffold(
	appBar:AppBar(),
	body: Container(
		child: Column(
			children: [
				Row(
					Text(),
					Icon(),
				),
				Text(),
			]
		)
	),
)

- 스캐폴드의 괄호 안에 앱 바와 컨테이너가 있다
- 컨테이너의 괄호 안에서 시작
- 그리고 칼럼이 있다, 열 안에 두 가지가 있다 행과 텍스트
- 행 안에는 두 가지가 더 있다 텍스트와 아이콘이죠 
- 이 디자인을 다트 코드로 나타냈다

• 네트워크 이미지라는 위젯으로 사진을 보여줄 수 있다
• 이트리를 가지고 비슷하게 코드도 작성한다

How to get the most out of the course

• 코드 줄것
• 레슨마다 시간은 약 10분정도
  • 온라인으로 보면서 따라하기 때문에
• 멈추고 보고 멈추고보고 하는것보다 보면서 10분정도 동안 혼자서 재현해 보자
• 코드가 왜 이렇게 작성되었는지 목적을 이해하자