ChatGPT Prompts
for Flutter developer

Flutter Prompts は Flutter エンジニアのスマホアプリ開発生産性を
劇的に向上する ChatGPT のプロンプト集です。

プロンプトを探す
Prompt Template Ideas
WidgetTree 穴埋め
実装したい WidgetTree にコメントで実装指示を出すことで 追加したい Widget のコードを得ることができます。
実装要件の定義
マークダウンを使用して書かれた要件定義書をそのままメガプロンプトとして使用することができます。
ライブラリ検索
目的に合わせた使用したい Dart および Flutter のパッケージを見つけることができます。
デザイン作成
正確なデザイン用語を用いたプロンプトを使用することで、最適なライブラリや実装方法をサジェストしてくれます。
Prompts Ideas
AllWidgetパッケージFirebaseデザインTipsOther
Firebase auth を使したログアウト
Copied!

あなたはFlutterのリードエンジニアです。
Firebaseを使用したログアウト機能を実装するコードを書いてください。
追加が必要なパッケージはバージョンとpubspec.yamlへ追加するコードも教えてください。

# 制約条件
- Flutterのバージョンは2.2.0を使用してください。

# その他
- このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。

# 要件 のセクションを追加し箇条書きで詳細要件を書くとよりコードが期待通りになります。
widgetのコード生成
Copied!

あなたは、Flutterのリードエンジニアです。
要件、制約条件をもとにボタンのコードを書いてください。

# 要件
- ボタンテキスト : 登録はこちら
- Color : #4169e1


# 制約条件
- Flutterのバージョンは2.2.0を使用してください。

# その他
このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。

# 要件に文字の色などを箇条書きで追加することでそれに合わせてコードを生成してくれます。
提示されたコードのエラー対応
Copied!

以下のエラーの対処方法を実行環境をもとにstep by step で教えてください
コードの変更をする場合は差分を教えてください

# エラー文
```
A problem occurred evaluating project ':app'.
> Plugin with id 'com.android.application' not found.
```

# 実行環境
- Flutter : 2.2.0
-  Dart : 2.13.0

step by stepを入れることでエラー対応を順番に教えてくれます。
要件をもとにコード生成
Copied!

あなたはFlutterのリードエンジニアです。
アプリ画面のコードを書いてください。
追加が必要なパッケージはバージョンとpubspec.yamlへ追加するコードも教えてください

# 要件
- ListViewで10個のContainerを並べること
- ドラックアンドドロップをするとリストの順番を並び替えられること

## Containerの要件
- グラスモーフィズムを用いたデザインにすること
- 1~10の数字を表示すること
- 横にスライドをすると「削除」と書かれたボタンが表示されること
- 「削除」ボタンは通常時は非表示とし、横にスライドした場合にのみ表示されること
- 「削除」を押した場合は、対象のContainerが削除されること

# 制約条件
- Flutterのバージョンは2.2.0を使用してください。

# その他
- このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。  

「グラスモーフィズムを用いた...」の箇所は、サーバーパンク、ヴェイパーウェイブ、ニュートロ、などのデザイン名称に変えることでそれっぽいデザインの画面になります。
デザインされたwidgetのコード生成
Copied!

あなたは、Flutterのリードエンジニアです。
サイバーパンク風の最高デザインのbottomNaviBarのコードを要件、制約条件をもとに書いてください。

# 要件
- 要素:ホーム、検索、マイページ

# 制約条件
- Flutterのバージョンは2.2.0を使用してください。
- class名はCustomBottomNavigationBar03としてください

# その他
このタスクで最高の結果をだすために、追加の情報が必要な場合は、質問をしてください。

「グラスモーフィズムを用いた...」の箇所は、サーバーパンク、ヴェイパーウェイブ、ニュートロ、などのデザイン名称に変えることもできます。
WidgetTree穴埋め
Copied!

あなたはFlutterのリードエンジニアです。
FlutterでMyPage()へ画面遷移するコードを書きたいです。
以下のコードと制約条件を元にコードを書いてください。

# コード
```
Column(
 children: [
   TextField(
     controller: _controller,
   ),
// ここにMyPage()へ遷移するコードを追加したい
     child: Text('Submit'),
   ),
 ],
)
```


