10-2. StatefulWidget (flutter)

StatefulWidget Life Cycle 확인 하기

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  final Color color;
  HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key) {
    print('Widget Constructro 실행');
  }

  @override
  State<HomeScreen> createState() {
    print('createState 실행');
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    print('initState 실행');
    super.initState();
  }

  @override
  void didChangeDependencies() {
    print('didChangeDependencies 실행');
    super.didChangeDependencies();
  }

  @override
  void deactivate() {
    print('deactivate 실행');
    super.deactivate();
  }

  @override
  void dispose() {
    print('dispose 실행');
    super.dispose();
  }

  @override
  void didUpdateWidget(covariant HomeScreen oldWidget) {
    print('didUpdateWidget 실행');
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print('build 실행!');
    return Container(
      width: 50.0,
      height: 50.0,
      color: widget.color,
    );
  }
}

위와 같이 작성하여 위젯 생성 및 삭제, 업데이트 , setState 과정을 확인

위젯 생성 및 삭제 시 콘솔창 결과

I/flutter (19438): Widget Constructro 실행
I/flutter (19438): createState 실행
I/flutter (19438): initState 실행
I/flutter (19438): didChangeDependencies 실행
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=12222.38ms min=310.62ms max=24134.15ms count=2
D/EGL_emulation(19438): app_time_stats: avg=1815.67ms min=1.68ms max=39777.12ms count=22
I/flutter (19438): deactivate 실행
I/flutter (19438): dispose 실행

I/flutter (19438): Widget Constructor 실행
I/flutter (19438): createState 실행
I/flutter (19438): initState 실행
I/flutter (19438): didChangeDependencies 실행
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=673.22ms min=3.00ms max=19123.42ms count=29
I/flutter (19438): Widget Constructor 실행
I/flutter (19438): didUpdateWidget 실행
I/flutter (19438): build 실행!

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  final Color color;
  HomeScreen({
    required this.color,
    Key? key,
  }) : super(key: key) {
    print('Widget Constructor 실행');
  }

  @override
  State<HomeScreen> createState() {
    print('createState 실행');
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  int number = 0;
  @override
  void initState() {
    print('initState 실행');
    super.initState();
  }

  @override
  void didChangeDependencies() {
    print('didChangeDependencies 실행');
    super.didChangeDependencies();
  }

  @override
  void deactivate() {
    print('deactivate 실행');
    super.deactivate();
  }

  @override
  void dispose() {
    print('dispose 실행');
    super.dispose();
  }

  @override
  void didUpdateWidget(covariant HomeScreen oldWidget) {
    print('didUpdateWidget 실행');
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print('build 실행!');

    return GestureDetector(
      onTap: () {
        setState(() {
          number ++;
        });
      },
      child: Container(
        width: 50.0,
        height: 50.0,
        color: widget.color,
        child: Center(
          child: Text(number.toString()),
        ),
      ),
    );
  }
}

터치를 감지하는 함수 GestureDetctor을 이용하여 Container영역 터치 시 숫자가 1 씩 증가하게 한다.

return GestureDetector(
      onTap: () {
        setState(() {
          number ++;
        });
      },
      child: Container(
        width: 50.0,
        height: 50.0,
        color: widget.color,
        child: Center(
          child: Text(number.toString()),
        ),
      ),
    );
  }

D/EGL_emulation(19438): app_time_stats: avg=50.96ms min=1.88ms max=804.13ms count=17
I/flutter (19438): build 실행!
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=572.47ms min=512.02ms max=632.93ms count=2
I/flutter (19438): build 실행!
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=792.97ms min=487.77ms max=1098.16ms count=2
I/flutter (19438): build 실행!
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=1041.96ms min=935.01ms max=1148.90ms count=2
I/flutter (19438): build 실행!
D/EGL_emulation(19438): app_time_stats: avg=1617.62ms min=1617.62ms max=1617.62ms count=1

이 상태에서 색변경을 위해 위젯 업데이트를 하면 위젯이 재 생성 되지만 state의 값 즉 숫자는 변함이 없다.

state는 삭제 되지 않고 남아있기 때문

D/EGL_emulation(19438): app_time_stats: avg=184310.38ms min=184310.38ms max=184310.38ms count=1
I/flutter (19438): Widget Constructor 실행
I/flutter (19438): didUpdateWidget 실행
I/flutter (19438): build 실행!