コードラボとワークショップ

コンテンツ

Flutter コードラボは、ガイド付きの実践的なコーディング経験。いくつかのコードラボ DartPad で実行 — ダウンロードは必要ありません。

Flutter ワークショップはコードラボに似ています。ただし、インストラクター主導で、常に DartPad を使用します。提供されたワークショップのリンクをクリックすると、関連する YouTube ビデオが表示されます。これにより、関連する DartPad リンクの場所がわかります。

初心者に良い

Flutter を初めて使用する場合は、以下から始めることをお勧めします次のコードラボのいずれか:

初めての Flutter アプリを構築する（ワークショップ）
非常に人気のあるこのバージョンのインストラクター主導バージョン「初めての Flutter アプリを作成する」コードラボ（以下に記載されています）。
初めての Flutter アプリ
かっこいい響きの名前を自動生成するシンプルなアプリを作成します。「ニュースステイ」、「ライトストリーム」、「メインブレーキ」、「グレイパイン」など。このアプリは応答性が高く、モバイル、デスクトップ、Web 上で実行できます。 (これは、以前の「最初の Flutter アプリを作成する」を置き換えるものでもあります) モバイル向け、パート 1 およびパート 2 コードラボ)。
Web 上で最初の Flutter アプリを作成する
DartPad で簡単な Web アプリを実装します (ダウンロードは必要ありません) 必須!) サインイン画面が表示されます 3 つのテキストフィールドが含まれています。ユーザーが入力すると、フィールドの上部に沿って進行状況バーがアニメーション表示されます。サインインエリア。このコードラボは、特に次の目的のために書かれています。 Web、ただしダウンロードして設定した場合 Android および iOS ツール、完成したアプリ Android および iOS デバイスでも同様に動作します。

次のステップ

Dart 3 のレコードとパターン
新しいDart 3 の新しいレコードとパターンの機能を発見してください。 Flutter アプリでそれらを使用して役立つ方法を学びましょうより読みやすく保守しやすい Dart コードを作成します。
Flutter でスクロールエクスペリエンスを構築する（ワークショップ）
シンプルで簡単なスクロールを実行するアプリから始めますそれを強化して派手なカスタムスクロール効果を作成しますスライバーを使用することで。
ダーツヌルセーフティの実践（ワークショップ）
に基づいたインストラクター主導のワークショップヌル安全コードラボdart.dev サイトで。
継承されたウィジェットを使用してアプリケーションの状態を管理する方法（ワークショップ）
アプリのデータの状態を管理する方法を学びましょうを使用してInheritedWidgetクラスの 1 つ低レベルの状態管理提供されるクラス flutter著。

Flutter UI の設計

マテリアルデザインと基本的な Flutter の概念について学び、レイアウトやアニメーションなど:

基本的な Flutter レイアウトの概念
DartPad をブラウザで使用します (ダウンロードは必要ありません!) Flutter レイアウト作成の基本を学びます。
Flutter Inspector を使用してレイアウトの問題をデバッグする方法
公式のコードラボではありませんが、詳細な手順が記載されています。 Flutter を使用して一般的なレイアウトの問題をデバッグする方法インスペクターとレイアウトエクスプローラー。
暗黙的なアニメーション
DartPad を使用して (ダウンロードは必要ありません!) 使用方法を学びますモーションを追加して作成する暗黙的なアニメーション UI 内のウィジェットの視覚効果。
Flutter のマテリアルモーションを使用して美しいトランジションを構築する
マテリアルの使用方法を学ぶアニメーションにパッケージ化する Reply というマテリアルアプリに事前に構築されたトランジションを追加します。
Flutter アプリを退屈なものから美しいものに変えましょう
資料 3 のいくつかの機能の使用方法を学習します。アプリをより美しくするためにとより応答性が高くなります。
MDC-101 flutter: マテリアルコンポーネント (MDC) の基礎
マテリアルコンポーネントを構築することで、マテリアルコンポーネントの使用の基本を学びます。コアコンポーネントを備えたシンプルなアプリ。 4 つの MDC コードラボでは、Shrine という e コマースアプリの構築について説明します。まず、いくつかの MDC を使用してログインページを構築します。 Flutterのコンポーネント。
MDC-102 flutter: マテリアルの構造とレイアウト
Flutter の構造とレイアウトにマテリアルを使用する方法を学びます。 MDC-101 で導入された e コマースアプリの構築を続けます。ナビゲーション、構造、データを追加することによって。
MDC-103 Flutter: 色、形状、高さ、タイプによるマテリアルのテーマ設定
Flutter のマテリアルコンポーネントがどのように作成されるかをご覧ください製品を差別化して表現しやすいデザインを通してブランドを。 e コマースの構築を続ける製品を表示するホーム画面を追加してアプリを作成します。
MDC-104 Flutter: マテリアルアドバンストコンポーネント
デザインを改善し、高度な使い方を学びましょうコンポーネントの背景メニュー。 eコマースアプリを完成させるフィルタリングするメニューを使用して背景を追加する選択したカテゴリごとの商品。
Flutter のアダプティブアプリ
に適応する Flutter アプリを構築する方法を学びます。 Android、iOSなど、実行されているプラットフォーム Web、Windows、macOS、または Linux。
Flutter で次世代 UI を構築する
新しいの力を利用する Flutter アプリを構築する方法を学びます。flutter_animate、フラグメントシェーダとパーティクルフィールド。ユーザーインターフェイスを作成します。私たち皆が大好きな SF 映画やテレビ番組を思い出させますコーディングしていないときに見ています。

Flutter を使用して…

Flutter を他のテクノロジーと組み合わせて使用する方法を学びます。

flutterを収益化する

