Do it! Flutter 책으로 내가 원하는 앱 개발해보기 (03. flutter 내부 구조 살펴보기)

5237 단어 appdartflutterapp

설치 및 참고: https://flutter-ko.dev/docs

간단한 예제를 시험해볼 때 사용하면 좋은
Dart Pad : https://dartpad.dev/?

Xcode와 Android Studio 모두를 설치해야 ios, android 에뮬레이터 모두를 사용할 수 있다. (Mac OS 기준)

굉장히 문서화 작업이 깔끔하게 잘 되어있다고 느꼈다.


setState()

화면을 갱신하기 위해서는 반드시 setState() 함수 안에서 해야 한다.

child: Switch(
	value: switchValue,
    onChanged: (value) {
		setState(() {
			print(value);
            switchValue = value;
        });
    }),
...

사용자가 스위치를 누르면 onChanged 이벤트가 발생한다.
(onChanged 이벤트는 해당 (...) 값이 바뀌었을 경우 밑의 문장들을 실행시키는 이벤트이다.)

변수의 값이 바뀌었지만, 이 사실을 실행중인 앱애 알려 화면을 갱신하는 함수가 추가로 필요하다 -> setState() 함수의 사용

참고 !

책에서 나온 'RaiseButton' 은 flutter 2.0 버전이 도입하고 나서 더 이상 사용하지 않는다. 대신, 'ElevatedButton' 을 사용하자.

그러면, 버튼 색깔을 지정하는 예제에서 어떻게 하지...? 라는 의문이 든다.
parameter : style 에서 할 것 같은데...
모르겠어서 찾아보니 styleFrom 을 가지고 있었다.
primary 가 backgroundColor 라고 친절하게 나와있다 : )

style: ElevatedButton.styleFrom(primary: _color),

을 사용하면, 색깔을 바꿀 수 있다.

휴... 버튼을 클릭 할 때마다 무사히 색깔과 text를 바꾸었다!


3-2 위젯의 생명주기 이해하기

왜 ? 특정 상황에서 동작을 멈춰야 하는 때가 있다.
-> 동작이나 자원을 자연스럽게, 효율적으로 관리할 수 있다.

stateless widget 은 갱신 불가하므로 생명주기 X
stateful widget 은 10단계로 구분하는 생명주기가 있다.

  1. createState() 함수
    StatefulWidget 클래스를 상속받는 클래스는 반드시 이 함수를 호출해야 한다.
    -> 다른 생명주기 함수들이 포함된 State 클래스를 반환

  2. mounted == true
    createState() 함수가 호출되어 상태가 생성되었다면, mounted 속성이 true로 변경된다.
    -> 위젯을 제어할 수 있는 buildContext 클래스에 접근할 수 있다.
    --> setState() 함수를 이용할 수 있다.

if (mounted) {
	setState()
}

로 점검한다면 조금 더 안전하게 이용할 수 있다.

  1. 위젯을 초기화하는 initState() 함수
    위젯을 초기화할 때 한 번만 호출한다. 주로 데이터 목록을 만들거나, 처음 필요한 데이터를 주고 받을 때 호출한다.

  2. 의존성이 변경되면 호출하는 didChangeDependencies() 함수
    위젯을 초기화하는 initState() 함수 다음에 바로 호출되는 함수이다.
    데이터에 의존하는 위젯이라면 화면에 표시되기 전에 꼭 호출해야 한다.
    주로 상속받은 위젯을 사용할 때 피상속자가 변경되면 호출한다.

궁금증...

의존성... 의 변경...? 왜 데이터에 의존하는 위젯이라면 꼭 호출해야 하나?
피상속자가 변경된다는 것이 무슨 뜻이지...?

간단히 정리하기에는 너무 많은 분량이였다...
나중에 정리한 링크를 띄우겠다.
참고 : https://kotlinworld.com/64#%EC%-D%--%EC%A-%B-%EC%--%B-%EC%-D%B-%EB%-E%--%--%EB%AC%B-%EC%--%--%EC%-D%B-%EB%A-%B-%--%EC%--%B-%EB%--%BB%EA%B-%-C%--%ED%--%B-%EA%B-%B-%--%EA%B-%--%EB%-A%A-%ED%--%-C%EA%B-%--%-F

  1. 화면에 표시하는 build 함수
    이 함수는 Widget을 반환합니다. 즉, 위젯을 화면에 렌더링합니다.
    build() 함수에서 Widget 을 만들고 반환하면 비로소 화면에 표시됩니다.

  2. Widget을 update 하는 didUpdateWidget() 함수
    부모 위젯이나 데이터가 변경되어 위젯을 갱신해야 할 때 호출합니다. 만약 initState()에서 특정 이벤트에 의해 위젯이 변경되면 didUpdateWidget() 함수를 호출해 Widget update 를 할 수 있습니다.
    -> initState() 함수는

좋은 웹페이지 즐겨찾기