Flutterでアプリを作るときに「カレンダー」「Todo」「メモ」「設定」複数の機能を入れる方法」

Flutterでアプリを作るときに「カレンダー」「Todo」「メモ」「設定」みたいに複数の機能を入れる方法」は、基本的にアプリを画面（ページ）ごとに分けて管理します。

Flutterで複数機能を作る基本構成
画面を切り替えて複数機能を作る
機能ごとにパッケージを使う
- よく使う例
大きいアプリの作り方
アプリ設計のイメージ
Flutterでアプリ作る人の構成

ここがFlutterアプリ設計の一番重要な考え方です。

Flutterで複数機能を作る基本構成

一番よくある構成はこれです。

lib/
├ main.dart
├ screens/
│ ├ home_screen.dart
│ ├ calendar_screen.dart
│ ├ todo_screen.dart
│ └ settings_screen.dart
├ models/
│ └ todo.dart
├ services/
│ └ database.dart
└ widgets/
└ todo_tile.dart

役割はこう

フォルダ	内容
screens	画面
models	データ構造
services	DB・API
widgets	部品

＝大きいアプリはフォルダで機能を分ける

画面を切り替えて複数機能を作る

一番よく使うのが
BottomNavigationBar（下のメニュー）

例：

ホーム
カレンダー
Todo
設定

みたいなアプリ

画面切り替えの基本コード


import 'package:flutter/material.dart';
import 'calendar_screen.dart';
import 'todo_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _screens = [
    CalendarScreen(),
    TodoScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            label: 'Calendar',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.check),
            label: 'Todo',
          ),
        ],
      ),
    );
  }
}

これでカレンダーとTodoを切り替えできるアプリになる。

機能ごとにパッケージを使う

Flutterは自分で全部作るより
pub.devのパッケージを使うのが普通

よく使う例

機能	パッケージ
カレンダー	table_calendar
Todo保存	sqflite
ローカル保存	shared_preferences
状態管理	provider / riverpod
通知	flutter_local_notifications