[Flutter] 상태 관리 앱 만들기 (stl, stf)

💡 우리가 배울 여러 상태 관리 방법을 이용해 데이터 일관성을 유지 해보자!

1. StatefulWidget
2. InheritedWidget
3. Provider(라이브러리)
4. Riverpod(라이브러리)

1단계: 기본 위젯 (StatelessWidget & StatefulWidget)

💡  StatelessWidget이란 상태 변화 없이 항상 동일한 UI를 그리는 위젯

import 'package:flutter/material.dart';

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

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

  final msg = '안녕하세요 저는 상태가 없는(고정된) 위젯입니다.';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(msg),
      ),
    );
  }
}

 

※ 포인트

• msg 변수는 한 번 할당되면 변경되지 않음.
• UI는 처음 그려진 후 다시 변경되지 않음.

---

💡 StatefulWidget은 상태를 가지고 있으며, 상태 값이 변경되면 UI가 업데이트됨

 

import 'package:flutter/material.dart';

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

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final String msg = '저는 Stateful 위젯입니다.';
  int count = 0; // 상태 변수

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () {
            setState(() {
              count += 1;
            });
          },
          child: Text('$msg onTap Count : $count'),
        ),
      ),
    );
  }
}

 

※ 포인트

• count 변수는 상태 변수로, setState()를 호출하면 UI가 다시 렌더링됨.
• onTap 이벤트가 발생할 때 count 값이 증가하고 화면이 갱신됨.

---

pubspec.yaml - logger 라이브러리 추가

Flutter에서 로그를 쉽게 출력하기 위해 logger 라이브러리를 추가

dependencies:
  cupertino_icons: ^1.0.8
  logger: ^2.5.0

Logger 예제

import 'package:logger/logger.dart';

final logger = Logger();

void main() {
  logger.d("디버깅 메시지 출력");
  logger.i("정보 메시지 출력");
  logger.w("경고 메시지 출력");
  logger.e("에러 메시지 출력");
}

 

 

 

이제 Flutter에서 상태 관리를 더 깊이 이해할 수 있도록, 다음 포스팅에서는 StatefulWidget을 이용한 상태 관리를 다룰 예정이니 꼭 확인해 주세요! 😊