【コード解説：Flutter】UI と、スケジュール一覧の取得・スケジュールの作成機能の実装

LIFFID=<あなたの LIFF ID>
GAS_URL=<あなたの GAS URL。例：https://script.google.com/macros/s/.../exec>

flutter run -d web-server --web-port 8080

# FVM を使用している場合は fvm flutter とします。
fvm flutter run -d web-server --web-port 8080

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

/// LIFF アプリとして起動すると、main() の中で 上書きされるユーザー ID。
String userId = '';

Future<void> main() async {
  await dotenv.load(fileName: '.env');
  final liffId = dotenv.get('LIFFID', fallback: '.env に LIFFID を指定してください。');
  // JS の Promise を Dart の Future に変換するために promiseToFuture() でラップする。
  await promiseToFuture(
    liff.init(
      liff.Config(
        liffId: liffId,
        // JS に関数を渡すために allowInterop() でラップする。
        successCallback: allowInterop(() => log('LIFF の初期化に成功しました。')),
        errorCallback: allowInterop((e) => log('LIFF の初期化に失敗しました。$e')),
      ),
    ),
  );

  // デバッグモードではユーザー ID 取得のエラーを無視する。
  userId = await promiseToFuture(liff.getUserId(kDebugMode));
  runApp(const App());
}

/// main() の runApp() の引数に指定するウィジェット。
/// 中で MaterialApp を返す。
class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LIFF Scheduler',
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        dragDevices: {
          PointerDeviceKind.mouse,
          PointerDeviceKind.touch,
          PointerDeviceKind.stylus,
          PointerDeviceKind.unknown,
        },
      ),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SchedulesPage(),
    );
  }
}

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('ボタンを押した回数'),
            Text('$_counter'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

  @override
  SchedulesPageState createState() => SchedulesPageState();
}

class SchedulesPageState extends State<SchedulesPage> {
  Future<List<Schedule>> _schedules = fetchSchedules();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('スケジュール一覧')),
      body: FutureBuilder<List<Schedule>>(
        future: _schedules,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // future 属性に指定したスケジュール取得が解決した場合は、
            // その内容を List<Schedule> 型として取得し、ListView.builder で描画する。
            final schedules = snapshot.data ?? [];
            return ListView.builder(
              itemCount: schedules.length,
              itemBuilder: (context, index) {
                final schedule = schedules[index];
                return ListTile(title: Text(schedule.title));
              },
            );
          } else {
            // future 属性に指定したスケジュール取得の解決を待つ間は、
            // 画面中央にローディングウィジェットを表示する。
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

/// Get Schedules API (GAS) をコールして、指定したユーザーのスケジュール一覧を取得する。
Future<List<Schedule>> fetchSchedules() async {
  final response = await http.get(
    Uri.parse('https://script.google.com/macros/s/.../exec?userId=<あなたのユーザーID>'),
    headers: <String, String>{
      'Accept': 'application/json',
    },
  );
  final schedules =
      (jsonDecode(response.body) as List).map((json) => Schedule.fromJson(json)).toList();
  return schedules;
}

factory Schedule.fromJson(Map<String, dynamic> json) => Schedule(
    userId: (json['userId'] ?? '') as String,
    title: (json['title'] ?? '') as String,
    dueDateTime: DateTime.fromMillisecondsSinceEpoch(json['dueDateTime']),
    isNotified: json['isNotified'] ?? false,
);

final titleController = TextEditingController();

TextField(
  controller: titleController,
  decoration: const InputDecoration(
    labelText: 'スケジュール名',
    border: OutlineInputBorder(),
  ),
),

Future<void> _createSchedule() async {
  final title = titleController.value.text;
  await createSchedule(title: title, dueDateTime: dueDateTime);
}

dependencies:
  flutter_datetime_picker: ^1.5.1

fvm flutter pub get

class CreateSchedulePageState extends State<CreateSchedulePage> {
  // ... 省略
  
  /// スケジュールを登録する。
  Future<void> _createSchedule() async {
    final navigator = Navigator.of(context);
    final title = titleController.value.text;
    if (title.isEmpty) {
      _showSnackBar('タイトルを入力してください。');
      return;
    }
    if (dueDateTime == null) {
      _showSnackBar('日時を入力してください。');
      return;
    }
    setState(() => submitting = true);
    try {
      await createSchedule(title: title, dueDateTime: dueDateTime!);
    } finally {
      setState(() => submitting = false);
    }
    navigator.pop();
  }

  /// SnackBar を表示する。
  void _showSnackBar(String text) =>
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(text)));
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:flutter_liff_scheduler/main.dart';
import 'package:flutter_liff_scheduler/utils/date_time.dart';

