[WIP]Homete-YO開発記録 〜ChatGPTにコード全部考えてもらう〜

$ flutter --version
Flutter 3.7.12 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 4d9e56e694 (2 weeks ago) • 2023-04-17 21:47:46 -0400
Engine • revision 1a65d409c7
Tools • Dart 2.19.6 • DevTools 2.20.1

flutter create my_flutter_web_project

cd my_flutter_web_project
flutter config --enable-web

flutter run -d chrome

dependencies:
  flutter:
    sdk: flutter
  url_strategy: ^0.2.0

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

void main() {
  // 以下の行を追加して、URL戦略を設定します。
  setPathUrlStrategy();
  runApp(MyApp());
}

import 'index_page.dart';
import 'result_page.dart';
import 'static_content_page.dart';

// MyApp クラス内で、MaterialApp ウィジェットを以下のように編集
MaterialApp(
  title: 'My Flutter Web App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  initialRoute: '/', // 初期ルートを設定
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (context) => IndexPage());
      case '/reply':
        final String? statusId = settings.arguments as String?;
        return MaterialPageRoute(
          builder: (context) => ResultPage(statusId: statusId ?? ''),
        );
      case '/static_content':
        return MaterialPageRoute(builder: (context) => StaticContentPage());
      default:
        return MaterialPageRoute(builder: (context) => IndexPage());
    }
  },
),

// IndexPage クラス内の build メソッド内に以下を追加
ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/reply', arguments: 'some_status_id');
  },
  child: Text('Go to Reply Page'),
),

dependencies:
  flutter:
    sdk: flutter
  url_strategy: ^0.2.0
  path_regexp: ^1.2.0

import 'package:flutter/material.dart';
import 'package:path_regexp/path_regexp.dart';
import 'index_page.dart';
import 'result_page.dart';
import 'static_content_page.dart';

// MyApp クラス内で、MaterialApp ウィジェットを以下のように編集
MaterialApp(
  title: 'My Flutter Web App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  initialRoute: '/', // 初期ルートを設定
  onGenerateRoute: (settings) {
    // ResultPageへのルートパターンを作成
    final resultPageRoutePattern = PathRegExp(r'^/result/(\d+)$');
    final matchResult = resultPageRoutePattern.match(settings.name!);

    if (matchResult != null) {
      final statusId = matchResult.parameters[0];
      return MaterialPageRoute(
        builder: (context) => ResultPage(statusId: statusId),
      );
    }

    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (context) => IndexPage());
      case '/static_content':
        return MaterialPageRoute(builder: (context) => StaticContentPage());
      default:
        return MaterialPageRoute(builder: (context) => IndexPage());
    }
  },
),

dependencies:
  flutter:
    sdk: flutter
  url_strategy: ^0.2.0
  path_to_regexp: ^1.7.0

import 'package:flutter/material.dart';
import 'package:path_to_regexp/path_to_regexp.dart';
import 'index_page.dart';
import 'result_page.dart';
import 'static_content_page.dart';

// MyApp クラス内で、MaterialApp ウィジェットを以下のように編集
MaterialApp(
  title: 'My Flutter Web App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  initialRoute: '/', // 初期ルートを設定
  onGenerateRoute: (settings) {
    // ResultPageへのルートパターンを作成
    final resultPageRoutePattern = PathRegExp(r'^/result/(\d+)$');
    final matchResult = resultPageRoutePattern.match(settings.name!);

    if (matchResult != null) {
      final statusId = matchResult.parameters[0];
      return MaterialPageRoute(
        builder: (context) => ResultPage(statusId: statusId),
      );
    }

    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (context) => IndexPage());
      case '/static_content':
        return MaterialPageRoute(builder: (context) => StaticContentPage());
      default:
        return MaterialPageRoute(builder: (context) => IndexPage());
    }
  },
),

material designに則った形で、IndexPageの画面を以下のように実装したいと思います。実装方法を提示してください。

【画面仕様】

* AppBarは現行のままとする
* 以下を中央配置で縦に並べて表示する
  * アプリの簡単な説明などを表示するテキスト
  * 複数行入力可能なテキストフィールド
  * テキストフィールドの内容を送信するための送信ボタン
