[Flutter] 상태 관리 앱 만들기 (StatefulWidget 사용)

2단계: 도서 관리 앱으로 상태 변화 관리하기

💡 도서 관리 앱 - 위젯 트리 구조 (StatefulWidget을 이용한 상태 관리)

homePage (StatefulWidget)
|  ├── 공유 상태: 대출 목록에 추가된 도서 목록 (공유 상태)
|
├── Library (Store 역할)
|     ├── Book 1 (도서 목록)
|     ├── Book 2
|     ├── Book 3
|     └── Book 4
|
└── BorrowList (Cart 역할)
      ├── Book 2 (대출 목록에 추가된 책)
      └── Book 4

 

코드 구성

---

• main.dart

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    ),
    home: HomeScreen(),
  ));
}

---

• home_screen.dart

import 'package:flutter/material.dart';
import 'book_cart_page.dart';
import 'book_list_page.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int pageIndex = 0; // 현재 페이지 인덱스
  List<String> mySelectedBook = []; // 공유 상태: 선택된 책 목록

  void _toggleSaveStates(String book) {
    setState(() {
      if (mySelectedBook.contains(book)) {
        mySelectedBook.remove(book);
      } else {
        mySelectedBook.add(book);
      }
    });
  }

  void _changePageIndex(int index) {
    setState(() {
      pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텐코의 서재'),
      ),
      body: IndexedStack(
        index: pageIndex,
        children: [
          BookListPage(
            onToggleSaved: _toggleSaveStates,
            mySelectedBooked: mySelectedBook,
          ),
          BookCartPage(
            onToggleSaved: _toggleSaveStates,
            mySelectedBooked: mySelectedBook,
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageIndex,
        onTap: _changePageIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.list), label: 'book-list'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: 'book-cart'),
        ],
      ),
    );
  }
}

---

• book_list_page.dart

import 'package:flutter/material.dart';

class BookListPage extends StatelessWidget {
  final Function(String) onToggleSaved; // 저장 상태 토글 콜백
  final List<String> mySelectedBooked; // 선택된 책 목록

  BookListPage({
    required this.onToggleSaved,
    required this.mySelectedBooked,
    super.key,
  });

  final List<String> books = [
    '호모사피엔스',
    'dart입문',
    '홍길동전',
    'code Refactoring',
    '전치사도감',
  ]; // 임시 책 목록

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: books.map((book) {
        final isSelected = mySelectedBooked.contains(book);
        return ListTile(
          title: Text(book),
          trailing: IconButton(
            onPressed: () => onToggleSaved(book),
            icon: Icon(
              isSelected ? Icons.remove_circle : Icons.add_circle,
              color: isSelected ? Colors.red : Colors.green,
            ),
          ),
        );
      }).toList(),
    );
  }
}

---

• book_cart_page.dart

import 'package:flutter/material.dart';

class BookCartPage extends StatelessWidget {
  final Function(String) onToggleSaved; // 저장 상태 토글 콜백
  final List<String> mySelectedBooked; // 선택된 책 목록

  const BookCartPage({
    required this.onToggleSaved,
    required this.mySelectedBooked,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: mySelectedBooked.map((book) {
        return ListTile(
          title: Text(book),
          trailing: IconButton(
            onPressed: () => onToggleSaved(book),
            icon: Icon(Icons.remove_circle, color: Colors.red),
          ),
        );
      }).toList(),
    );
  }
}

---

 Flutter에서 StatefulWidget으로 상태를 관리하는 방법을 보여주는 예제이다. 앱에서 책을 선택하거나 삭제하면서 상태를 공유하는 기본 구조다. 도움이 됐길 바라고, 궁금한 게 있으면 언제든 물어보세요!😊

---

1단계가 궁금하다면?

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