Flutterサンプル
Flutterの公開サンプル集
『Flutter』で公開さているサンプル集をご紹介します。
Flutterは、歴史が浅い言語ですが、「パッケージ」と「ウィジット」の、いわゆる部品を組み合わせることでアプリを構築することが出来ます。
多くの言語が複雑なフレームワークを使って複雑なコーディングを行うのに対して、異なり、どんな「パッケージ」と「ウィジット」を組み合わせるか？ つまりパズルのように必要なパーツを集めることで構築するようなイメージで開発が進みます。
効率的な開発のためのチートスキル
Flutterの開発は、ウィジェットとパッケージの組込みが主要な作業となります。 上手く利用することで、他の言語にはないような劇的な効率アップで開発ができます。
公式サイトや商用のサンプル販売サイトに、様々なテンプレートやアUIキットおよび完成品のAPPなどが安価に販売されていますので、上手に活用してください。
他言語ではありえないチートスキルとは？
商用のサンプル販売サイトには、様々なテンプレートや完成品APPがあります。
例えば、Flutter＋PHP、Flutter＋Laravel、Flutter＋AdminLTE（Bootstrap）、Flutter＋EC、Flutter＋ChatGPT、業務内容では、GPS追跡のデリバリーアプリや、CRMや売上管理、販売管理、勤怠管理などが、超安価に販売されていますので、それらを上手に使うと、更なる効率アップに繋がると思います。
１）Material 3 DEMO: https://flutter.github.io/samples/web/material_3_demo/
Flutter マテリアル ライブラリのマテリアル 3 機能を紹介します。これらの機能には、更新されたコンポーネント、タイポグラフィ、カラー システム、および標高のサポートが含まれます
２）Rich Text Editor DEMO: https://flutter.github.io/samples/web/simplistic_editor/
フレームワークの TextEditingDeltas API からの詳細なテキスト編集と選択の詳細を使用する方法を示す、派手なテキスト エディターのサンプルです。
３）Gallery DEMO: https://flutter-gallery-archive.web.app/
Flutter で実装されたマテリアル デザインとクパチーノのウィジェット、動作、ビネットのコレクション。
４）Flutter Maps Firestore
Cloud Next ’19 のトーク「Flutter と Google マップを使用したモバイル アプリの構築」の最終成果物を示す Flutter サンプル アプリ
５）Place Tracker
google_maps_flutter プラグインを使用するサンプルの場所追跡アプリ。お気に入りの場所、行ったことのある場所、行きたい場所を記録します。これらの場所の詳細を表示し、地図上に表示し、そこへの道順を取得します。
６）Web Dashboard
毎日のエントリを表示するダッシュボード アプリ。AdaptiveScaffold と NavigationRail をデモします。Firebase の使用方法を紹介しますが、デフォルトではモック バックエンドを使用します。
７）Form App DEMO: https://flutter.github.io/samples/web/form_app/
Forms の使用方法を示す Flutter サンプル アプリ。
８）Navigation and Routing DEMO： https://flutter.github.io/samples/web/navigation_and_routing/#/books/popular
Router API を使用して一般的なナビゲーション シナリオを処理する方法を示す Flutter サンプル アプリ。
全ソースがGitHubで公開されています。
以下は参考例です。（2025/01/11時点で、2,681件の無料サンプル）
参考例１：
参考例２： ＃Video
１）ビデオ会議アプリ １
２）ビデオ会議アプリ ２
参考例3： ＃Food
参考例4： ＃blog
参考例5： ＃Picker
参考例6： ＃Json
参考例7： ＃Instagram
ここからは、色々なキーワードで検索した結果
参考例8： ＃ChatGPT
参考例9： ＃Avatar
参考例10： #School
参考例11： ＃Yoga
参考例12： ＃Booking
参考例13： ＃Restaurants
参考例14： ＃pet
参考例15： #Hotel
参考例16： ＃Travel
参考例17： #Flutter Bootstrap 5
参考例18： #web_dashboard DEMO
参考例19： #Navigation and Routing
参考例20： #table widget – sorting, and custom cell rendering Bootstrap TableによるAdmin類似
参考例21： E-Commerce
１）A Fashion eCommerce app built with Flutter
Github : aymanattieh77/fashion-app
２）An ecommerce app for both ios and andrid written in flutter
Github : sandei-travolta/estore
３）An e-commerce application built using Flutter Framework and Laravel
Github : manusiacoding/e_commerce_app 作者： https://github.com/manusiacoding
Github : バックエンド： manusiacoding/backend_e_commerce_app
４）Ecommerce flutter responsive Admin Panel
YouTube： https://www.youtube.com/watch?v=5-SuFX1a97Y
Github : samih93/Ecommerce-Admin-Panel
Flutter フレームワーク (フロントエンド) と Laravel フレームワーク (バックエンド) を使用して構築された e-コマース アプリケーションです。
※作品によっては、高度なECサイト等も含まれています。
しかも、１ソースでスマホアプリまで対応できるので、将来性は期待しかないです。
※サンプルを構成する「パッケージ」と「ウィジット」の組み方を参考にするだけで、様々な作品が構築できる、それがFlutterのすばらしさです。
Flutterテクニック
Flutterの開発は、言語がまだまだ新しいいので、公開されている「ウィジェット」を使うというFlutter独自の世界です。
そこで、ここでは、先に頑張っていらっしゃる諸先輩が公開されているテクニックに学んでみたいと思います。
Flutter とは？ Andorid と iOS を同時に開発！？
１）【Flutter】Table Widget で表を作成する
Flutter で表を作成するには、Table Widget を使用すれば作成できます。Column Widget と Row Widget を使用すれば、表形式に配置することはできますが、Table Widget の方が簡単且つ便利です。
※ Bootstrap で表を作成することもできます。 参考情報： #Flutter Bootstrap 5
２）【Flutter】タブのページをスワイプで切り替える方法
３）【Flutter】画面下部のタブでページを切り替え可能にする方法
４）【Flutter】ListView にスクロールバーを表示させる方法
５）【Flutter】スクロール可能なリストを表示する ListView の使い方
６）【Flutter】TimePicker で時刻を入力できるようにする
７）【Flutter】カレンダーから日付を入力できるようにする方法
８）【Dart】DateTimeで日付・時刻を操作する方法 まとめ
９）【Flutter】Widget を条件分岐で出し分ける方法
１０）【Flutter】AudioPlayers で音声を再生する
１１）【Flutter】SafeArea で画面端の表示を整える
１３）【Flutter】ボタンの無効化と有効／無効を切り替える方法
１４）【Dart】0や空白で埋めて文字数や桁数を合わせる方法
１５）【Flutter】WebView で Web ページを表示する方法 参考：Flutter アプリに WebView を追加する
１６）【Flutter】LinearProgressIndicator で、HP ゲージをつくってみた
１７）【Flutter】独自の Widget クラスを作成する方法
１９）【Flutter】プログレスインジケータのデザイン変更方法
２０）【Flutter】プログレスインジケータの種類と表示方法
２１）【Flutter】基本的なボタン3種類とデザインの変更方法
２２）【Flutter】ドロップダウン(プルダウン)メニューの作り方
２６）【Flutter】アプリの動かし方とビルドモード（Debug / Profile / Release）について
２８）【Flutter】ステータスバー、ナビゲーションバーを非表示にする方法
２９）【Flutter】戻るボタンを非表示、無効にする方法 まとめ
３０）【Dart】List の使い方（宣言、プロパティ、メソッド）
３４）【Flutter】OSや機種情報の取得方法とOSごとに処理を分岐させる方法
パッケージ関連
Android関連
１）【Android】Android Studio のインストール方法
２）【Android】Android Studio の使い方
３）【Android Studio】メソッドなどの中身/呼び出し箇所を確認する方法
５）Wear OS アプリ（スマートウォッチアプリ）の開発方法
Kotlin関連
１）【Kotlin】WebViewでアプリ内にWebページを表示する方法
２）【Kotlin】switch文のような条件分岐（when文）
Swift関連
Firebaseとは？
Pixel Watchについて
１）Google Pixel Watch のスクリーンショット撮影方法
