[🧑💻] 勉強 - Flutterアプリ開発基礎 14/44講: Flutter環境設定、主要ウィジェット、Dart基本文法
✨ Gemini 2.5 Proによる要約
Flutterアプリ開発基礎講座 DevStory - Inflearn DevStory 開発知識がなくても大丈夫です！初心者でもできるFlutterアプリ開発基礎 🏃♂️超初心者でも学べるFlutterアプリ開発基礎[写真]アプリ開発を学べば、これまで想像するだけだった自分だけのアプリサービスを世界中にリリースできます。実は
- 原文: http://blog.naver.com/hyeogikarp/223882864462
- Naver公開時刻: 2025/05/30 11:30 KST
- 原文カテゴリ: 開発勉強
原文
| Flutterアプリ開発基礎講座 | DevStory - Inflearn |
| DevStory | 開発知識がなくても大丈夫です！初心者でもできるFlutterアプリ開発基礎 🏃♂️超初心者でも学べるFlutterアプリ開発基礎[写真]アプリ開発を学べば、これまで想像するだけだった自分だけのアプリサービスを世界中にリリースできます。実はアプリを作る |
www.inflearn.com
- Flutterとは？
-
クロスプラットフォームフレームワーク: Googleが開発しており、ひとつのコードベースでAndroid、iOS、Web、Desktopアプリケーションの開発が可能だ。
-
Dart言語を使用: UIをコードで書く。
- 核心コンセプト: すべてはウィジェット(Widget)
-
UI構成単位: ウィジェットを組み立てて画面を構成する。
-
ウィジェットツリー(Widget Tree): ウィジェットの階層構造で、親子関係で構成される。
-
Key? keyとsuper(key: key): ウィジェットのコンストラクタでKeyは、ウィジェットツリーが再構成されるときにウィジェットの状態を保存し、効率的に更新するために使われる。今の段階では、こういう概念があるという程度に理解すれば十分だ。
-
BuildContext context: ウィジェットツリー内で現在のウィジェットの位置を表し、上位ウィジェットのデータやテーマにアクセスできるようにする重要なオブジェクトだ。Navigator.pop(context)のように、さまざまな場所で活用される。
-
主なウィジェット分類:
-
StatelessWidget: 状態を持たない静的なウィジェットだ。
-
StatefulWidget: 状態変化に応じて再描画されうる動的なウィジェットだ。 (コード例は省略)
-
StatefulWidget: 状態変化に応じて再描画されうる動的なウィジェットだ。 (コード例は省略)
- 基本的なアプリ構造および主要ウィジェット
-
main()関数 & runApp() & MaterialApp & Scaffold:
-
MaterialAppのhome: アプリケーションの最初の画面を指定する。 (例: home: HomePage())
-
MaterialAppのhome: アプリケーションの最初の画面を指定する。 (例: home: HomePage())
-
AppBarの詳細プロパティ:
-
レイアウトウィジェット:
-
Column & Row:
-
Padding: 子ウィジェットの周囲に余白を追加する。
-
Padding: 子ウィジェットの周囲に余白を追加する。
-
Container: さまざまなスタイリング(サイズ、色、余白、枠線など)が可能な長方形ウィジェットだ。
-
Container: さまざまなスタイリング(サイズ、色、余白、枠線など)が可能な長方形ウィジェットだ。
-
Expanded: RowやColumnの子ウィジェットが残りの空間を埋めるように拡張させる。
-
Expanded: RowやColumnの子ウィジェットが残りの空間を埋めるように拡張させる。
-
SingleChildScrollView: 子ウィジェットの内容が画面をはみ出す場合にスクロール可能にする。
-
SingleChildScrollView: 子ウィジェットの内容が画面をはみ出す場合にスクロール可能にする。
-
ListView.builder: 多数のアイテムを効率的に表示するスクロール可能なリストを作る。画面に見えているアイテムだけを生成する。
-
ListView.builder: 多数のアイテムを効率的に表示するスクロール可能なリストを作る。画面に見えているアイテムだけを生成する。
-
Stack: ウィジェットを重ねて配置できるようにする(Z軸)。
-
Stack: ウィジェットを重ねて配置できるようにする(Z軸)。
-
AspectRatio: 子ウィジェットの縦横比を固定する。
-
AspectRatio: 子ウィジェットの縦横比を固定する。
-
double.infinity: Containerなどのwidthやheightプロパティに使われ、親ウィジェットが許可する最大サイズで埋めるようにする。
-
double.infinity: Containerなどのwidthやheightプロパティに使われ、親ウィジェットが許可する最大サイズで埋めるようにする。
-
SizedBox: 特定サイズの空白を作ったり、子ウィジェットのサイズを明示的に指定したりするときに使う。
-
SizedBox: 特定サイズの空白を作ったり、子ウィジェットのサイズを明示的に指定したりするときに使う。
-
基本UIウィジェット:
-
Text & TextStyle: テキストを表示し、スタイルを指定する。
-
Image.network: ネットワークURLから画像を読み込んで表示する。
-
Image.network: ネットワークURLから画像を読み込んで表示する。
-
fit: BoxFit.cover: 画像が比率を維持しながら指定された空間をぎっしり満たすようにする。 (空間より画像が大きければ切り取られることがある)Icon: マテリアルデザインアイコンを表示する。
-
fit: BoxFit.cover: 画像が比率を維持しながら指定された空間をぎっしり満たすようにする。 (空間より画像が大きければ切り取られることがある)
-
fit: BoxFit.cover: 画像が比率を維持しながら指定された空間をぎっしり満たすようにする。 (空間より画像が大きければ切り取られることがある)
-
Icon: マテリアルデザインアイコンを表示する。
-
TextField & InputDecoration詳細: ユーザーからテキスト入力を受け取る。
-
TextField & InputDecoration詳細: ユーザーからテキスト入力を受け取る。
-
ElevatedButton, TextButton, IconButton: さまざまな形のボタンウィジェットだ。
-
ElevatedButton, TextButton, IconButton: さまざまな形のボタンウィジェットだ。
-
Card: マテリアルデザインのカード形式UIを作る。少しの影と丸い角を持つ。
-
Card: マテリアルデザインのカード形式UIを作る。少しの影と丸い角を持つ。
-
Divider: 視覚的な区切り線を作る。
-
Divider: 視覚的な区切り線を作る。
-
CircleAvatar: 主にユーザープロフィール画像のような円形画像を表示するときに使う。
-
CircleAvatar: 主にユーザープロフィール画像のような円形画像を表示するときに使う。
-
Colors.black.withOpacity(0.5): 色に透明度を適用する。0.0(完全透明)〜1.0(完全不透明)。
-
Colors.black.withOpacity(0.5): 色に透明度を適用する。0.0(完全透明)〜1.0(完全不透明)。
-
Drawerおよび関連ウィジェット:
-
Drawer: Scaffoldのdrawerプロパティに指定され、画面の片側からスライドして出てくるパネルだ。
-
DrawerHeader: Drawer上部の領域を飾るときに使うウィジェットだ。
-
ListTile: Drawer内の各項目を構成するときによく使う。leading、title、trailing、onTapなどのプロパティを持つ。
-
ListTile: Drawer内の各項目を構成するときによく使う。leading、title、trailing、onTapなどのプロパティを持つ。
-
PageView: 複数のページ(画面)を左右にスクロールしながら見られるようにするウィジェットだ。 (例: イベントバナー)
- ナビゲーション基礎
- Navigator.pop(context): 現在の画面(ルート)をスタックから削除し、前の画面に戻るときに使う。Drawerを閉じたりダイアログを閉じたりするときに便利だ。
- データの扱い(簡単な例)
- List<Map<String, dynamic»: ListView.builderなどで使うデータをDartのリストとマップで構成するのは一般的な方法だ。各Mapはひとつのアイテム情報を持ち、Stringキーで値にアクセスする。
- プロジェクト構造および開発環境
-
libフォルダ: 主にDartコードを書く場所だ。main.dartが基本の開始ファイルだ。
-
pubspec.yamlファイル: プロジェクトのメタデータ、依存関係(ライブラリ/パッケージ)管理、SDKバージョンなどを設定するファイルだ。
-
VSCode: 主な開発ツールとして使われる。
-
Command Palette (Ctrl+Shift+P / Cmd+Shift+P): Flutter: New Project、Flutter: Launch Emulatorなど、さまざまなFlutterコマンドを実行する。
-
便利なショートカット: 自動補完(Ctrl+Space/Option+Esc)、リファクター(Ctrl+Shift+R)、パラメータ表示(Ctrl+Option)など、便利なショートカットを覚えるのは必須！ (生産性向上のため)
-
後でVSCodeショートカット中心の簡単な投稿をたくさんしてみる予定だ。
-
ex) VSCodeでPresentation Modeをオンにする方法
- Emulator: 仮想モバイルデバイスで、実機なしでアプリをテストする。
-
Hot Reload: コード変更をアプリの状態をほとんど維持したまま素早く画面に反映する。 (稲妻形のアイコン)
-
Hot Restart: アプリの状態を初期化し、アプリを再起動する。 (円形のアイコン)
-
analysis_options.yaml: Dartコード分析ルールを設定するファイルだ。 (例: 特定のlintルールの有効化/無効化)
-
たとえば、print関数を使ってDebug Consoleにテキストを出力しようとすると、productionでは使ってはいけないと大騒ぎする。
- それはproductionのときに適当に外せばいいことなので、lintルールから’avoid_print’を削除してみよう。解決法1. 該当dartファイルの上部にignore_for_fileコメントを書く。
-
それはproductionのときに適当に外せばいいことなので、lintルールから’avoid_print’を削除してみよう。
-
解決法1. 該当dartファイルの上部にignore_for_fileコメントを書く。
-
解決法2. プロジェクトルートにあるanalysis_options.yamlで無視処理する。
-
解決法2. プロジェクトルートにあるanalysis_options.yamlで無視処理する。
-
解決法2. プロジェクトルートにあるanalysis_options.yamlで無視処理する。
- Flutter学習方法
-
Widget Catalog & Widget of the week: Flutter公式ドキュメントのウィジェットカタログと’Widget of the week’シリーズを通じて、さまざまなウィジェットを学習する。
-
コミュニティ活用: Flutter関連コミュニティ(オンラインフォーラム、オープンチャットなど)で質問し、回答しながら一緒に成長する。
-
Dart文法の熟知: FlutterはDart言語を使うため、Dart文法を十分に理解することが重要だ。
💭 日記
すでにC、C++、Java、Javascript、Python、… 数多くの言語を触ってきたし、Spring、Vue.js、Django、FlutterFlowなど多様なフレームワーク/ツールまで扱ってきた時点ではあるけれど、もしかしたら見落としている基本概念があるかもしれないと思い、Flutter基礎講座から聞き始めた。
すでに知っている概念だと思って素早くスキップしようとしたのだが、これが思ったより、あまりにも長い間開発から手を離していたようだ。脳の筋肉が固まったのか、頭の中でどんなふうにコードを書けばいいかが素早く構想できなかった。
今はVSCodeでInline Chat(Gemini 2.5 Pro)やCode Recommendation(GitHub Copilot)などAIの助けを受けながら、さっと疑問を聞き、答えを見つけ、自動補完を活用して効率よくコーディングする時代になったので、さらに早くコーディング脳の筋肉を回復できると期待している。
道は長い！行くぞ！
コメントする