Flutter : BottomNavBar로 TodoPage 기본 모델 만들기

 

 

아래코드는 List<Widget> 을 선언해서 

그 안에 위젯을 만들었다. 

 

바텀 네비바의 선택된 인덱스가 

해당 <위젯> 리스트의 인덱스가 된다. 

 

그리고 할 일과, 완료한 일의 페이지를 나누었다. 

 

import 'package:flutter/material.dart';

class TodoApp extends StatefulWidget {
  @override
  _TodoAppState createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  int _selectedIndex = 0;

  List<String> _todos = [];
  List<String> _completedTodos = [];

  static List<Widget> _widgetOptions = <Widget>[   
  Container(      child: ListView.builder(
  itemCount: _todos.length,     
  itemBuilder: (BuildContext context, int index) {      
  return ListTile(title: Text(_todos[index]),
            trailing: IconButton(
              icon: Icon(Icons.check),
              onPressed: () {
                setState(() {
                  _completedTodos.add(_todos[index]);
                  _todos.removeAt(index);
                });
              },
            ),
          );
        },
      ),
    ),
    Container(
      child: ListView.builder(
        itemCount: _completedTodos.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(_completedTodos[index]),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _completedTodos.removeAt(index);
                });
              },
            ),
          );
        },
      ),
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('Todos'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.check),
            title: Text('Completed'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue[800],
        onTap: _onItemTapped,
      ),
    );
  }
}