• 티스토리 홈
  • 프로필사진
    Song hyun
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
Song hyun
  • 프로필사진
    Song hyun
    • 분류 전체보기 (780)
      • 백준 (0)
      • 영어 (2)
        • Diary (0)
        • Toast Masters (2)
      • 메모 (13)
      • 설치 메뉴얼 (30)
      • Java (178)
      • MySQL (60)
      • JSP (67)
      • Springboot (46)
      • HTML,CSS, JS (71)
        • HTML (8)
        • CSS (12)
        • JavaScript (37)
        • HTML&CSS 스터디 (13)
      • C++ (7)
      • Linux (7)
      • JPA (34)
      • Kotlin (2)
      • Flutter (42)
      • Error Note (39)
      • 디자인 패턴 (12)
      • 디지털논리회로 (4)
      • 데이터베이스 시스템 (8)
      • 알고리즘 (7)
      • 운영체제 (3)
      • 이산수학 (3)
      • 인공지능 (1)
      • 자료 구조 (14)
        • 기본 개념 (14)
        • 자료구조 스터디 (0)
      • 💡My project (76)
        • 팩맨 : Java Swing 게임 제작 프로젝트 (6)
        • 네이트톡 : Java 소켓 통신 프로젝트 (4)
        • 포켓옥션 : HikariCP&JDBC CRUD 프.. (3)
        • 이지 부산 : BDIA-Devton 2024 프로.. (20)
        • 그린 유니버시티 : JSP를 사용한 학사관리 프로.. (1)
        • 애드 포커 : 웹 소켓과 Spring을 사용한 카.. (1)
        • 셸위 : 게임 친구 매칭 사이트 (21)
        • 다모아 : 개발자 중개 플랫폼 (20)
      • 📗스터디 (13)
        • CNN : 웹개발 스터디 (10)
        • Node&React로 유튜브 사이트 만들기 (3)
      • 📙독서 및 강연 기록 (36)
        • 강연 (14)
        • 독서 (22)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [Flutter] 41. ChangeNotifier란?
        2024년 11월 13일
        • Song hyun
        • 작성자
        • 2024.11.13.:01
        728x90
        반응형

        [Flutter] 41. ChangeNotifier란?

         

        *ChangeNotifier는 Flutter에서 상태 변화가 있을 때, UI에 자동으로 알림을 주기 위한 클래스이다.

        *MVVM 패턴에서 ViewModel을 통해 UI와 데이터를 연결하는 데 매우 유용하다.

         

         

        시나리오 코드

        (1) View-model에서 ChangeNotifier 상속 처리

        // ChangeNotifier를 상속한다.
        class TodoViewModel extends ChangeNotifier
          // 할 일을 추가하는 기능
        void addTodo(String title){
          final newTodo = Todo(id: DateTime.now().toString(), title: title);
          todos.add(newTodo);
          // 상태 알림 호출
          notifyListeners();
        }
        
        // 할 일을 삭제하는 기능
        void removeTodo(String id){
          todos.removeWhere((todo)=>todo.id == id);
          // UI에 상태가 변경되었다고 알림
          notifyListeners();

         

         

        (2) ChangeNotifier를 사용한 View 클래스 리팩토링

        import 'package:flutter/material.dart';
        import 'package:my_mvvm_v01/start03/view_models/todo_view_model.dart';
        
        void main() => runApp(MaterialApp(home: TodoScreen()));
        
        class TodoScreen extends StatefulWidget {
          const TodoScreen({super.key});
        
          @override
          State<TodoScreen> createState() => _TodoScreenState();
        }
        
        class _TodoScreenState extends State<TodoScreen> {
          // MVVM 패턴이기 때문에 View 는 ViewModel 클래스만 참조 하면 된다.
          final TodoViewModel todoViewModel = TodoViewModel();
          final TextEditingController _controller = new TextEditingController();
        
        
          @override
          void initState() {
            super.initState();
            // 단 한번만 호출 되는 메서드
            todoViewModel.addListener(() {
              // UI 재 렌더링 메서드
              setState(() {});
            });
          }
        
          @override
          void dispose() {
            todoViewModel.dispose();
            _controller.dispose();
            super.dispose();
          }
        
          // 프레젠테이션 로직을 함수화 시키자
          void _addTodo() {
            if(_controller.text.isNotEmpty) {
              todoViewModel.addTodo(_controller.text);
              _controller.clear();
            }
          }
        
          // 프레젠테이션 로직
          void _removeTodo(String id) {
            todoViewModel.removeTodo(id);
          }
        
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text('MVVM Basic Todo List'),
              ),
              body: Column(
                children: [
                  // 입력 필드 만들기
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Expanded(
                          child: TextField(
                            controller: _controller,
                            decoration: InputDecoration(labelText: '작업을 입력 하시오'),
                          ),
                        ),
                        IconButton(
                          onPressed: _addTodo,
                          icon: Icon(Icons.add),
                        )
                      ],
                    ),
                  ),
                  // 아래에 할일 목록 표시 구성
                  Expanded(
                    child: ListView.builder(
                        itemCount: todoViewModel.todos.length,
                        itemBuilder: (context, index) {
                          // 뷰모델에 있는 자료구조 안에 각 인덱스에 맵핑된 객체 Todo인스턴스 하나
                          final todo = todoViewModel.todos[index];
                          return ListTile(
                            title: Text(todo.title),
                            trailing: IconButton(
                              icon: Icon(Icons.delete),
                              onPressed: () => _removeTodo(todo.id),
                            ),
                          );
                        }),
                  ),
                ],
              ),
            );
          }
        }
        
        728x90
        반응형

        'Flutter' 카테고리의 다른 글

        [Flutter] 43. GestureDetector란?  (1) 2024.11.14
        [Flutter] 42. Provider 라이브러리  (1) 2024.11.13
        [Flutter] 40. MVVM 구조란?  (1) 2024.11.13
        [Flutter] 39. 모노리스 구조의 개념과 특징  (1) 2024.11.13
        [Flutter] 38. dio 라이브러리를 사용한 HTTP통신  (0) 2024.11.12
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바