Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter 入門勉強会

Flutter 入門勉強会

2019.6.8
山梨IT同好会(仮)
https://yamanashi-it.connpass.com/event/133038/

Yuuki Shimizu

June 08, 2019
Tweet

More Decks by Yuuki Shimizu

Other Decks in Programming

Transcript

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

    • 甲府生まれ 甲府育ち ※ 現在は東京に出稼ぎ中(3年目) 2
  2. Flutter • Google が提供 • Android/iOS アプリのための SDK (クロスプラットフォーム) •

    高い開発効率と実行パフォーマンス ◦ ホット リロードでサクサク開発できる ◦ Dart で書いたコードがマシンコードにコンパイルされる ◦ 1000くらいのウィジェットがある • マテリアルデザインに則った UI パーツを標準提供
  3. 注目されはじめている 18 Study of Programming Languages Not to Learn in

    2019 https://www.codementor.io/blog /worst-languages-2019-6mvbfg3 w9x
  4. 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
  5. 22 クラス class Animal { String name; int power; //

    コンストラクタ Animal(this.name, this.power); }
  6. 23 クラス class Tiger extends Animal { int height; Tiger(this.height,

    String name, int power) : super(name, power); }
  7. 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(); }); }
  8. サンプルアプリを読み解く 26 Scaffold アプリ全体の構成を決定 AppBar タイトルバーに表示する内容 Centor 中心に表示 Text 文字の表示

    FloatingActionButton ボタンの表示 Centor Scaffold AppBar Text Widget の入れ子で Flutter は構成される
  9. 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
  10. 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
  11. 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
  12. Stateless? Stateful? 30 • StatelessWidget ◦ build メソッドを持ち、Widget もしくはテキストを返す ◦

    State(状態) の概念がないため、動的に変化しない Widget • StatefulWidget ◦ Widget に State の概念を入れて拡張したもの ◦ createState メソッドを持ち、State クラスを返す State クラスで build メソッドを持ち、Widget を返す ◦ 画面更新タイミングで setState を呼ぶ 状態が動的に変化するかしないか
  13. 山梨県のイベントカレンダーを作ってみます 32 1. プロジェクトの作成 2. Hello World 3. ダミーで ListView

    に表示 4. connpass API からデータ取得 5. 取得結果を非同期処理で表示 6. タップで connpass に遷移
  14. 開発に必要なもの • Flutter SDK • IDE・エディタ ◦ Android Studio ◦

    IntelliJ IDEA ◦ Visual Studio Code • エミュレータ ◦ Xcode の iOS シミュレータ ◦ Android エミュレータ
  15. Flutter とは何か • Flutter はモバイルアプリ開発フレームワーク ◦ 今後 Web、デスクトップ向けも作成できる • Dart

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