Appearance
写真編集アプリ
当日までに アプリ起動 を完了、以下を目指していただく。
GitHub - YujiOnishi/flutter_picture_edit_hands_on
Contribute to YujiOnishi/flutter_picture_edit_hands_on development by creating an account on GitHub.
GitHub
開発環境に必要なもの一覧
Android Studio
プログラムを書くために必要
Flutter
モバイルアプリを作成するために必要
Flutter SDK のダウンロード
Mac OS をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Windows をお使いの方は、
※ リンク切れなら こちら の指示に従ってSDKをダウンロードしてください
Flutter 環境構築
環境構築する場合は Flutter環境構築 を確認しましょう。
※ Flutter で Android のシミュレータが確認できる方は Flutter の項目を飛ばしてください。
アプリ起動
- フォルダ作成
- プロジェクト作成
- エミュレータ起動
- アプリ起動
1. フォルダ作成
1-1. デスクトップに hands_on フォルダを作成。
2. プロジェクト作成
2-1. AndroidStudio を起動し Start a new Flutter project を選択。
2-2. Flutter Application を選択し、Next を押下。
2-3. Configure the new Flutter application の Project name を picture_edit へ変更。
2-4. Configure the new Flutter application の Project location を hands_on フォルダに変更。
2-5. Set the package name はそのまま Finish を押下。main.dart のコードが表示されれば成功。
3. エミュレータ起動
3-1. AndroidStudio で picture_edit フォルダを開く。 (プロジェクト作成直後なら自動で開いているはず)
3-2. AVD マネージャーから作成したエミュレータを起動する。
4,アプリ起動
4-1. 上部の再生ボタンを押下しアプリを起動。 (結構時間がかかります)
配信動画
2020/06/20 オンラインで開催した Flutter Handson Osaka #4 で当日配信した動画はこちらからご覧になれます。