Flutter入門の第3弾として今回は、ChatGPT(AI)を活用してflutterの簡単なToDoアプリを作成するまでの手順を説明していきたいと思います!
HATOBAそもそもFlutterが何かよく分かっていない、まだ環境構築ができていないという方は、ぜひこちらの記事を参考にしてください↓



こんにちは。この記事を書いたHATOBA(はとば)です。
- 国公立大 情報通信学科卒
- 開発経験5年以上のエンジニア(おもにJava)
- モバイルアプリ開発を勉強中
【PR】ゼロから学ぶFlutterアプリ開発(Kindle版)
1. ChatGPT(AI)を使ってflutterのコード生成をしてみよう
AIを活用してプログラミングしてみよう!
いまの時代はAIを活用してプログラミングすることで、初心者でも効率よく学習を進められるようになりました。
従来のプログラミング学習では、文法書を読み、よくわからないエラーに悩みながらコードを書く必要がありました。
そのため、途中でつまらなくなって挫折してしまう人も少なくありません。
一方、ChatGPTのようなAIを活用すると、人に質問する感覚でコード生成を依頼できるため、学習ステップの円滑さが以前とは段違いです!
雑談のノリで「こういうアプリを作りたい」と伝えるだけで、土台となるコードをサッと自動生成してくれますからね。



いずれプログラマという仕事が無くなるのは、やはりそう遠くないと思ってます。AIの進化がほんとに凄まじいです。
コーディングはAIにまかせて、githubを使った管理やメンテナンス・運用能力のほうが試されてくる時代です。
※もちろん、いかに品質・保守性の高いコードをAIに精度良く書かせるか、そのために「どういったプロンプトを渡すか」という技量も、自分の手でコーディングする能力よりも求められてくるでしょう。
※こちらの記事はPythonの言語を扱ってるんですが、コードの品質・保守性を高めるコツについて少しまとめてますので、ぜひ参考にしてください!
それでは、以下で具体的にChatGPT(AI)を使ったToDoアプリの作成手順を説明していきます。
ChatGPTでコード生成するためのプロンプト記載例
まずポイントとして、ChatGPTに具体的な指示(プロンプト)を出すことが重要です。
目的をはっきり伝えることで、精度の高いコード生成が可能になります。
例として、以下のような聞き方が効果的です。
FlutterのサンプルとしてToDoアプリを実装したいです
サンプルコードを考えてください
おおまかな仕様として以下をイメージしています
・Todoの項目をカードとして表示し、カードにはそれぞれ完了ボタンと削除ボタンが付いている
・完了を押すとToDo項目は取り消し線が付いた状態になり、削除を押すとカードを削除できる
・カードの並びのいちばん下は入力ブロックになっている
※キーボードからTodo項目を文字入力して登録すると、カードが生成できる仕組み
このように明確なイメージや条件を整理して伝えることで、実用的なコードが得られます。
[PR] IT・Webのスカウト転職サービスなら【レバテックダイレクト】まずは無料登録!
当ブログでは、ある程度経験をお持ちのITエンジニア・クリエイターの方向けの転職サービスとして「レバテックダイレクト」をおすすめしてます。
※画像をクリック/タップするとトップページを開けます↓


どういうサービス?
レバテックダイレクトは、ITエンジニア・デザイナーに特化したスカウト型転職サービスです。
最大の特徴は、企業から直接スカウトが届く仕組みにあります。
一般的な転職エージェントとは異なり、担当者を挟まずに企業とやり取りできるため、
「自分の技術や経験をどう評価しているのか」をダイレクトに知ることが可能です。
特に中堅以上のITエンジニア・クリエイターの方々にとって、以下が魅力的なようです。
- 実務経験を前提とした求人が多い
- 技術スタックや開発環境が詳細に掲載されている
- 面談・面接確約のスカウトが多く、無駄な書類選考が少ない
「とりあえず数を打つ転職活動」ではなく、
自分の市場価値を確認しながら、質の高いオファーを待つという使い方のできる点が強みと言えます。
申込方法教えて!
利用開始までの流れは非常にシンプルで、日々の忙しさの中でも負担になりません。
- 公式サイトから無料会員登録
- 職務経歴・スキル・使用言語などを入力
- スカウトを待つ、または自分で求人検索
- 気になる企業と直接メッセージ・面談
特に重要なのはプロフィール入力ですね。
以下のような情報を具体的に書くことで、スカウトの質が大きく変わります。
- 実務で使用してきた言語・フレームワーク
- 担当フェーズ(設計・実装・レビューなど)
- チーム規模や役割
評判とか口コミどうなん?
サービス全体のUIは、シンプルで装飾が少なく、求人情報や技術条件が見やすく整理されています。
また、求人ページでは以下のような情報が確認できます。
- 使用技術・開発環境
- チーム構成
- 会社の雰囲気や開発文化
「入社してみないと分からない情報」が事前に把握できるため、
転職後のミスマッチを防ぎやすい点も好印象です。
登録するメリットは?
レバテックダイレクトを使う最大のメリットは、中堅以上のITエンジニア・クリエイターの方の市場価値を客観的に知れることです。
具体的には、以下のような効果が期待できます。
- 自分のスキルに対して、どんな企業が興味を持つのか分かる
- 年収レンジやポジションの相場感を把握できる
- 面接確約スカウトにより、転職活動の時間を短縮できる
「今すぐ転職するつもりはない」という方であっても、
情報収集目的だけでも登録する価値はありますよね!
料金どのぐらいなの?
求職者側の利用料金は他社のサービスと同様、もちろん完全無料です。
- 会員登録
- 求人検索
- スカウト受信
- 企業とのやり取り
これらすべてに費用はかかりません。
費用は企業側が負担する仕組みのため、
エンジニアはリスクなく利用できます。
それって私向きなの?
レバテックダイレクトは、特に以下のような方におすすめです。
- 実務経験があり、次のキャリアを冷静に考えたい人
- エージェントに振り回されず、自分のペースで転職したい人
- 技術を正しく評価してくれる企業と出会いたい人
- 年収アップや裁量のあるポジションを狙いたい人
「経験は積んできたが、次にどう動くべきか迷っている」
→ そんなタイミングで使うと、非常に相性の良いサービスです!
一方で、以下のような方には向かない可能性があります。
- プログラミング未経験、または実務経験がほぼない人
- 履歴書添削や面接対策を手取り足取りサポートしてほしい人
- IT職以外の職種を探している人
レバテックダイレクトは、基本的に「自分で判断し、動けるエンジニア向け」のサービスです。
そのため、手取り足取りのような支援を求める場合は、
転職エージェントとの併用が現実的でしょう。



