【Flutter3】Googleスプレッドシートと連携した英単語学習アプリを作る

lib
├── components
│   └── layout_widgets.dart
├── data
│   └── english_word_data.dart
├── pages
│   ├── select_word_page.dart
│   └── title_page.dart
├── settings
│   └── googleapi_settings.dart
└── main.dart

import 'package:flutter/material.dart';
import 'pages/title_page.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'えいすた',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.lime,
      ),
      home: const TitlePage(),
    );
  }
}

import 'package:flutter/material.dart';
import 'select_word_page.dart';
import '../components/layout_widgets.dart';
import '../data/english_word_data.dart';
/// タイトル画面
class TitlePage extends StatefulWidget {
  const TitlePage({super.key});
  @override
  State<TitlePage> createState() => _TitlePageState();
}
class _TitlePageState extends State<TitlePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('えいすた！'),
        leading: Icon(
          Icons.book,
          color: Theme.of(context).primaryColor,
        ),
      ),
      body: Center(
        child: Column(
          children: [
            HalfScreenArea(
              child: Center(
                child: TitleTextAreaWidget(
                  errorMessage: _errorMessage,
                ),
              ),
            ),
            HalfScreenArea(
              child: Center(
                child: TitleButtonAreaWidget(
                  isOptionShuffle: _isOptionShuffle,
                  onChangedOptionShuffleCheckBox:
                      onChangedOptionShuffleCheckBox,
                  onPressedStartButton: onPressedStartButton,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
・・・
}
・・・

import 'package:flutter/material.dart';
/// 画面半分サイズのエリア
class HalfScreenArea extends StatelessWidget {
  final Widget child;
  const HalfScreenArea({super.key, required this.child});
  @override
  Widget build(BuildContext context) {
    // デバイスの高さを取得して設定
    final double deviceHeight = MediaQuery.of(context).size.height;
    return Expanded(
      flex: 1,
      child: SizedBox(
        height: deviceHeight,
        child: child,
      ),
    );
  }
}

/// タイトルテキストエリア
class TitleTextAreaWidget extends StatelessWidget {
  final String errorMessage; // エラーメッセージ
  const TitleTextAreaWidget({super.key, required this.errorMessage});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // タイトル
        const Text(
          'Let\'s English!!',
          style: TextStyle(
            fontSize: 24,
          ),
        ),
        const SizedBox(height: 20),
        // エラーメッセージ
        SizedBox(
          height: 28,
          child: Text(
            errorMessage,
            style: const TextStyle(
              fontSize: 16,
              color: Colors.red,
            ),
          ),
        ),
        const SizedBox(height: 40),
      ],
    );
  }
}
/// タイトルボタンエリア
class TitleButtonAreaWidget extends StatelessWidget {
  final bool isOptionShuffle;
  final Function onChangedOptionShuffleCheckBox;
  final Function onPressedStartButton;
  const TitleButtonAreaWidget(
      {super.key,
      required this.isOptionShuffle,
      required this.onChangedOptionShuffleCheckBox,
      required this.onPressedStartButton});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // シャッフルオプション
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Checkbox(
              value: isOptionShuffle,
              onChanged: (isOn) => onChangedOptionShuffleCheckBox(isOn),
            ),
            const Text(
              '問題をシャッフルする',
              style: TextStyle(
                fontSize: 16,
              ),
            ),
          ],
        ),
        const SizedBox(height: 20),
        // STARTボタン
        SizedBox(
          width: 120,
          height: 60,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
              foregroundColor: Theme.of(context).backgroundColor,
              backgroundColor: Theme.of(context).primaryColor,
            ),
            onPressed: () => onPressedStartButton(),
            child: const Text('START'),
          ),
        ),
      ],
    );
  }
}

