準備

pagesディレクトリ内にtodo_page.dartを作成

↓下記コードで雛形作成

import 'package:flutter/material.dart';

class TodoPage extends StatefulWidget {
  const TodoPage({super.key});

  @override
  State<TodoPage> createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: Text(
          'Todo List',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Center(
        child: Text(
          'Todo Page',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

ナビゲーションバーの実装

BottomNavigationBarを追加してページ切り替えができるようにします

libディレクトリ直下にbottom_navigation.dartを作成

作成したdartファイルに以下のコードを記述する

import 'package:flutter/material.dart';
import 'pages/todo_page.dart';
import 'pages/profile_page.dart';

class Navigation extends StatefulWidget {
  const Navigation({super.key});

  @override
  State<Navigation> createState() => _NavigationState();
}

class _NavigationState extends State<Navigation> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Widget page;
    switch (_selectedIndex) {
      case 0:
        page = TodoPage();
        break;
      default:
        page = ProfilePage();
        break;
    }
    return Scaffold(
      body: page,
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.cyan,
        unselectedItemColor: Colors.grey,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.edit_note), label: 'todo'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'profile'),
        ],
      ),
    );
  }
}

main.dartを修正してNavigationを読み込むようにする

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

void main() {
  runApp(const MyApp());
}

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

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

実行して以下のような画面が出ることを確認

画面下部のナビゲーションバーを押した際に、画面が切り替わればOK！

準備完了！！

早速ToDoアプリを作成していきましょう！

Todoページの作成

画面遷移・状態管理の項目で学んだことを活かして作成していきます！