Flutter 入門勉強会

Transcript

1. 1 入門 勉強会 2019. 6. 8　山梨IT同好会(仮)

2. 自己紹介 しみず ゆうき • モバイルアプリ エンジニア ◦ Android (2010年〜)、iOS (2013年〜)

   • 甲府生まれ 甲府育ち ※ 現在は東京に出稼ぎ中(3年目) 2

3. 【本日のテーマ】 Flutter を体験 しよう 3

4. 本日の勉強会の進め方 演習の時間をたっぷり用意します。 あせらずゆっくり進めましょう。 隣同士で議論し、作業内容を確認し合いながら 進めましょう。 4

5. 本日の流れ • 概要の説明 • デモ • ワークショップ 5

6. Flutter 概要 6

7. Flutter ってナニ？？

8. モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない...

9. モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない... ↓ クロスプラットフォーム開発フレームワーク はどうよ？

10. クロスプラットフォーム開発 １ソースで 複数 のプラットフォームのアプリケーションを 開発！

11. クロスプラットフォーム開発フレームワーク

12. クロスプラットフォーム開発フレームワーク(他) • ゲーム系 ◦ Unity ◦ Cocos2d-x • WebView ベース

    ◦ Apache Cordova ◦ Titanium Mobile • 他にも色々

13. 万能ではない！！！！ • 動作が重いこともあるし... • バイナリサイズが大きくなっちゃうし... • OSが提供する全ての機能にアクセスできるわけでも無いし... • デザインもツールに縛られる場合があるし...

14. Flutter はどうなの？ 14

15. Flutter • Google が提供 • Android/iOS アプリのための SDK (クロスプラットフォーム) •

    高い開発効率と実行パフォーマンス ◦ ホット リロードでサクサク開発できる ◦ Dart で書いたコードがマシンコードにコンパイルされる ◦ 1000くらいのウィジェットがある • マテリアルデザインに則った UI パーツを標準提供

16. 16 Windows, macOS, Linux 開発がもうすぐ可能に！

17. Dart 言語 17

18. 注目されはじめている 18 Study of Programming Languages Not to Learn in

    2019 https://www.codementor.io/blog /worst-languages-2019-6mvbfg3 w9x

19. Dart • Java や JavaScript に似たシンタックス ◦ オブジェクト指向型言語 • 静的型付けにも対応。型推論も出来る

    • JavaScript やマシンコードにコンパイルできる 19

20. 組み込み型 ① int, double ② String ③ Boolean 20 ④

    List ⑤ Set ⑥ Map

21. int meaningOfLife = 42; double valueOfPi = 3.141592; bool visible

    = true; String shakespeareQuote = "All the world's a stage, ..."; List superheroes = [ 'Batman', 'Superman', 'Harry Potter' ]; Set villains = new Set(); villains.add('Joker'); villains.addAll( ['Lex Luther', 'Voldemort'] ); Map sidekicks = { 'Batman': 'Robin', 'Superman': 'Lois Lane', 'Harry Potter': 'Ron and Hermione' }; 21

22. 22 クラス class Animal { String name; int power; //

    コンストラクタ Animal(this.name, this.power); }

23. 23 クラス class Tiger extends Animal { int height; Tiger(this.height,

    String name, int power) : super(name, power); }

24. 24 非同期処理 (async/await) import 'dart:async'; void main() async { var

    result = await futureTest(); print(result); } Future <String> futureTest(){ return new Future.delayed(new Duration(seconds: 10), (){ return new DateTime.now().toString(); }); }

25. Flutter 25

26. サンプルアプリを読み解く 26 Scaffold アプリ全体の構成を決定 AppBar タイトルバーに表示する内容 Centor 中心に表示 Text 文字の表示

    FloatingActionButton ボタンの表示 Centor Scaffold AppBar Text Widget の入れ子で Flutter は構成される

27. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget

    { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 27

28. class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key:

    key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } ... 28

29. class _MyHomePageState extends State<MyHomePage> { ... @override Widget build(BuildContext context)

    { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 29

30. Stateless？ Stateful？ 30 • StatelessWidget ◦ build メソッドを持ち、Widget もしくはテキストを返す ◦

    State(状態) の概念がないため、動的に変化しない Widget • StatefulWidget ◦ Widget に State の概念を入れて拡張したもの ◦ createState メソッドを持ち、State クラスを返す State クラスで build メソッドを持ち、Widget を返す ◦ 画面更新タイミングで setState を呼ぶ 状態が動的に変化するかしないか

31. デモ 31

32. 山梨県のイベントカレンダーを作ってみます 32 1. プロジェクトの作成 2. Hello World 3. ダミーで ListView

    に表示 4. connpass API からデータ取得 5. 取得結果を非同期処理で表示 6. タップで connpass に遷移

33. Flutter でアプリ開発してみよう

34. 開発に必要なもの • Flutter SDK • IDE・エディタ ◦ Android Studio ◦

    IntelliJ IDEA ◦ Visual Studio Code • エミュレータ ◦ Xcode の iOS シミュレータ ◦ Android エミュレータ

35. Flutter SDK インストール方法 • Flutter SDK をダウンロード • zip を展開し

    PATH を通す • flutter doctor コマンドを実行

36. まとめ 36

37. Flutter とは何か • Flutter はモバイルアプリ開発フレームワーク ◦ 今後 Web、デスクトップ向けも作成できる • Dart

    は Java っぽい JavaScript ◦ Java を扱ったことがあれば、楽に習得できそう • Widget の入れ子でアプリを構成していく 37