import '../http_request.dart';
import '../schedule.dart';

/// スケジュール一覧ページ。
class SchedulesPage extends StatefulWidget {
  const SchedulesPage({super.key});

  @override
  SchedulesPageState createState() => SchedulesPageState();
}

class SchedulesPageState extends State<SchedulesPage> {
  Future<List<Schedule>> _schedules = fetchSchedules();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('スケジュール一覧')),
      body: FutureBuilder<List<Schedule>>(
        future: _schedules,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            final schedules = snapshot.data ?? [];
            return RefreshIndicator(
              onRefresh: () async {
                _schedules = fetchSchedules();
                await _schedules;
                setState(() {});
              },
              child: Column(
                children: [
                  if (userId.isEmpty)
                    Container(
                      margin: const EdgeInsets.all(16),
                      padding: const EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: Colors.yellow[100],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: const Text(
                        '⚠️ ユーザー ID を取得できていないため '
                        'LIFF アプリとして正常に機能しない可能性があります',
                      ),
                    ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: schedules.length,
                      itemBuilder: (context, index) {
                        final schedule = schedules[index];
                        return ListTile(
                          leading: Container(
                            margin: const EdgeInsets.only(top: 4),
                            padding: const EdgeInsets.all(4),
                            decoration: BoxDecoration(
                              color: schedule.isNotified ? Colors.grey : Colors.blue,
                              borderRadius: BorderRadius.circular(4),
                            ),
                            child: Text(
                              schedule.isNotified ? '通知済み' : '通知予定',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 10,
                              ),
                            ),
                          ),
                          title: Text(
                            schedule.title,
                            style: const TextStyle(fontWeight: FontWeight.bold),
                          ),
                          subtitle: Text(schedule.dueDateTime.toJapaneseFormat),
                        );
                      },
                    ),
                  ),
                ],
              ),
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () async {
          await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const CreateSchedulePage(),
              fullscreenDialog: true,
            ),
          );
          // 元の画面に戻った際にスケジュール一覧を取得・描画し直す。
          _schedules = fetchSchedules();
          setState(() {});
        },
      ),
    );
  }
}

/// スケジュールを作成するページ。
class CreateSchedulePage extends StatefulWidget {
  const CreateSchedulePage({super.key});

  @override
  CreateSchedulePageState createState() => CreateSchedulePageState();
}

class CreateSchedulePageState extends State<CreateSchedulePage> {
  late TextEditingController titleController;
  late TextEditingController dueDateTimeController;
  DateTime? dueDateTime;
  bool submitting = false;

  @override
  void initState() {
    titleController = TextEditingController();
    dueDateTimeController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    titleController.dispose();
    dueDateTimeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('スケジュール登録')),
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                TextField(
                  controller: titleController,
                  decoration: const InputDecoration(
                    labelText: 'スケジュール名',
                    border: OutlineInputBorder(),
                  ),
                ),
                const SizedBox(height: 32),
                TextField(
                  controller: dueDateTimeController,
                  readOnly: true,
                  onTap: () async {
                    final now = DateTime.now();
                    final oneHourLater = DateTime(
                      now.year,
                      now.month,
                      now.day,
                      now.hour + 1,
                    );
                    await DatePicker.showDateTimePicker(
                      context,
                      currentTime: dueDateTime ?? oneHourLater,
                      minTime: oneHourLater,
                      onConfirm: (dateTime) => setState(() {
                        dueDateTime = dateTime;
                        dueDateTimeController.text = dateTime.toJapaneseFormat;
                      }),
                    );
                  },
                  decoration: const InputDecoration(
                    labelText: '日時',
                    border: OutlineInputBorder(),
                  ),
                ),
                const SizedBox(height: 32),
                ElevatedButton(
                  onPressed: () => submitting ? null : _createSchedule(),
                  child: Text(submitting ? '通信中...' : 'スケジュールを登録'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// スケジュールを登録する。
  Future<void> _createSchedule() async {
    final navigator = Navigator.of(context);
    final title = titleController.value.text;
    if (title.isEmpty) {
      _showSnackBar('タイトルを入力してください。');
      return;
    }
    if (dueDateTime == null) {
      _showSnackBar('日時を入力してください。');
      return;
    }
    setState(() => submitting = true);
    try {
      await createSchedule(title: title, dueDateTime: dueDateTime!);
    } finally {
      setState(() => submitting = false);
    }
    navigator.pop();
  }

  /// SnackBar を表示する。
  void _showSnackBar(String text) =>
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(text)));
}