Appearance
Atomic Design (Flutter for Web)
当日までに アプリ起動 を完了、以下を目指していただく。
GitHub - YujiOnishi/flutter_atomic_handson_hinagata
Contribute to YujiOnishi/flutter_atomic_handson_hinagata development by creating an account on GitHub.
GitHub
雛型コードをダウンロードし AndroidStudio で開き、レジュメと YoutubeLive の進行に応じてレジュメコードを参考に貼り付けアプリの完成を目指す。
※ 開始時には、AndroidStudio と Flutter for Web の起動をお願いします (詳細は以下をご参照ください)
開発環境に必要なもの一覧
Android Studio
プログラムを書くために必要
Flutter
モバイルアプリを作成するために必要
Flutter SDK のダウンロード
Mac OS をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Windows をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Flutter 環境構築
環境構築する場合は Flutter for Web 環境構築 を確認しましょう。
アプリ起動
- 今回使用するファイルのダウンロード
- Packages get
- アプリ起動
1. 今回使用するファイルのダウンロード
1-1. 以下 URL にアクセスし、緑色の Code を押下、Download ZIP を選択。
1-2. デスクトップに保存し、解凍する。
1-3. AndroidStudio を起動、ダウンロードしたフォルダを開く。
2. Packages get
2-1. AndroidStudio にて、フォルダ内の pubspec.yaml を開く。
2-2. 画面上の Packages get を押下する。
3. Flutter for Web 起動
3-1. 上部の工具のようなアイコンのとなりにあるターゲットデバイスで Web Server を選択（もし、Chrome があるなら Web Server ではなく Chrome を選択）
3-2. ターゲットデバイスの 2 つとなりにある再生ボタンを押下し Flutter for Web を起動 (Web ページが表示されます)
※ 結構時間がかかります。
配信動画
2020/12/05 オンラインで開催した Flutter Handson Osaka #7 で当日配信した動画はこちらからご覧になれます。レジュメ と 解説書 を合わせてご確認いただければ。