행복한 스마일맨 ^^*

이번에는 짧은 글이 되겠다.

StatefulWidget 을 이용한 상태 관리

위젯 생명주기에서의 setState() 함수 역할

이전에 작성한 생명주기 관련된 글을 참조하자

[플러터] 17. 위젯의 생명주기(Life Cycle)
 - State 자체적으로 build() 를 재실행할 때 생명주기

StatefulWidget 이 렌더링이 끝나고 clean 상태가 된다. 플러터에서는 그 어떤 상태 변경 툴을 사용하든 클린 상태에서 상태를 변경해줘야 한다.

setState() 함수를 실행해서 속성을 변경한다.

속성이 변경되고 위젯은 상태가 dirty 로 설정된다.

build() 함수가 재 실행된다.

다시 State 가 clean 상태로 되돌아온다.

setState() 함수는 매개변수 하나를 입력으로 받는다.

이 매개변수는 콜백함수이고 이 콜백함수에 변경하고 싶은 속성들을 입력한다.

※ 콜백함수가 비동기로 작성되면 안된다.

setState((){
	num++;
});

num을 1증가 시키고 build() 함수를 실행한다.

이번 글에서 setState() 를 통한 상태 관리에 대해서 알아봤다.

다음에 만들 앱에서 유용하게 사용해보자!!

오늘은 이만 짧게.. ㅂㅇㅂㅇ~~

플러터로 개발할 때 빌드 시 아래와 같은 에러를 만난다고 하면.....

 - java 11 버전 이상 사용하라는 말이다!!

FAILURE: Build failed with an exception.

* Where:
Build file '[프로젝트 디렉토리]\android\app\build.gradle' line: 24

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
     You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6s

┌─ Flutter Fix ─────────────────────────────────────────────────────────────────┐
│ [!] You need Java 11 or higher to build your app with this version of Gradle. │
│                                                                               │
│ To get Java 11, update to the latest version of Android Studio on             │
│ https://developer.android.com/studio/install.                                 │
│                                                                               │
│ To check the Java version used by Flutter, run `flutter doctor -v`.           │
└───────────────────────────────────────────────────────────────────────────────┘
Exception: Gradle task assembleDebug failed with exit code 1

어떻게 하라고 친절하게 알려준다.

그런데 저 gradle.properties 이 어디 있냐고????!!!

그거슨 바로 여기~~~

 - [프로젝트 디렉토리]/android/gradle.properties

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true
org.gradle.java.home=[JAVA 설치 디렉토리. ex) C:\\Program Files\\Java\\jdk-11]

그런데 말입니다~~~

난 이미 자바 11 버전을 쓰고 있는데 왜 이런 에러가 발생하는지... 참... --;;;

C:\Users\home>java -version
openjdk version "11" 2018-09-25
OpenJDK Runtime Environment 18.9 (build 11+28)
OpenJDK 64-Bit Server VM 18.9 (build 11+28, mixed mode)

이번에는 전자 액자 앱을 만들어 보자!!

여러 이미지를 슬라이딩하여 볼 수 있는 전자 액자이다.

Layout

 - 위젯을 좌우로 스와이프 할 수 있는 PageView 하나로 구성

1. 앱에서 사용할 이미지를 가져온다.

 - [프로젝트 디렉토리]/asset/img 폴더 아래에 이미지를 복사한다.

    √ [프로젝트 디렉토리]/asset/img/image_1.jpeg

    √ [프로젝트 디렉토리]/asset/img/image_2.jpeg

    √ [프로젝트 디렉토리]/asset/img/image_3.jpeg

    √ [프로젝트 디렉토리]/asset/img/image_4.jpeg

    √ [프로젝트 디렉토리]/asset/img/image_5.jpeg

2. 추가된 이미지(에셋)을 pubspec.yaml 에 등록한다.

 - [프로젝트 디렉토리]/pubspec.yaml

....

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - asset/img/
 
 ....

3. 앱의 기본 홈 화면으로 사용할 HomeScreen 위젯을 생성한다.

 - [프로젝트 디렉토리]/lib/screen/home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('Home Screen'),
    );
  }
}

4. 앱 실행 시 HomeScreen 을 사용하도록 한다.

 - [프로젝트 디렉토리]/lib/main.dart

import 'package:[프로젝트 이름]/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    ),
  );
}

