vscodeでflutterの環境構築〜デモアプリを起動するまでを10分間で行う解説をしたスライドです。

1. 超高速でFLUTTERアプリを作成する
2019.03.19(Tue)

2. FLUUTERとは
・AndroidOS, iOSで稼動するネイティブ
アプリ。
・高速開発、柔軟なUI、両刀に対応
する柔軟なプラットフォームの提供
が売り。
・開発環境はAndroidStudio, Xcode, InteliJ
IDEAなどに対応。
・本番環境への適用はGoogle, Alibaba,
HAMILTONSなどが行なっている

3. なぜFLUTTERがアツイかの個人的見解
・AndroidOS, iOSで動いてくれる、両方の端末のスペック差分を吸収して
くれる
・iOSでServiceWorkerがプッシュ通知に対応していない昨今、FCM(Firebase
Cloud Messaging)との連携でプッシュ通知の実装が可能になる。
・手軽さがとても(@∀@)ｲｲ!
- Dartというjsよりな記法で扱える
- 開発環境でHello Worldするまで０ベースから初めて10分で完了する。

4. いざ、ビルド

5. 公式ページからFLUTTERをインストール

6. 開発環境のセットアップ
VSCode
command + shift + P -> install extentionとタイプする
マーケットプレイスからflutterをイ
ンストール

7. RUN DOCTOR
command + shift + P -> doctorとタイプする -> Flutter: Run Flutter Doctorを選択する。
何かあればこのようにページを開いて教えてくれます。
プロジェクトを作れと
言われている

8. プロジェクトのビルド
➤ 例のごとくcommand + shift + P -> flutterと入力
Flutter: New Projectを選択する。
➤ CAUTION : couldn’t find sdkなるエラーが現れたら、flutterをインストール
したディレクトリ->bin(flutter, flutter.bat)までのパスを通してあげる。
➤ このようにプロジェクトネームとディレクトリの場所を聞
かれるので、任意で設定する。

9. DONE👀!

10. JAVAのコードできてるぅうう⤴⤴

11. HOT DEBUGGING
➤ VSCodeの右下のステータスバーにご注目ください
➤ 今回はiOSのエミュレータでデバッグする設定になっている
（もちろん実機での検証もできます◎）
➤ 例のコマンドからdevice… で設定ができます♪

12. 起動中…（わくわく）
ボタンを押した回数をカウントする
デモアプリ

13. FLUTTERにおけるDARTの基本構造
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home
Page'),
);
}
}
既存クラスの継承
アプリのタイトル、テー
マを設定できる。（デ
フォで入ってるテーマ
はから確認できる）
Main関数はアロー記法でワンライナーでスマートに
書けるよ
Scaffoldクラスはマテリアルライブラリからデフォル
トのアプリケーションバー、タイトル、ボディなどを
ウィジェットツリーで提供してくれるよー
ウィジェットの主な役割はbuild()関数を提供している
こと
底レイヤーのウィジェットにどうやって表示するかを
描写しているよ！
ボディはTextを子に持ったCenterウィジェットで構成さ
れているよ

14. HOT NEWS
・Android, iOSで動くアプリがwebでも動く！！！
（オープンソース可はまだまだ先そうです）
・Angular Dartとかある（もう想像がつかない）
・ご参考
Humming Bird（https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-
e687c2a023a8）
日本語訳してくれているページ（https://ntaoo.hatenablog.com/entry/2018/12/05/
070454）
Angular Dartのありがたい解説スライド（https://www.slideshare.net/scova0731/
angulardartspa）

15. 引用元
➤ Flutter公式（https://flutter.dev/）
➤ ニュース（https://www.publickey1.jp/blog/18/
googleflutterwebhummingbirdwebdartflutter_live_18.html）