・・・
class _TitlePageState extends State<TitlePage> {
・・・
  bool _isOptionShuffle = false; // シャッフルするか？
  String _errorMessage = ""; // エラーメッセージ
  bool _isDoProcess = false; // 処理中か？
  /// シャッフルチェックボックス切替時
  void onChangedOptionShuffleCheckBox(bool isOn) {
    setState(() {
      _isOptionShuffle = isOn;
    });
  }
  /// STARTボタン押下時
  void onPressedStartButton() async {
    if (_isDoProcess) return;
    _isDoProcess = true;
    setState(() => _errorMessage = "");
    // データ取得
    var englishWordDataList =
        await EnglishWordDataRepository.getEnglishWordDataListFromApi();
    if (englishWordDataList.isEmpty) {
      setState(() => _errorMessage = "データが取得できません");
      _isDoProcess = false;
      return;
    }
    // データを渡してページ遷移
    if (!mounted) return;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SelectWordPage(
          englishWordDataList: englishWordDataList,
          isOptionShuffle: _isOptionShuffle,
        ),
      ),
    );
    _isDoProcess = false;
  }
}
・・・

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../settings/googleapi_settings.dart';
/// 英単語データ
class EnglishWordData {
  EnglishWordData({required this.englishWord, required this.japaneseWord});
  final String englishWord; // 英単語
  final String japaneseWord; // 日本語
}
/// 英単語データリポジトリ
class EnglishWordDataRepository {
  /// APIからのデータ取得
  static Future<List<EnglishWordData>> getEnglishWordDataListFromApi() async {
    final List<EnglishWordData> result = [];
    try {
      // レスポンス取得
      final url = GoogleApiSettings.createGoogleSheetsApiGetUrl();
      final res = await http.get(Uri.parse(url));
      if (res.statusCode != 200) {
        throw ('Failed to Load English Word Data.');
      }
      // 中身のチェック
      final Map<String, dynamic> message = json.decode(res.body);
      if (message['values'] == null) {
        throw ('Please Set English Word Data.');
      }
      // 英単語データとして変換
      final List<dynamic> values = message['values'];
      values.forEach((value) => {
            result.add(
                EnglishWordData(englishWord: value[0], japaneseWord: value[1]))
          });
    } catch (e) {
      print(e); // エラーはログに出力して握りつぶす
    }
    return result;
  }
}

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

class GoogleApiSettings {
  // この辺は各自設定してください
  static const String spreadsSheetsUrl = "";
  static const String sheetName = "";
  static const String apiKey = "";
  /// GoogleSheetsAPI(v4.spreadsheets.values - get)のURL生成
  /// 詳細: https://developers.google.com/sheets/api/reference/rest
  static String createGoogleSheetsApiGetUrl() {
    if (spreadsSheetsUrl.isEmpty || sheetName.isEmpty || apiKey.isEmpty) {
      throw ('please set google api settings.');
    }
    return 'https://sheets.googleapis.com/v4/spreadsheets/${spreadsSheetsUrl}/values/${sheetName}?key=${apiKey}';
  }
}

import 'package:flutter/material.dart';
import '../components/layout_widgets.dart';
import '../data/english_word_data.dart';
/// 問題の表示状態
enum QuestionDisplayState {
  none,
  ok,
  ng,
  result,
}
/// 単語選択画面
class SelectWordPage extends StatefulWidget {
  final List<EnglishWordData> englishWordDataList;
  final bool isOptionShuffle;
  const SelectWordPage(
      {super.key,
      required this.englishWordDataList,
      required this.isOptionShuffle});
  @override
  State<SelectWordPage> createState() => _SelectWordPageState();
}
class _SelectWordPageState extends State<SelectWordPage> {
  // 英単語データリスト
  List<EnglishWordData> _englishWordDataList = [];
  // 問題の表示状態
  QuestionDisplayState _questionDisplayState = QuestionDisplayState.none;
  // 問題データ
  EnglishWordData? _questionWordData;
  int _questionIndex = 0;
  int _okAnswerCount = 0;
  // 選択単語リスト
  List<String> _selectWordList = [];
  // 選択単語数
  static const int selectWordCount = 4;
・・・
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(''),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: displaySelectWordPageWidgetList(),
        ),
      ),
    );
  }
  List<Widget> displaySelectWordPageWidgetList() {
    // 結果表示
    if (_questionDisplayState == QuestionDisplayState.result) {
      return [
        SelectWordResultAreaWidget(
          totalIndex: _englishWordDataList.length,
          correctCount: _okAnswerCount,
        ),
      ];
    }
    // 問題表示
    return [
      HalfScreenArea(
        child: SelectWordQuestionAreaWidget(
          question: _questionWordData?.englishWord ?? 'empty',
          answer: _questionWordData?.japaneseWord ?? 'empty',
          index: _questionIndex + 1,
          totalIndex: _englishWordDataList.length,
          questionDisplayState: _questionDisplayState,
        ),
      ),
      HalfScreenArea(
        child: SelectWordButtonsAreaWidget(
          selectWordList: _selectWordList,
          onPressedSelectWordButton: onPressedSelectWordButton,
          isShowNext: _questionDisplayState == QuestionDisplayState.ok ||
              _questionDisplayState == QuestionDisplayState.ng,
          onPressedNextButton: onPressedNextButton,
        ),
      ),
    ];
  }