Flutter アプリに AdMob 広告を追加する
AdMob バナー、インタースティシャル広告、そして、Awesome Drawing Quiz というアプリのリワード広告、プレイヤーに絵の名前を推測させるゲーム。
AdMob バナーとネイティブインライン広告を Flutter アプリに追加する
インラインバナーとネイティブ広告を実装する方法を学ぶ可能性のあるものをリストした旅行予約アプリに飛行機の目的地。
Flutter アプリにアプリ内購入を追加する
Dash マスコットを使用するシンプルなゲームアプリを拡張します。 3 種類のアプリ内購入を提供する通貨: 消耗品、非消耗品、サブスクリプション。

FlutterとFirebase

FirebaseUI を使用してユーザー認証フローを Flutter アプリに追加する
Firebase 認証を Flutter アプリに追加する方法を学ぶわずか数行のコードで実現できます。
Flutter 用 Firebase について知る（ワークショップ）
人気のレッスンのインストラクター主導バージョン「Flutter 向け Firebase を理解する」コードラボ（以下に記載されています）。
Flutter 用 Firebase について知る
Android の両方でイベントの出欠確認とゲストブックのチャットアプリを構築する Flutter を使用する iOS と Firebase でユーザーを認証する Cloud Firestore を使用した認証とデータの同期。
Firebase Emulator Suite を使用した Flutter アプリのローカル開発
次の場合に Firebase エミュレータスイートを使用する方法を学びます。 Flutterで開発しています。使い方も学びます Auth エミュレータと Firestore エミュレータ。

flutterと TensorFlow

TensorFlow Lite Model Maker を使用してカスタムのテキスト分類モデルを作成する
TensorFlow でテキストを分類する Flutter アプリを作成する
Flutter からテキスト分類推論を実行する方法を学習します。 REST と gRPC を介して TensorFlow を提供するアプリ。
TensorFlow Lite Model Maker を使用してコメントスパム検出モデルをトレーニングする
Colab を使用して TensorFlow Lite Model Maker をインストールする方法を学びます。データローダーの使用方法とモデルの構築方法。

flutterとその他のテクノロジー

Flutter アプリに Google マップを追加する
アプリ内でGoogleマップを表示したり、アプリからデータを取得したりする Web サービスにアクセスし、データを地図上にマーカーとして表示します。
Flutter アプリに WebView を追加する
WebView Flutter プラグインを使用すると、WebView を追加できます Android または iOS Flutter アプリにウィジェットを追加します。
Dialogflow と Flutter を使用してモバイル用の音声ボットを構築する（ワークショップ）
Dialogflow のインストラクター主導バージョン Flutter コードラボ (以下にリスト)。
Dialogflow と Flutter を使用して Android 用の音声ボットを構築する
ほとんどの質問に回答できるモバイル FAQ ボットを構築する方法を学びます Dialogflow ツールに関するよくある質問。利用者テキストインターフェイスを操作したり、音声をストリーミングしたりできますモバイルデバイスの内蔵マイクを介した対話。
Flutter と Flame を使用したゲームの構築
プラットフォームゲーム (特徴的なゲーム) の作成方法を学びます。 Dash または Sparky)、Flame パッケージを使用します。
Flutter プラグインでの FFI の使用
Dart の FFI (外部関数インターフェイス) の使用方法を学ぶライブラリ、figen、活用可能を提供する既存のネイティブライブラリ Cインターフェイス。
PaLM API と Flutter を使用して Google 製品に関する俳句を作成する
新しいPaLM API を使用してアプリを構築する方法を学びます。 Google の製品名に基づいて俳句を生成します。の PaLM API を使用すると、Google の最先端の大規模言語モデル。

テスト

Flutter アプリケーションをテストする方法を学びます。

Flutter アプリをテストする方法
Provider パッケージを使用して状態を管理する単純なアプリから始めます。プロバイダーパッケージの単体テスト。そのうちの 2 つのウィジェットテストを作成します。ウィジェット。 Flutter Driver を使用して統合テストを作成します。

プラットフォーム固有のコードの作成

特定のプラットフォームを対象としたコードの書き方を学びます。 iOS、Android、デスクトップ、Web など。

Flutter を使用してクパチーノアプリを構築する
神社ショッピングアプリのバージョンを構築する (マテリアルデザインコードラボで使用) iOS スタイルのルックアンドフィールを作成する Cupertino パッケージ。複数のタブを作成し、タブ間を移動します。使用プロバイダー画面間の状態を管理するパッケージ。
Flutterプラグインの書き方
音楽プラグインを作成してプラグインの作成方法を学びますホストプラットフォームでオーディオを処理する iOS および Android 用。次に、プラグインを使用して音楽キーボードを作成するサンプルアプリを作成します。
Flutter Web アプリでプラグインを使用する
GitHub リポジトリ上のスターの数を報告するアプリを終了します。 Dart DevTools を使用して簡単なデバッグを実行し、 Firebase でアプリをホストし、最後に Flutter プラグインを使用して、アプリを起動し、ホストされているプライバシーポリシーを開きます。
Flutter デスクトップアプリケーションを作成する
Flutter デスクトップアプリを構築する (Windows、Linux、または macOS) GitHub API にアクセスしてリポジトリを取得します。割り当てられた問題とプルリクエスト。このタスクの一環として、プラグインを作成して使用し、ネイティブ API やデスクトップアプリケーションと対話します。コード生成を使用して、GitHub の API 用のタイプセーフなクライアントライブラリを構築します。

その他のリソース

Dart 固有のコードラボについては、コードラボのページダーツサイト。

以下のオンラインクラスもお勧めします。

Dart を使用した完全な Flutter 開発ブートキャンプ