# 制約条件
- Flutterのバージョン:2.2.0

コードを追加したい箇所に具体的なwidget名を追加できます。制約条件には、アーキテクチャ、状態管理を入れることができますがriverpodは苦手です。
Firebaseのテーブル設計
Copied!

あなたはFirebaseのバックエンドエンジニアです。
以下の要件、制約条件を元にチャットのデータベースを設計してください。
アウトプットは表でまとめてください。

# 要件
- グループチャットにも対応すること
- 画像データ、PDFファイルを添付可能

# 制約条件
- Firestoreを使うこと
- 各フィールドのタイプを記載すること

# その他
このタスクで最高の結果を出すために、追加の情報が必要な場合は、質問してください

要件の箇所を作りたいDBの要件とすれば設計をしてくれます。詳細を書けば書くほど期待通りのものになります。
WidgetTree穴埋め
Copied!

あなたはFlutterのリードエンジニアです。
以下のwidgetツリーのコードを制約条件をもとに書いてください
追加が必要なパッケージはバージョンとpubspec.yamlへ追加するコードも教えてください

# widgetツリー
```
Scaffold(
body:Column(
// 左寄せに「氏名」とのテキストを配置。
// デザイン:bold, fontsize:16, #4169e1
,
Row(
// 10文字まで入力できるテキストフォームを配置
// 値をfirstNameTextControllerに格納する
// hintText:名字
,
// 10文字まで入力できるテキストフォームを配置
// 値をlastNameTextControllerに格納する
// hintText:名前
)
,
// 左寄せに「プロフィールを入力してください」とのテキストを配置
// デザイン:bold, fontsize:16, #4169e1
,
// 100文字、3行まで入力できるテキストフォームを配置
// 値をbodyTextControllerに格納する
,
// 画面の一番下、中央に「登録する」ボタン配置
//デザイン:#4169e1
),
),
```

# 制約条件
- Flutterのバージョンは2.2.0とすること
- class名はWidgetTree00とすること
- null safetyに対応すること

# その他
このタスクで最高の結果を出すために、追加の情報が必要な場合は、質問してください。

要件を書けば書くほど正確なコードになります。意図しない配置になった場合は要件を追加ないしはコードの修正をお願いしてください。
WidgetTree提示でのコード生成
Copied!

あなたはFlutterのリードエンジニアです。
以下の全体要件、画像要件をもとにコードを書いてください。
追加が必要なパッケージはバージョンとpubspec.yamlへ追加するコードも教えてください。

# 全体要件
- スクロールできること
- 作成する画面のclass名はrequirementsText03 と画面ごとにファイルを分けてください

# 画面要件
## AppBar
- 背景色:#4169e1
- 左寄りに戻るボタン
- 中央に「マイページ」を記入
- 右寄りに設定アイコン(クリックするとSettingPageへ遷移)

## body
- 左寄せ ""経歴"" を配置
- 左寄せに ""経歴テキスト経歴テキスト”を配置
- 左寄せ ""プロフィール"" を配置
- 左寄せに ""プロフィールテキストプロフィールテキストプロフィールテキスト”を配置

## bottom
- 候補者、チャット、マイページ、設定のアイコンを配置
- クリックすると各ページへ遷移できること
- iconの色は#4169e1とすること
- マイページが選択されている状態であること

# 制約条件
- Flutterのバージョンは2.2.0とすること
- null safetyに対応すること

# その他
このタスクで最高の結果を出すために、追加の情報が必要な場合は、質問してください

要件を詳細に書けば書くほどより期待通りのコードを生成してくれます。
もっと見る
💡注意事項
● GPTモデルは 2021年9月までにトレーニングされたモデルのため Flutterのバージョンは当時 Stable であった v2.5.0 以下を使用してください。
● 本サイトのプロンプトは Flutter バージョン v2.2.0 を使用してテストしています。
● ChatGPT plus の Dafalts モデルを使用しています。
最終更新:2023.02.28
Copyright ©︎ SNIFFOUT Inc. All Rights Reserved
ChatGPTへ