・・・
}
・・・

  @override
  void initState() {
    super.initState();
    // 遷移元からデータを受け取る
    _englishWordDataList = widget.englishWordDataList;
    // オプション指定されていたらシャッフルする
    if (widget.isOptionShuffle) {
      _englishWordDataList.shuffle();
    }
    // 最初の問題を生成
    _questionIndex = 0;
    _okAnswerCount = 0;
    createQuestion(_questionIndex);
  }
  /// 問題の生成
  void createQuestion(int index) {
    _questionDisplayState = QuestionDisplayState.none;
    _questionWordData = _englishWordDataList[index];
    _selectWordList =
        createRandomSelectWordList(_questionWordData?.japaneseWord ?? 'empty');
  }
  /// 単語選択リスト生成
  List<String> createRandomSelectWordList(String answer) {
    // 単語データをコピー
    var copyEnglishWordDataList = List.of(_englishWordDataList);
    copyEnglishWordDataList.shuffle();
    // 選択する単語リストを生成
    List<String> selectWordList = [];
    selectWordList.add(answer);
    for (var i = 0; i < copyEnglishWordDataList.length; i++) {
      var japaneseWord = copyEnglishWordDataList[i].japaneseWord;
      // 答えとなる日本語は除く
      if (answer == japaneseWord) {
        continue;
      }
      // 指定数設定したら抜ける
      selectWordList.add(japaneseWord);
      if (selectWordList.length >= selectWordCount) {
        break;
      }
    }
    selectWordList.shuffle();
    return selectWordList;
  }

/// 問題文エリア
class SelectWordQuestionAreaWidget extends StatelessWidget {
  final String question;
  final String answer;
  final int index;
  final int totalIndex;
  final QuestionDisplayState questionDisplayState;
  const SelectWordQuestionAreaWidget(
      {super.key,
      required this.question,
      required this.answer,
      required this.index,
      required this.totalIndex,
      required this.questionDisplayState});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        // 問題数
        Padding(
          padding: const EdgeInsets.all(24),
          child: Text(
            '$index / $totalIndex',
            style: const TextStyle(
              fontSize: 20,
            ),
          ),
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 16),
              // 問題文
              Text(
                question,
                style: const TextStyle(
                  fontSize: 28,
                ),
              ),
              const SizedBox(height: 8),
              // 結果表示
              getAnsewerWordTextWidget(answer, questionDisplayState),
              const SizedBox(height: 32),
              getAnsewerResultTextWidget(questionDisplayState),
            ],
          ),
        ),
      ],
    );
  }
  Widget getAnsewerWordTextWidget(String answer, QuestionDisplayState state) {
    var color = Colors.white;
    if (state == QuestionDisplayState.none) {
      color = color.withOpacity(0.0);
    }
    return Text(
      answer,
      style: TextStyle(
        fontSize: 18,
        color: color,
      ),
    );
  }
  Widget getAnsewerResultTextWidget(QuestionDisplayState state) {
    var message = "";
    var color = Colors.black;
    switch (state) {
      case QuestionDisplayState.ok:
        message = "○";
        color = Colors.red;
        break;
      case QuestionDisplayState.ng:
        message = "×";
        color = Colors.blue;
        break;
      case QuestionDisplayState.none:
      case QuestionDisplayState.result:
        break;
    }
    return SizedBox(
      height: 42, // 文字の内容に限らず高さを固定
      child: Text(
        message,
        style: TextStyle(
          fontSize: 32,
          color: color,
        ),
      ),
    );
  }
}

