Flutter - ChangeNotifierProvider 를 이용한 여러위젯에 refresh 알림

Flutter의 ChangeNotifierProvider를 이용하여 notifyListeners()를 호출하면 여러 위젯에서 변경 사항을 감지하고 리프레시할 수 있습니다.

다음은 ChangeNotifierProvider를 사용하여 refresh 요청을 여러 위젯에서 감지하도록 구현한 코드입니다.

---

📌 구현 목표

• RefreshProvider를 생성하여 상태 관리
• refresh() 호출 시 모든 Consumer 위젯이 갱신됨
• FloatingActionButton을 눌러 데이터 리프레시

---

📌 코드

1️⃣ main.dart

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => RefreshProvider(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomeScreen(),
    );
  }
}

---

2️⃣ refresh_provider.dart (Provider 클래스)

import 'package:flutter/material.dart';

class RefreshProvider extends ChangeNotifier {
  DateTime lastUpdated = DateTime.now(); // 데이터 갱신 시간

  void refresh() {
    lastUpdated = DateTime.now(); // 시간 업데이트
    notifyListeners(); // 리스너들에게 알림
  }
}

---

3️⃣ home_screen.dart (홈 화면)

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'refresh_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Refresh Example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Center(child: RefreshWidget()), // 리프레시되는 위젯
          const SizedBox(height: 20),
          const AnotherWidget(), // 다른 위젯도 갱신됨
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<RefreshProvider>(context, listen: false).refresh();
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

---

4️⃣ refresh_widget.dart (갱신되는 위젯 1)

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'refresh_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Consumer<RefreshProvider>(
      builder: (context, provider, child) {
        return Text(
          'Last Updated: ${provider.lastUpdated}',
          style: const TextStyle(fontSize: 18),
        );
      },
    );
  }
}

---

5️⃣ another_widget.dart (갱신되는 위젯 2)

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'refresh_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Consumer<RefreshProvider>(
      builder: (context, provider, child) {
        return Text(
          'Another Widget Updated: ${provider.lastUpdated}',
          style: const TextStyle(fontSize: 18, color: Colors.blue),
        );
      },
    );
  }
}

---

🔥 실행 결과

• FloatingActionButton을 누르면 notifyListeners()가 호출됨
• RefreshWidget과 AnotherWidget이 동시에 업데이트됨

이제 ChangeNotifierProvider를 활용하여 여러 위젯에서 리프레시되는 동작이 구현되었습니다! 🚀