* 送信中に画面を操作できないようにするために、上記にかぶせるように表示ができる円形のプログレス
* 著作権表示、利用規約のリンクなどを設定するためのフッター

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  TextEditingController _controller = TextEditingController();
  bool _isLoading = false;

  void _submitText() {
    setState(() {
      _isLoading = true;
    });

    // テキストフィールドの内容を送信する処理をここに記述

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Index Page'),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'アプリの簡単な説明などを表示するテキスト',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 16),
                Container(
                  width: 300,
                  child: TextField(
                    controller: _controller,
                    maxLines: null,
                    keyboardType: TextInputType.multiline,
                    decoration: InputDecoration(
                      hintText: '複数行入力可能なテキストフィールド',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: _submitText,
                  child: Text('送信'),
                ),
              ],
            ),
          ),
          if (_isLoading)
            Container(
              color: Colors.black38,
              child: Center(child: CircularProgressIndicator()),
            ),
        ],
      ),
      bottomNavigationBar: Container(
        height: 60,
        color: Colors.grey[200],
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text('© 著作権表示'),
              TextButton(
                onPressed: () {
                  // 利用規約のリンククリック時の処理
                },
                child: Text('利用規約'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  TextEditingController _controller = TextEditingController();
  bool _isLoading = false;

  void _submitText() {
    setState(() {
      _isLoading = true;
    });

    // テキストフィールドの内容を送信する処理をここに記述

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    int textLength = _controller.text.length;
    bool overLimit = textLength > 100;

    return Scaffold(
      appBar: AppBar(
        title: Text('Index Page'),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'アプリの簡単な説明などを表示するテキスト',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 16),
                Container(
                  width: 300,
                  child: TextField(
                    controller: _controller,
                    maxLines: 8,
                    keyboardType: TextInputType.multiline,
                    decoration: InputDecoration(
                      hintText: '複数行入力可能なテキストフィールド',
                      border: OutlineInputBorder(),
                    ),
                    onChanged: (value) {
                      setState(() {}); // 入力されたテキストに応じてウィジェットを再描画
                    },
                  ),
                ),
                SizedBox(height: 8),
                Text('文字数: $textLength'),
                if (overLimit)
                  Text(
                    '入力文字数が100文字を超えています。',
                    style: TextStyle(color: Colors.red),
                  ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: _submitText,
                  child: Text('送信'),
                ),
              ],
            ),
          ),
          if (_isLoading)
            Container(
              color: Colors.black38,
              child: Center(child: CircularProgressIndicator()),
            ),
        ],
      ),
      bottomNavigationBar: Container(
        height: 60,
        color: Colors.grey[200],
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text('© 著作権表示'),
              TextButton(
                onPressed: () {
                  // 利用規約のリンククリック時の処理
                },
                child: Text('利用規約'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

   @override
   Widget build(BuildContext context) {
     int textLength = _controller.text.length;
     bool overLimit = textLength > 100;

     return Scaffold(
       appBar: AppBar(
...
                 SizedBox(height: 16),
                 ElevatedButton(
-                  onPressed: _submitText,
+                  onPressed: overLimit ? null : _submitText,
                   child: Text('送信'),
                 ),
               ],
             ),
           ),
           if (_isLoading)
...

   @override
   Widget build(BuildContext context) {
     int textLength = _controller.text.length;
     bool overLimit = textLength > 100;

     bool submitDisabled = overLimit || textLength == 0;

     return Scaffold(
       appBar: AppBar(
...
                 SizedBox(height: 16),
                 ElevatedButton(
                   onPressed: submitDisabled ? null : _submitText,
                   child: Text('送信'),
+                  style: ElevatedButton.styleFrom(
+                    minimumSize: Size(88, 40), // 最低幅88dp(左右24dp * 2 + テキスト幅40dp)、高さ40dp
+                    padding: EdgeInsets.symmetric(horizontal: 24), // 左右のスペースを24dp確保
+                  ),
                 ),
               ],
             ),
           ),
           if (_isLoading)
...

dependencies:
  http: ^0.13.3

APIのエンドポイントを定義するための方法を提示してください。ファイルはapi.dartでいきましょう。
エンドポイントは以下を想定しています。ドメインなどは、今後変更があります。

- GET https://example.com/read/?postId=[postId]
  - クエリのpostIdは必須で文字列の情報を送信します
  - postIdに基づいたmessageとanswer（どちらも文字列）が返却される
- POST https://example.com/submit/
  - パラメータは以下を送信します
    - テキストの内容を送信するmessageパラメータ
  - 成功でpostIdが返却される（失敗時はpostIdが空白で帰る）

class Api {
  static const String baseUrl = 'https://example.com';

  // GET Endpoint
  static Uri readEndpoint(String postId) {
    return Uri.parse('$baseUrl/read/?postId=$postId');
  }

  // POST Endpoint
  static Uri submitEndpoint() {
    return Uri.parse('$baseUrl/submit/');
  }
}

import 'package:flutter/material.dart';
+ import 'package:http/http.dart' as http;
+ import 'api.dart';

class IndexPage extends StatefulWidget {
  const IndexPage({Key? key}) : super(key: key);

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

class _IndexPageState extends State<IndexPage> {
  final TextEditingController _controller = TextEditingController();
  bool _isLoading = false;

  void _submitText() async {
+   setState(() {
+     _isLoading = true;
+   });

+   // POSTリクエストを送信し、レスポンスを取得
+   final response = await http.post(
+     Api.submitEndpoint(),
+     body: {
+       'message': _controller.text,
+     },
+   );

+   if (response.statusCode == 200) {
+     // レスポンスを処理（例: postIdを取得して結果ページへ遷移）
+   } else {
+     // エラーハンドリング
+   }

+   setState(() {
+     _isLoading = false;
+   });
  }

  @override
  Widget build(BuildContext context) {
    int textLength = _controller.text.length;
    bool overLimit = textLength > 100;
    bool submitDisabled = overLimit || textLength == 0;

    return Scaffold(
      appBar: AppBar(
        title: Text('Index Page'),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('テキストを入力してください。'),
                TextField(
                  controller: _controller,
                  maxLines: 8,
                  onChanged: (text) => setState(() {}),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: submitDisabled ? null : _submitText,
                  child: Text('送信'),
                  style: ElevatedButton.styleFrom(
                    minimumSize: Size(88, 40),
                    padding: EdgeInsets.symmetric(horizontal: 24),
                  ),
                ),
              ],
            ),
          ),
          if (_isLoading)
            Container(
              color: Colors.black.withOpacity(0.5),
              child: Center(child: CircularProgressIndicator()),
            ),
        ],
      ),
    );
  }
}

  Future<String?> _submitText() async {
    setState(() {
      _isLoading = true;
    });

    final response = await http.post(
      Api.submitEndpoint(),
      body: {
        'message': _controller.text,
      },
    );

    setState(() {
      _isLoading = false;
    });

    if (response.statusCode == 200) {
      // レスポンスを処理（例: postIdを取得して結果ページへ遷移）
      return null;
    } else {
      // エラーハンドリング
      return 'エラーメッセージ: ${response.body}';
    }
  }

