Flutter 기초 - Stateful, Stateless (16)

 

Flutter 기초 - State Basic (16)

 

StatelessWidget

상태가 없는 위젯으로 생성될 때 한번 설정되고 데이터에 따라 동적으로 변하지 않는 의미로 StateWidget은 입력 데이터나 내부 상태의 변화 없이 동일한 정보를 표시할 때 사용한다.

 - 초기화시 입력된 파라미터를 기반으로 UI를 렌더링 한다.

 - 위젯의 속성이 변경되지 않는다.(불변성을 가진다)

 - 애니메이션, 데이터 변경에 반응해 상태를 변경할 필요가 없는 경우 적합하다.

 

StatefullWidget

 동적인 상태를 가질 수 있는 위젯으로 데이터의 변경에 따라 내부 상태가 변할 수 있고 변화된 상태에 따라 UI가 업데이트된다. StatefulWidget은 State객체를 생성하고 상태를 관리해 setState()메소드를 통해 상태가 변경되었을때 UI를 다시 빌드한다.

 - 위젯의 동적 상태 관리를 관리하기 위해 State클래스가 필요하다.

 - StatefulWidget은 생성 업데이트, 소멸 등의 라이프사이클을 가진다.

 

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

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

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ExampleStateless(),
      ExampleStateful(index: 3),
    ]);
  }
}

class ExampleStateless extends StatelessWidget {
  const ExampleStateless({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

class ExampleStateful extends StatefulWidget {
  final int index;

  const ExampleStateful({required this.index, super.key});

  @override
  State<ExampleStateful> createState() => _ExampleStatefulState();
}

class _ExampleStatefulState extends State<ExampleStateful> {
  late int _index;
  late TextEditingController textEditingController;

  @override
  void initState() {
    super.initState();
    _index = widget.index;
    textEditingController = TextEditingController();
  }

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: GestureDetector(
        onTap: () {
          setState(() {
            if (_index == 5) {
              _index = 0;
              return;
            }
            _index++;
            print(_index);
          });
        },
        child: Container(
          color: Colors.blue.withOpacity(_index / 5),
          child: Center(
            child: Text('$_index'),
          ),
        ),
      ),
    );
  }
}

 

HomeWidget

 - 상태가 없는 위젯(StatelessWidget)으로 앱의 기본화면을 구성하며 Scaffold를 사용해 앱의 기본 레이아웃을 설정하고 내부 Body위젯을 포함한다.

 

Body

 - StatelessWidget이며, 두개의 자식 위젯을 Column으로 배치한다. 

 - 첫번째 자식위젯 : ExampleStateless

 - 두번째 자식위젯 : ExampleStateful

 

ExampleStateless

 - 확장된 빨간색 컨테이너를 나타내며 동적인 상태 변화 없이 일관된 색상을 유지한다.

 

ExampleStateful

 - 상태가 있는 위젯(StatefulWidget)은 사용자 상호작용에 반응해 내부 상태를 변경한다. 아래의 탭을 클릭할때 마다 _index가 증가해 특정값에 도달하면 0으로 리셋된다.