Flutter 기초 공부: scaffold, stateless, stateful

Flutter: dart라는 하나의 코드로 Andoird와 iOS 플랫폼을 모두 구현할 수 있는 플러그인 혹은 라이브러리. 모바일 UI 프레임워크

강의 정리

참고 강의

 

Firebase: Backend-side의 서버구현을 직접하지 않고도 서버를 서비스로 제공하는 구글의 클라우드 서비스. 블로그 참고

 

https://www.youtube.com/watch?v=C5lpPjoivaw&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ&index=5 

home은 MaterialApp의 프로퍼티이며, 앱을 실행시켰을 때  홈 스크린에서 보여지는 요소. 여기서는 Text widget만 보임. 

Scaffold: 앱의 베이직 레이아웃을 구현하도록함. app bar나  body, 플로팅 액션 버튼과 같은 레이아웃 등을 추가할 수 있음. 한마디로 말해 다양한 레이아웃 위젯들을 싸는 wrapper의 역할을 한다. 

*위젯의 이름은 대문자로 시작. 모든 프로퍼티의 값 뒤에는 , 추가. Specify a couple of properties. 포러퍼티를 설정할때는 specify를 사용하자. 

appbar의 프로퍼티에 프로퍼티의 값으로 AppBar widget을 추가함. 그 위젯 안에 또 다른 프로퍼티를 추가한 후 프로퍼티 값으로 위젯을 추가. -> 위젯 트리를 형성. 프로퍼티 안에 위젯 대신 속성을 추가할 수도 있음. 

화면에 글자를 표시하려면 Text widget을 속성값으로 추가하기 Text(' ').

body에서 위젯들을 가운데에 두려면, Ceter widget을 사용하기. 이 위젯에 들어가는 모든 것들이 가운데 정렬됨 (this wdget centralizes whatever is nested inside of it. 위젯 안에는 항상 properties들이 있어야 하므로,Center 안에 곧바로 Text widget을 두지 말고, child property로 추가하기

 

have widgets as values to properties -> 프로퍼티에 값으로 위젯을 갖는다. 

*Scaffold: 아래 설명 참조하기:

implements the basic material design visual layout structure. This class provides APIs for showing drawers and bottom sheets. To display a persistent bottom sheet, obtain the [ScaffoldState] for the current [BuildContext] via [Scaffold.of] and use the [ScaffoldState.showBottomSheet] function. 

This example shows a [Scaffold] with a [body] and [FloatingActionButton]. The [body] is a [Text] placed in a [Center] in order to center the text within the [Scaffold]. The [FloatingActionButton] is connected to a callback that increments a counter.

 

+ https://api.flutter.dev/flutter/material/Scaffold-class.html 여기서 더 다양한 위젯들을 확인 가능. 

---

https://www.youtube.com/watch?v=p5dkB3Mrxdo&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ&index=16 

 

- Statless widget: font, color와 같이 인스턴스된 후에 변하면 안되는 값들. Hot reload에 좋다. 사용할 수 있음 

- Statefull widget : layout, data과 같이 변하는 값들. 

*NOTE: Return 다음엔 ; 붙이기

 Widget class() { return yyy() : yyy()의 타입은 Widget이어야 한다. 즉 class 앞에는 리턴 타입을 명시. 

 

Stateful widget 안에서 어떤 값을 변경하려면, setState() 사용하고 그 안에 pass a function. -> setState가 buildContext를 reload하도록 trigger함. 

 

Hot reload in action 은 뭘까?

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes. -> 전체 코드가 아닌 변경된 위젯 트리를 새로 리빌드, 변경점을 곧바로 확인 가능. 속도빠름 (참고: https://flutter.dev/docs/development/tools/hot-reload

 

===

영어표현

이 파일에서 표현 많이 가져다 쓰기: 

Import the `material.dart` library, add a new lin, and create the `GridIcon Class`. The `xxx class` holds a `List` of `IconData1 called `iconList`. Create the xx method that creates the `List` of `IconData` that is used laster in the `GridView.builder`. 

Specifying a library prefix

If you import two libraries that have conflicting identifiers, then you can specify a prefix for one or both libraries. For example, if library1 and library2 both have an Element class, then you might have code like this: