플러터:화면 전환(Drawer) 편집하기 (부분)

= Drawer 기본 구조 =
<syntaxhighlight lang="dart">import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer Demo',
      home: HomePage(),
    );
  }
}

// ① Drawer 메뉴 항목을 구조화
// 이런 식으로 안하면 수정 시 코드의 위아래를 번갈아 오가며 수정해야 해서 불편함;
class MenuItem {
  final String title;
  final IconData icon;
  final Widget page;

  MenuItem({
    required this.title,
    required this.icon,
    required this.page,  // 메뉴를 탭하면 넘어갈 페이지를 담는다. 요런식으로 객체화를 준비해서 관리하면 편함.
  });
}

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  // ② 메뉴 데이터를 한 곳에서 정의
  // ───────────────────────────────────────
  final List<MenuItem> menuItems = [
    MenuItem(
      title: "첫 번째 화면",
      icon: Icons.home,
      page: Center(child: Text('첫 번째 화면', style: TextStyle(fontSize: 24))),
    ),
    MenuItem(
      title: "두 번째 화면",
      icon: Icons.star,
      page: Center(child: Text('두 번째 화면', style: TextStyle(fontSize: 24))),
    ),
    MenuItem(
      title: "세 번째 화면",
      icon: Icons.settings,
      page: Center(child: Text('세 번째 화면', style: TextStyle(fontSize: 24))),
    ),
  ];

  void _selectPage(int index) {
    setState(() {
      _selectedIndex = index;
    });
    Navigator.pop(context); // 최상단이 Drawer라서, Drawer 닫기
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer Demo"),
      ),

      // ③ Drawer = ListView.builder로 자동 생성
      // ───────────────────────────────────────
      drawer: Drawer(
        child: ListView(   // 리스트 뷰 안에서 자동생성해서 관리한다.
          children: [
            DrawerHeader(
              child: Text("메뉴", style: TextStyle(fontSize: 24)),
            ),
            ...List.generate(menuItems.length, (index) {  // "..."은 리스트의 원소를 풀어 넣으라는 의미. 익명함수에 정의된 대로 리스트를 만들어 풀어 넣는다.
              final item = menuItems[index];
              return ListTile(
                leading: Icon(item.icon),
                title: Text(item.title),
                onTap: () => _selectPage(index),
              );
            }),
          ],
        ),
      ),
      body: menuItems[_selectedIndex].page,  // 위에서 지정한 페이지를 body에 담는다.
    );
  }
}</syntaxhighlight>