はじめに
本業はプログラミングとは関係のない仕事をしていて、日々まとまった学習時間はなかなか取れません。
それでも「自分でアプリを作れるようになりたい」と思い、スキマ時間でFlutterの学習を始めました。
Flutterはとても強力で魅力的なフレームワーク(とのこと)ですが、実際に触ってみると最初のハードルが思ったより高いと感じました。
学習していて感じたこと
公式ドキュメントはとても充実しています。
ただ、実際に理解しようとするとろくにプログラミング経験もない初心者にはこんな感じでした。
- こんなデザインのwidgetを作りたい、でもどうやって設定するのか分からない
- 公式サイトでもコードをいじってプレビューを見ることはできるが、プログラミング経験が浅い&英語が苦手だとまずここにたどり着くのが大変
- そもそもWidgetって何？ってレベル
発想
「コードを書かなくても、触れば分かるようにできないか？」
- スライダーで値を変える
- トグルでON/OFFを切り替える
- その結果が即画面に反映される
- UIからコードを生成できる
そんな環境があれば、もっと直感的に理解できるのではと思いました。
作ったもの
そこで、FlutterのWidgetを「触って理解する」ための見本アプリを作りました。
主な機能
- UI操作でWidgetのプロパティを変更できる
- 変更結果がリアルタイムで反映される
- 設定内容をそのままコードとして確認できる
※現在はまだ、コード生成未実装です。
例えば：
- Switchの色を変更 → すぐ見た目が変わる
- 現在の設定 → Flutterコードとして出力
「試す → 分かる → コードになる」
という流れを意識して作っています。
なぜ作ったのか
自分自身が
- 学習時間が限られている
- すきま時間にはだいたい手元にパソコンがない
という状況だったので、
👉 最短で理解できる環境を自分で用意する
というのが目的でした。
結果的に、
- コードのどこがwidgetのどの部分を変化させるのか直感的に理解できる
- スマホアプリとして作成することで、パソコンに触れない時間でもFlutterの学習が可能
という意味で、かなり学習効率が上がったと感じています。
GitHub
GitHubで公開しています。
よければ触ってみてください。
※動作について
現在はAndroid実機での動作を確認しています。
本アプリは現在も開発中です。フィードバック大歓迎です。
2026/6/20追記
GitHubにAPKファイルをアップしました！
Androidをお使いの方はダウンロード＆インストールで
動かしてみることができます。
（※まだまだ開発途中です。）
https://github.com/KyokoCow/Widget-Lab/releases
おわりに
実際に手を動かして、変化を確認できる環境があると理解がかなり楽になります。何より、アプリ作成と学習を並行して進められるのが、非常に効率が良いと感じました。
同じように
- スキマ時間で学習している
- 試行錯誤に時間をかけられない
という方の参考になれば嬉しいです。
まだまだこのアプリは改善すべき点がたくさんありますので、開発を進めながら得られた知識を少しずつまとめていきたいと思います。