5. PageView 구현

 - PageView 는 여러개의 위젯을 독립적인 페이지로 생성하고 가로 또는 세로 스와이프로 페이지를 넘길 수 있게 하는 위젯이다.

 - PageView 는 material 패키지에서 기본으로 제공

 - children 변수에 페이지로 생성하고 싶은 위젯을 넣어준다.

 - 핸드폰 크기와 이미지의 크기가 달라서 위아래로 흰색 여백이 생길수 있다. 핸드폰 화면 비율에 따라 위아래 대신 좌우가 남거나 운좋게 딱 맞을 수 도 있다. 여러 비율의 화면에 대응할 수 있게 이미지 fit 을 조절해줘서 항상 전체 화면을 차지하도록 설정한다.(fit: BoxFit.cover)

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: PageView(
        controller: pageController,
        // ➊ PageView 추가
        children: [1, 2, 3, 4, 5] // ➋ 샘플 리스트 생성
            .map(
              // ➌ 위젯으로 매핑
              (number) => Image.asset(
                'asset/img/image_$number.jpeg',
                fit: BoxFit.cover,
              ),
            )
            .toList(),
      ),
    );
  }
}

 - BoxFit 관련해서는 Flutter 설명 페이지를 참고.

6. 상태 바 변경

 - 상태바 : 앱 실행중에 배터리, 시간, 와이파이 연결 상태 등을 보여주는 영역

 - 상태바의 글자 및 아이콘 색상이 검정색이라 잘 안보여 흰색으로 변경.

 - SystemChrome 클래스 : 시스템 UI 의 그래픽 설정을 변경하는 기능 제공.

 - 상태바 변경 : SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  
 	// 상태바가 이미 흰색이면 light 대신 dark 로 설정하여 검정색으로 변경.
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [1, 2, 3, 4, 5]
            .map(
              (number) => Image.asset(
                'asset/img/image_$number.jpeg',
                fit: BoxFit.cover,
              ),
            )
            .toList(),
      ),
    );
  }
}

7. 타이머 추가

 - 일정 시간이 지나면 자동으로 페이지가 변경되도록 Timer 클래스를 사용하여 자동 롤링 기능 추가.

※ Timer 를 추가하려면 HomeScreen 위젯을 StatelessWidget 이 아닌 StatefulWidget 으로 변경해야 한다. StatelessWidget 위젯을 사용하면 Timer 를 build() 에서 등록해야 하는데 이럴경우 위젯이 새로 생성될 때마다 매번 새로운 Timer 가 생성된다. 이렇게 구현하면 Memory leak 이 발생한다.

 - 따라서, StatefulWidget 위젯을 사용하여 initState() 에서 한번만 Timer 를 등록하여 구현하면 된다.

 - Timer 를 사용하기 위해 async 패키지를 import 한다.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async'; // ❶ async 패키지

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

// ❷ State 정의
class _HomeScreenState extends State<HomeScreen> {

  @override
  void initState() {
    super.initState(); // ➌ 부모 initState() 실행

    Timer.periodic(
      // ➍ Timer.periodic() 등록
      Duration(seconds: 3),
      (timer) {
        print('실행!');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [1, 2, 3, 4, 5]
            .map(
              (number) => Image.asset(
                'asset/img/image_$number.jpeg',
                fit: BoxFit.cover,
              ),
            )
            .toList(),
      ),
    );
  }
}

① Timer 를 사용하기 위해 async 패키지를 import 한다.

② initState() 함수를 override 하면 StatefulWidget 생명주기에서의 initState() 함수를 사용할 수 있다.

③ 모든 initState() 함수는 부모의 initState() 함수를 호출해야 한다.

④ 3초마다 실행되는 Timer 등록.