ElevatedButton(
  onPressed: !_isValid || _isLoading ? null : () {
    _submitText().then((errorMessage) {
      if (errorMessage != null) {
        _showErrorDialog(context, errorMessage);
      }
    });
  },
  child: const Text('送信'),
),

abstract class SubmitResult {}

class Success extends SubmitResult {
  final String postId;

  Success({required this.postId});
}

class Error extends SubmitResult {
  final String errorMessage;

  Error({required this.errorMessage});
}

Future<SubmitResult> _submitText(String message) async {
  // APIリクエストを行う処理

  if (/* 成功時の条件 */) {
    return Success(postId: "example_post_id");
  } else {
    return Error(errorMessage: "An error occurred.");
  }
}

SubmitResult result = await _submitText("example_message");

if (result is Success) {
  print("Success! Post ID: ${result.postId}");
} else if (result is Error) {
  print("Error: ${result.errorMessage}");
}

import 'package:flutter/material.dart';

class CustomFooter extends StatelessWidget {
  const CustomFooter({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Text('© 2023 MyApp. All rights reserved.'),
          TextButton(
            onPressed: () {
              // プライバシーポリシーへの遷移処理
            },
            child: Text('Privacy Policy'),
          ),
        ],
      ),
    );
  }
}

import 'package:your_project/widgets/custom_footer.dart';

ResultPageにIndexPageと同様、material designに則った形で以下の仕様に則った内容の実装方法を提示してください。

【画面仕様】