/// 単語選択ボタンエリア
class SelectWordButtonsAreaWidget extends StatelessWidget {
  final List<String> selectWordList;
  final Function onPressedSelectWordButton;
  final bool isShowNext;
  final Function onPressedNextButton;
  const SelectWordButtonsAreaWidget(
      {super.key,
      required this.selectWordList,
      required this.onPressedSelectWordButton,
      required this.isShowNext,
      required this.onPressedNextButton});
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      // 単語選択ボタン群
      Expanded(
        flex: 5,
        child: GridView.count(
          physics: const NeverScrollableScrollPhysics(),
          mainAxisSpacing: 20,
          crossAxisSpacing: 20,
          padding: const EdgeInsets.all(50.0),
          childAspectRatio: 2.5,
          crossAxisCount: 2,
          scrollDirection: Axis.vertical,
          children: selectWordList
              .map((selectWord) => SelectWordButtonWidget(
                    text: selectWord,
                    onPressed: isShowNext ? null : onPressedSelectWordButton,
                  ))
              .toList(),
        ),
      ),
      // NEXTボタン
      if (isShowNext)
        Expanded(
          flex: 3,
          child: Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: const EdgeInsets.only(right: 48),
              child: TextButton(
                onPressed: () => onPressedNextButton(),
                child: Text(
                  'NEXT ▶︎',
                  style: TextStyle(
                    fontSize: 18,
                    color: Theme.of(context).primaryColor,
                  ),
                ),
              ),
            ),
          ),
        ),
    ]);
  }
}
/// 単語選択ボタン
class SelectWordButtonWidget extends StatelessWidget {
  final String text;
  final Function? onPressed;
  const SelectWordButtonWidget(
      {super.key, required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        textStyle: const TextStyle(fontSize: 14),
        foregroundColor: Theme.of(context).backgroundColor,
        backgroundColor: Theme.of(context).primaryColor,
      ),
      onPressed: onPressed == null ? null : () => onPressed!(text),
      child: Text(text),
    );
  }
}

class _SelectWordPageState extends State<SelectWordPage> {
・・・
  /// 単語ボタン押下処理
  void onPressedSelectWordButton(String selectWord) {
    // 答え合わせ
    setState(() {
      var isCorrect = selectWord == _questionWordData?.japaneseWord;
      if (isCorrect) _okAnswerCount++;
      _questionDisplayState =
          isCorrect ? QuestionDisplayState.ok : QuestionDisplayState.ng;
    });
  }
  /// NEXTボタン押下処理
  void onPressedNextButton() {
    setState(() {
      // 最後まで問題を出したら結果表示
      _questionIndex++;
      if (_englishWordDataList.length <= _questionIndex) {
        _questionDisplayState = QuestionDisplayState.result;
        return;
      }
      // 次の問題を表示
      createQuestion(_questionIndex);
    });
  }
}
・・・

/// 結果表示
class SelectWordResultAreaWidget extends StatelessWidget {
  final int totalIndex;
  final int correctCount;
  const SelectWordResultAreaWidget(
      {super.key, required this.totalIndex, required this.correctCount});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text(
            '正解数: $correctCount / $totalIndex',
            style: const TextStyle(
              fontSize: 24,
            ),
          ),
          const SizedBox(height: 40),
          SizedBox(
            width: 120,
            height: 60,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                textStyle: const TextStyle(fontSize: 20),
                foregroundColor: Theme.of(context).backgroundColor,
                backgroundColor: Theme.of(context).primaryColor,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('BACK'),
            ),
          ),
        ],
      ),
    );
  }
}