Flutterを使用してカレンダーを作成してみた

はじめに

Flutterを使用して簡単なカレンダーアプリを構築してみました。
以下記事を参考させていただきました。
https://zenn.dev/koichi_51/articles/f2c8efe9a0a9ea

環境

OS:Mac
フレームワーク:Flutter

手順

1. Flutterインストール
2. table_calendarパッケージの導入
3. Chromeで動作確認
4. XCodeで動作確認（iPhone）
5. Android Studioで動作確認（Android）

1. Flutterインストール

lutter公式サイトからFlutterをインストール
https://docs.flutter.dev/get-started/install

zipファイルを解凍し、任意のフォルダに配置する。
パスを設定する

bash

export PATH="$PATH:/path_to_flutter/bin"

インストール確認

bash

flutter --version

正常（バージョンが表示されればOK）

bash

Flutter 3.27.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c519ee916e (2 days ago) • 2025-01-21 10:32:23 -0800
Engine • revision e672b006cb
Tools • Dart 3.6.1 • DevTools 2.40.2

2. table_calendarパッケージの導入

今回はこちらのパッケージを使用してカレンダー作成していきます。
https://pub.dev/packages/table_calendar

Flutterのプロジェクトを作成する

bash

flutter create calendar_app
cd calendar_app

calendar_appフォルダにあるpubspec.yamlに依存関係を追加する

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.2.0

パッケージをインストールする

bash

flutter pub get

calendar_app¥libフォルダにあるmain.dartを編集する

main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calendar',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const CalendarPage(),
    );
  }
}

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

  @override
  State<CalendarPage> createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Calendar App'),
        backgroundColor: Theme.of(context).colorScheme.primary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TableCalendar(
          firstDay: DateTime.utc(2000, 1, 1),
          lastDay: DateTime.utc(2100, 12, 31),
          focusedDay: _focusedDay,
          selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
          onDaySelected: (selectedDay, focusedDay) {
            setState(() {
              _selectedDay = selectedDay;
              _focusedDay = focusedDay;
            });
          },
          calendarStyle: CalendarStyle(
            selectedDecoration: BoxDecoration(
              color: Colors.deepPurple,
              shape: BoxShape.circle,
            ),
            todayDecoration: BoxDecoration(
              color: Colors.orangeAccent,
              shape: BoxShape.circle,
            ),
          ),
          headerStyle: HeaderStyle(
            formatButtonVisible: false,
            titleCentered: true,
          ),
        ),
      ),
    );
  }
}

3. Chromeで動作確認

今回はスマホ向けアプリですがまずブラウザ上で確認してみました。

bash

flutter run -d chrome

こんな感じでカレンダーが表示されました！

4. XCodeで動作確認（iPhone）

続いてiphoneでの動作確認
App StoreからXcodeをダウンロードする
https://developer.apple.com/jp/xcode/

インストールされているか確認

bash

xcode-select --version

iosシュミレーターを起動する

bash

open -a Simulator

結果

xcode-select version 2409.

コマンドラインツールをインストールする

bash

xcode-select --install

flutterの設定確認

bash

flutter doctor

xcodeの箇所が問題なければOK

結果

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.3, on macOS 15.2 24C101 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.96.4)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

シュミレーターを開く

bash

open -a Simulator

シュミレータのデバイスIDを確認する

bash

flutter devices

XXXの所がデバイスIDなのでメモしておく

結果

iPhone 16 Pro (mobile)          • XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 

flutter を実行する
XXXには先ほどメモしたデバイスIDを入力

bash

flutter run -d XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

アプリがインストールされる

開くとちゃんとカレンダーが表示される

5. Android Studioで動作確認（Android）

AndroidではAndroid Studioを使用して動作確認してみた

公式サイトからAndroid Studioをダウンロードする
https://developer.android.com/studio?hl=ja

エミュレータ作成
More Actions > Virtual Device Manager を開く

＋マークからデバイスを選択する
今回はPixel 6a を選択
作成したら▶️マークからデバイスを起動する

デバイスIDを確認する

bash

flutter devices

emulator-XXXXとなっている所がデバイスIDなのでメモしておく

結果

 sdk gphone64 arm64 (mobile)     • emulator-XXXX 

エミュレータを実行する

bash

flutter run -d emulator-XXXX  # エミュレーターのデバイスID

アプリがダウンロードされる

アプリを開くとカレンダーが表示されるようになった

まとめ

今回はスマホ向けアプリを開発してみたかったので調べて簡単なカレンダーアプリを開発してみました。
初めてのMacでの開発でしたので操作慣れるためにもいい勉強でした。
将来的にはストアに登録目指せたらとおもいｍ

それではまた！