* AppBarは現行のままとする
* 以下を中央配置で縦に並べて表示する
  * 吹き出しのような枠に収められたテキスト（テキスト自体は左揃え）
  * 同様に吹き出しのような形に収まったテキスト（こちらのテキストは右揃え）
  * Twitter、Fbへのシェアを可能とするボタンの配置
* データ取得中に画面を操作できないようにするために、上記にかぶせるように表示ができる円形のプログレス
* 著作権表示、利用規約のリンクなどを設定するためのフッター

import 'package:flutter/material.dart';

class SpeechBubble extends StatelessWidget {
  final String text;
  final TextAlign textAlign;

  const SpeechBubble({
    Key? key,
    required this.text,
    required this.textAlign,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.grey[200],
      ),
      child: Text(
        text,
        textAlign: textAlign,
      ),
    );
  }
}

import 'package:your_project/widgets/speech_bubble.dart';

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SpeechBubble(
      text: '左揃えのテキスト',
      textAlign: TextAlign.left,
    ),
    SizedBox(height: 20),
    SpeechBubble(
      text: '右揃えのテキスト',
      textAlign: TextAlign.right,
    ),
    SizedBox(height: 20),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          icon: Icon(Icons.share),
          onPressed: () {
            // Twitterのシェア処理
          },
        ),
        IconButton(
          icon: Icon(Icons.share),
          onPressed: () {
            // Facebookのシェア処理
          },
        ),
      ],
    ),
  ],
),

Stack(
  children: [
    Column(
      // 上記で作成したColumn
    ),
    if (isLoading)
      Center(
        child: CircularProgressIndicator(),
      ),
  ],
),

// ... その他のコード ...

class _ResultPageState extends State<ResultPage> {
  // ... その他のコード ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result'),
      ),
      body: Stack(
        children: [
          Center(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: ConstrainedBox(
                constraints: BoxConstraints(maxWidth: 560),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    SpeechBubble(
                      text: 'Left aligned text',
                      alignment: TextAlign.left,
                    ),
                    SizedBox(height: 16),
                    SpeechBubble(
                      text: 'Right aligned text',
                      alignment: TextAlign.right,
                    ),
                    // ... その他のコード ...
                  ],
                ),
              ),
            ),
          ),
          // ... その他のコード ...
        ],
      ),
      bottomNavigationBar: CustomFooter(),
    );
  }
}

// ... その他のコード ...

dependencies:
  flutter:
    sdk: flutter
  # ... その他の依存関係 ...
  flutter_dotenv: ^6.0.0

API_BASE_URL=https://dev.example.com/api/

API_BASE_URL=https://prod.example.com/api/

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter/material.dart';
import 'app.dart';

Future main() async {
  await dotenv.load(fileName: ".env");
  runApp(MyApp());
}

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter/material.dart';
import 'app.dart';

Future main() async {
  await dotenv.load(fileName: ".env.production");
  runApp(MyApp());
}

import 'package:flutter_dotenv/flutter_dotenv.dart';

class Api {
  final String baseUrl = dotenv.env['API_BASE_URL']!;
  // ... その他のコード ...
}

flutter run -t lib/main.dart

flutter run -t lib/main_production.dart

import 'package:firebase_auth/firebase_auth.dart';

Future<String> getIdToken() async {
  final user = FirebaseAuth.instance.currentUser;
  final tokenResult = await user.getIdToken();
  return tokenResult.token;
}

import 'package:http/http.dart' as http;

Future<http.Response> callProtectedFunction(String idToken) async {
  final response = await http.get(
    'https://your-cloud-function-url.example.com/your-path',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer $idToken',
    },
  );
  return response;
}

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.yourFunction = functions.https.onRequest(async (req, res) => {
  try {
    // Get ID token from Authorization header
    const authToken = req.headers.authorization?.split('Bearer ')[1];

    // Verify ID token
    const decodedToken = await admin.auth().verifyIdToken(authToken);

    // Now you have the decoded token, and you can get the user's UID
    const uid = decodedToken.uid;

    // Your logic here
    res.status(200).send('Your protected function was called!');
  } catch (error) {
    console.error('Error verifying ID token:', error);
    res.status(401).send('Unauthorized');
  }
});

npm install cors

const functions = require("firebase-functions");
const cors = require("cors")({ origin: true });

exports.yourFunction = functions.https.onRequest((request, response) => {
  // CORSミドルウェアを適用
  cors(request, response, () => {
    // ここに関数の実装を書く
  });
});