とりあえず無料登録して待ってるだけでスカウト来るなら、ちょっとお試しでもやってみる価値ありますよね~


2. 自動生成したコードをデモアプリとして動かしてみよう
先ほどの記載例のプロンプトで出力できたmainコードは以下のようになりました
※お使いの環境や、使用しているモデルなどによってコーディングの書き方に変動があると思いますので、参考程度に留めてください。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ToDo Sample',
theme: ThemeData(primarySwatch: Colors.blue),
home: const TodoPage(),
);
}
}
class Todo {
String text;
bool isDone;
Todo({required this.text, this.isDone = false});
}
class TodoPage extends StatefulWidget {
const TodoPage({super.key});
@override
State<TodoPage> createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
final List<Todo> _todos = [];
final TextEditingController _controller = TextEditingController();
void _addTodo() {
final text = _controller.text.trim();
if (text.isEmpty) return;
setState(() {
_todos.add(Todo(text: text));
_controller.clear();
_sortTodos();
});
}
void _toggleDone(int index) {
setState(() {
_todos[index].isDone = !_todos[index].isDone;
_sortTodos();
});
}
void _deleteTodo(int index) {
setState(() {
_todos.removeAt(index);
});
}
void _sortTodos() {
// 未完了(false)が先、完了(true)が後になるようにソート
_todos.sort((a, b) {
if (a.isDone == b.isDone) return 0;
return a.isDone ? 1 : -1;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("ToDo Sample")),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _todos.length,
itemBuilder: (context, index) {
final todo = _todos[index];
return Card(
margin: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
child: ListTile(
title: Text(
todo.text,
style: TextStyle(
fontSize: 18,
decoration: todo.isDone
? TextDecoration.lineThrough
: TextDecoration.none,
),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(
todo.isDone
? Icons.check_box
: Icons.check_box_outline_blank,
color: Colors.green,
),
onPressed: () => _toggleDone(index),
),
IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _deleteTodo(index),
),
],
),
),
);
},
),
),
Container(
padding: const EdgeInsets.all(8.0),
color: Colors.grey.shade200,
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: const InputDecoration(
hintText: "新しいToDoを入力",
border: OutlineInputBorder(),
),
onSubmitted: (_) => _addTodo(),
),
),
const SizedBox(width: 8),
ElevatedButton(onPressed: _addTodo, child: const Text("追加")),
],
),
),
],
),
);
}
}
これをオフラインのAndroidエミュレーターで動かしてみると、下画像のようになりました




プロンプトで伝えたイメージ・条件はこうだったので、
- Todoの項目をカードとして表示し、カードにはそれぞれ完了ボタンと削除ボタンが付いている
- 完了を押すとToDo項目は取り消し線が付いた状態になり、削除を押すとカードを削除できる
- カードの並びのいちばん下は入力ブロックになっている
ちゃんとイメージ通りになってますね!良かった~。



フライドチキン揚げてお祝いしたい気分だぜ!
実際のスマートフォン実機用のiOSアプリをビルドするにはMacの開発環境を使うか、CodemagicというCI/CDツールを使えばWindows環境からでもビルドを依頼できるようです。



俺はiPhoneユーザーでMacは未所持なためCodemagicが必要なんですが、まだ試せてません。まあ気が向いたらやってみますねw
AndroidアプリはWindowsでもビルドができるので、実機にデプロイして触って動かしたいという人は、ぜひやり方をネットで調べて試してみてください!
3. まとめ
本記事の内容は以下の通りでした。



今回は非常にシンプルなToDoアプリでしたが、もっと複雑な動作をするアプリ、マニアックな用途のアプリもアイディア次第で無限に試せると思うので、遊び感覚でぜひ色々やってみてください!











コメント