8. PageController 사용

 - PageView 를 조작하기 위해 PageController 사용.

 - PageController 를 State 에 선언하고 PageView 에 매개변수로 입력

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // ❶ PageController 생성
  final PageController pageController = PageController();

  @override
  void initState() {
    super.initState();

    Timer.periodic(
      Duration(seconds: 3),
      (timer) {
      
        // ➌ 현재 페이지 가져오기.
        int? nextPage = pageController.page?.toInt();

        // 페이지 값이 없을 때 예외 처리
        if (nextPage == null) {
          return;
        }
        
        // 첫페이지와 마지막 페이지 분기 처리
        if (nextPage == 4) {
          nextPage = 0;
        } else {
          nextPage++;
        }
        pageController.animateToPage(
          // ➍ 페이지 변경
          nextPage,
          duration: Duration(milliseconds: 500),
          curve: Curves.ease,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    return Scaffold(
      body: PageView(
      // ❷ PageController 등록
        controller: pageController,
        children: [1, 2, 3, 4, 5]
            .map(
              (number) => Image.asset(
                'asset/img/image_$number.jpeg',
                fit: BoxFit.cover,
              ),
            )
            .toList(),
      ),
    );
  }
}

① PageController 사용을 위한 생성.

② PageView 에 매개변수로 PageController  등록

③ pageController.page Getter 를 사용하여 PageView 의 현재 페이지를 가져올 수 있다. 페이지가 변경 중인 경우 소수점으로 표현돼서 double 로 값이 반환된다. animateToPage() 함수 실행시 정수값을 넣어줘야해서 toInt() 로 변환한다.

④ animateToPage() 함수를 이용해서 PageView 의 현재 페이지를 변경할 수 있다. curve 매개변수는 페이지가 변경되는 애니메이션의 작동 방식을 정의한다.  공식 홈페이지에서 애니메이션을 확인할 수 있다.

이제 모든 코드 작성이 끝났다.

열심히 만든 앱을 실행 시켜보자.

짜잔~~~ 나만의 액자 앱이 잘~~ 만들어 진 것을 확인할 수 있다!!

위젯의 생명주기

 - 위젯이 화면에 그려지는 순간부터 삭제되는 순간까지의 주기를 의미

 - UI 를 표현할때 사용되는 대표적인 StatelessWidget 과 StatefulWidget 의 생명주기

StatelessWidget

 - 이름에서 알 수 있듯이 "상태가 없는 위젯"

 - StatelessWidget 이 빌드되면 생성자가 실행된다. 이어서 필수로 override 해야하는 build() 함수가 실행된다. build() 함수에 반환된 위젯이 화면에 렌더링된다.

 - 플러터에서 모든 위젯은 Widget 클래스를 상속 받는다. Widget 클래스는 불면(immutable) 특성을 갖고 있다. 클래스를 한번 생성하면 속성을 변경할 수 없다는 뜻이다.

 - 위젯의 속성을 변경해야 할 때가 있다. 예를 들어 생성자에 새로운 매개변수가 입력되는 경우. build() 함수에서 매개변수 값을 사용하고 있다면 변경된 매개변수 기반으로 build() 함수를 재실행해야 한다

 - StatelessWidget 은 불변이기 때문에 한 번 생성된 인스턴스의 build() 함수는 재실행되지 않는다. 화면에 변경된 내용을 반영하고 싶다면 새로운 인스턴스를 생성한 후 기존 인스턴스를 대체해야 한다.

StatefulWidget

 - StatefulWidget 은 StatelessWidget 과 다른 목적을 가지고 있다. 위젯 내부에서 build() 함수를 재실행해야 하는 상황에서 사용하는 위젯이다.

 - StatefulWidget은 Widget 클래스와 State 클래스 2개로 구성되어 있다. 

 - 상태 변경이 없는 생명주기

  √ 상태 변경이 없는 생명주기는 위젯이 화면에 나타나며 생성되고 화면에서 사라지며 삭제되는 과정을 의미한다.

  √ 중간에 위젯의 상태가 변경되지 않는다.

      1. StatefulWidget 생성자 실행

      2. createState() 함수 실행. createState() 함수는 필수로 override 해야 하는 함수로 StatefulWidget 과 연동되는 State 를 생성한다.

      3. State 가 생성이되면 initState() 가 실행된다. initState() 는 State가 생성되는 순간 단 한번 실행되고 다시 실행되지 않는다.

      4. didChangeDependencies() 함수 실행. initState() 와 다르게 BuildContext 가 제공되고 State 가 의존하는 값이 변경되면 재실행된다.

      5. State 의 상태가 dirty 상태가 된다. dirty 상태는 build() 가 재실행되어야 하는 상태이다.

      6. build() 함수가 실행되고 UI 가 반영된다.

      7. build() 함수 실행이 완료되면 상태가 clean 상태로 변경된다. 화면에 변화가 없으면 이 상태가 유지된다.

      8. 위젯이 위젯 트리에서 사라지면 deactivate() 가 실행된다. deactivate() 는 State 가 일시적/영구적으로 삭제될때 실행된다.

      9. dispose() 가 실행된다. 위젯이 영구적으로 삭제될때 실행한다.

 - StatefulWidget 생성자의 매개변수가 변경됐을 때 생명주기

  √ StatefulWidget 도 StatelessWidget 처럼 하나의 클래스이다. 따라서 매개변수를 입력 받을 수 있다.

  √ 위젯이 삭제되기 전에 매개변수가 변경된다면....

      1. StatefulWidget 생성자 실행

      2. State 의 didUpdateWidget() 함수 실행

      3. State 의 상태가 dirty 로 변경

      4. build() 함수 실행

      5. State 의 상태가 clean 으로 변경

 - State 자체적으로 build() 를 재실행할 때 생명주기

  √ StatelessWidget 은 생성될 때 build() 함수가 한번 실행되고 절대로 다시 실행되지 않는다.

  √ StatefulWidget 은 StatefulWidget 과 State 클래스로 구성되어 있는데, State 클래스는 setState() 함수를 실행해서 build() 함수를 재실행 할 수 있다.

      1. State 클래스의 setState() 함수 실행

      2. State 의 상태가 dirty 로 변경

      3. build() 함수 실행

      4. State 의 상태가 clean 으로 변경

이상 StatelessWidget 과 StatefulWidget 의 생명주기에 대해서 알아봤다.

앞으로 두 위젯을 써서 앱을 만들어보면서 더 익혀보기로 하자!!

웹 앱을 만들기 위한 사전 작업이 끝났다.

이제 진짜 앱을 만들어 보자!!

1. 앱이 처음 실행됐을 때 보여줄 화면.

 - lib/main.dart

import 'package:[프로젝트 이름]/screen/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),
    ),
  );
}

 - import : 다른 파일의 위젯이나 변수등을 불러와서 사용하는 경우에 사용.

  √ 다른 파일에서 불러올 경우 : package:[프로젝트의 이름]/[lib 폴더로 부터의 위치]/파일명(.dart)

  √ 플러그인 기능 사용 시 : package:[플러그인 이름]/[플러그인 이름].dart

 - MaterialApp 위젯은 플러터 앱의 최상위 위젯이며 앱이 처음 실행됐을 때 보여줄 화면을 home 매개변수에 입력할 수 있다. 여기서는 HomeScreen() 을 불러와서 첫화면으로 설정한다.

