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

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


# 環境
OS:Mac
フレームワーク:Flutter

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

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

zipファイルを解凍し、任意のフォルダに配置する。
パスを設定する
```bash:bash
export PATH="$PATH:/path_to_flutter/bin"
```
インストール確認
```bash:bash
flutter --version
```
正常（バージョンが表示されればOK）
```bash: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:bash
flutter create calendar_app
cd calendar_app
```
`calendar_app`フォルダにある`pubspec.yaml`に依存関係を追加する
```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.2.0
```
パッケージをインストールする
```bash:bash
flutter pub get
```
`calendar_app¥lib`フォルダにある`main.dart`を編集する

```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:bash
flutter run -d chrome
```
こんな感じでカレンダーが表示されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/8c3fc8d7-2cfa-638a-3ec1-c3d05ce46a2c.png)

## 4. XCodeで動作確認（iPhone）
続いてiphoneでの動作確認
App StoreからXcodeをダウンロードする
https://developer.apple.com/jp/xcode/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/cd59c09b-7d77-589f-317a-0bb99fdd7455.png)

インストールされているか確認
```bash:bash
xcode-select --version
```
iosシュミレーターを起動する
 ```bash:bash
open -a Simulator
```
```bash:結果
xcode-select version 2409.
```
コマンドラインツールをインストールする
```bash:bash
xcode-select --install
```
flutterの設定確認
```bash:bash
flutter doctor
```
xcodeの箇所が問題なければOK
```bash:結果
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:bash
open -a Simulator
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/6433dac8-e93e-6e66-26ea-b5b4eb3874bc.png)

シュミレータのデバイスIDを確認する
```bash:bash
flutter devices
```
XXXの所がデバイスIDなのでメモしておく
```bash:結果
iPhone 16 Pro (mobile)          • XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 
```
flutter を実行する
XXXには先ほどメモしたデバイスIDを入力
```bash:bash
flutter run -d XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
```
アプリがインストールされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/3fd604f6-6ee8-f481-a7bc-a2cdf0031fbb.png)
開くとちゃんとカレンダーが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/8d6795f6-21f0-edeb-a116-8b6860773b8e.png)

## 5. Android Studioで動作確認（Android）
Androidでは**Android Studio**を使用して動作確認してみた

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

エミュレータ作成
More Actions > Virtual Device Manager を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/10df1909-3010-d569-12c8-32bb20cf3be4.png)

`＋`マークからデバイスを選択する
今回はPixel 6a を選択
作成したら▶️マークからデバイスを起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/94961c13-d73f-51be-e6dd-16c7b0be3ef7.png)

デバイスIDを確認する
```bash:bash
flutter devices
```
**emulator-XXXX**となっている所がデバイスIDなのでメモしておく
```bash:結果
 sdk gphone64 arm64 (mobile)     • emulator-XXXX 
```
エミュレータを実行する
```bash:bash
flutter run -d emulator-XXXX  # エミュレーターのデバイスID
```
アプリがダウンロードされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/59f9fe48-dc45-bc91-e741-7a8954e15157.png)

アプリを開くとカレンダーが表示されるようになった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241637/aa1b282c-83b5-042d-7a4d-51d4f667ebe5.png)

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


それではまた！