2. 홈 화면에서 사용할 HomeScreen 정의

 - lib/screen/home_screen.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HomeScreen extends StatelessWidget {
  WebViewController? controller; // 컨트롤러 변수 생성

  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( // 앱바 위젯 추가
        // 배경색 지정
        backgroundColor: Colors.orange,
        // 앱 타이틀 설정
        title: Text('Childeye Blog'),
        // 가운데 정렬
        centerTitle: true,
        actions: [
          IconButton(

            // 눌렀을 때 콜백 함수 설정
            onPressed: () {
              if (controller != null) {

                // 웹뷰에서 보여줄 사이트 실행하기
                controller!.loadUrl('https://childeye.tistory.com');
              }
            },

            // 홈 버튼 아이콘 설정
            icon: Icon(
              Icons.home,
            ),
          ),
        ],
      ),
      body: WebView(  // WebView 추가하기
        initialUrl: 'https://childeye.tistory.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          this.controller = controller; // 위젯에 컨트롤러 저장
        },
      ),
    );
  }
}

 - HomeScreen 위젯 : 웹 앱이 실행되면 가장 먼저 보이는 위젯.

 - 웹뷰 컨트롤러 : 홈 아이콘을 눌렀을 때 웹뷰 화면을 변경하려면 위젯 제어 기능이 필요하다. 이 기능을 하는 것이 웹뷰 컨트롤러가 담당한다.

  √ WebViewController 를 저장할 변수를 선언한다.(controller 변수)

  √ 웹뷰 위젯이 생성되면 onWebViewCreated 함수가 실행되는데 이때 WebViewController 를 매개변수로 받는다. 이 값을 controller 변수에 저장하면 웹뷰를 제어할 수 있다.

 - 화면 구성 : 앱바와 웹뷰로 이루어져 있음.

  √ 앱바 : 제목과 홈 버튼을 렌더링.

  √ 웹뷰 : 지정한 URL(childeye.tistory.com)의 내용을 표시

 - 앱바(AppBar)

  √ HomeScreen 위젯에 앱바를 추가, 제목을 넣어주고 배경색을 설정한다.

  √ 앱바 위젯은 일반적으로 Scaffold 위젯의 appBar 매개변수로 넣어준다.

  √ AppBar 의 배경색을 지정한다.

  √ AppBar 의 중간에 Text 위젯을 넣어주고 가운데 정렬한다.

  √ AppBar 의 actions 매개변수에 홈아이콘을 생성하고 제어한다. actions 매개변수에 위젯을 넣으면 앱바의 오른쪽 끝에 순서대로 위젯이 배치된다.

  √ 홈아이콘을 눌렀을 때 실행할 콜백 함수를 onPressed 매개변수에 정의한다. WebViewController 의 load() 함수를 이용하여 URL 로 이동시킨다. controller 변수에 ! 기호를 추가하는 이유는 controller 변수가 null 이 가능한 타입으로 선언됐기 때문이다. 위 코드에서는 controller 변수가 null 이 아닌 경우에만 load() 함수를 호출하니 ! 를 사용하여 controller 변수는 절대로 null 이 될수 없다고 표현한 것이다.

 - 웹뷰(WebView)

  √ 웹뷰 플러그인을 import 하여 사용한다.

  √ Scaffold 의 body 매개변수에 WebView 위젯을 넣는다.

  √ 기본 URL 을 설정하고 자바스크립트도 실행할 수 있도록 한다.

에뮬레이터를 실행시키면 다음과 같은 결과물이 된다.

웹 앱 완성!!