Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter 入門勉強会
Search
Yuuki Shimizu
June 08, 2019
Programming
1
490
Flutter 入門勉強会
2019.6.8
山梨IT同好会(仮)
https://yamanashi-it.connpass.com/event/133038/
Yuuki Shimizu
June 08, 2019
Tweet
Share
More Decks by Yuuki Shimizu
See All by Yuuki Shimizu
Gemini API を試した話と山梨でオススメのものを語るLT
yuukis
0
52
山梨のIT勉強会コミュニティを盛り上げるためにアレ作ってみた!
yuukis
0
56
FastAPI を活用した オープンデータAPI の作成
yuukis
0
910
FastAPIで始める やまなし温泉めぐり
yuukis
0
410
Slack の困りごとを何とかしてみた①
yuukis
0
81
Pythonでslackの困りごとを何とかしてみた①
yuukis
0
290
Pythonでお絵かき①
yuukis
0
330
Pythonを使ってみんなでワイワイしたい
yuukis
0
170
Pythonで始めるお手軽ダイエット(2)
yuukis
0
360
Other Decks in Programming
See All in Programming
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
イベント駆動で成長して委員会
happymana
1
270
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
340
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
160
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
WEBエンジニア向けAI活用入門
sutetotanuki
0
330
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
420
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
440
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
440
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
410
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Docker and Python
trallard
40
3.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Done Done
chrislema
181
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
What's new in Ruby 2.0
geeforr
343
31k
Optimizing for Happiness
mojombo
376
69k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Making Projects Easy
brettharned
115
5.9k
Transcript
1 入門 勉強会 2019. 6. 8 山梨IT同好会(仮)
自己紹介 しみず ゆうき • モバイルアプリ エンジニア ◦ Android (2010年〜)、iOS (2013年〜)
• 甲府生まれ 甲府育ち ※ 現在は東京に出稼ぎ中(3年目) 2
【本日のテーマ】 Flutter を体験 しよう 3
本日の勉強会の進め方 演習の時間をたっぷり用意します。 あせらずゆっくり進めましょう。 隣同士で議論し、作業内容を確認し合いながら 進めましょう。 4
本日の流れ • 概要の説明 • デモ • ワークショップ 5
Flutter 概要 6
Flutter ってナニ??
モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない...
モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない... ↓ クロスプラットフォーム開発フレームワーク はどうよ?
クロスプラットフォーム開発 1ソースで 複数 のプラットフォームのアプリケーションを 開発!
クロスプラットフォーム開発フレームワーク
クロスプラットフォーム開発フレームワーク(他) • ゲーム系 ◦ Unity ◦ Cocos2d-x • WebView ベース
◦ Apache Cordova ◦ Titanium Mobile • 他にも色々
万能ではない!!!! • 動作が重いこともあるし... • バイナリサイズが大きくなっちゃうし... • OSが提供する全ての機能にアクセスできるわけでも無いし... • デザインもツールに縛られる場合があるし...
Flutter はどうなの? 14
Flutter • Google が提供 • Android/iOS アプリのための SDK (クロスプラットフォーム) •
高い開発効率と実行パフォーマンス ◦ ホット リロードでサクサク開発できる ◦ Dart で書いたコードがマシンコードにコンパイルされる ◦ 1000くらいのウィジェットがある • マテリアルデザインに則った UI パーツを標準提供
16 Windows, macOS, Linux 開発がもうすぐ可能に!
Dart 言語 17
注目されはじめている 18 Study of Programming Languages Not to Learn in
2019 https://www.codementor.io/blog /worst-languages-2019-6mvbfg3 w9x
Dart • Java や JavaScript に似たシンタックス ◦ オブジェクト指向型言語 • 静的型付けにも対応。型推論も出来る
• JavaScript やマシンコードにコンパイルできる 19
組み込み型 ① int, double ② String ③ Boolean 20 ④
List ⑤ Set ⑥ Map
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 クラス class Animal { String name; int power; //
コンストラクタ Animal(this.name, this.power); }
23 クラス class Tiger extends Animal { int height; Tiger(this.height,
String name, int power) : super(name, power); }
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(); }); }
Flutter 25
サンプルアプリを読み解く 26 Scaffold アプリ全体の構成を決定 AppBar タイトルバーに表示する内容 Centor 中心に表示 Text 文字の表示
FloatingActionButton ボタンの表示 Centor Scaffold AppBar Text Widget の入れ子で Flutter は構成される
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
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
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
Stateless? Stateful? 30 • StatelessWidget ◦ build メソッドを持ち、Widget もしくはテキストを返す ◦
State(状態) の概念がないため、動的に変化しない Widget • StatefulWidget ◦ Widget に State の概念を入れて拡張したもの ◦ createState メソッドを持ち、State クラスを返す State クラスで build メソッドを持ち、Widget を返す ◦ 画面更新タイミングで setState を呼ぶ 状態が動的に変化するかしないか
デモ 31
山梨県のイベントカレンダーを作ってみます 32 1. プロジェクトの作成 2. Hello World 3. ダミーで ListView
に表示 4. connpass API からデータ取得 5. 取得結果を非同期処理で表示 6. タップで connpass に遷移
Flutter でアプリ開発してみよう
開発に必要なもの • Flutter SDK • IDE・エディタ ◦ Android Studio ◦
IntelliJ IDEA ◦ Visual Studio Code • エミュレータ ◦ Xcode の iOS シミュレータ ◦ Android エミュレータ
Flutter SDK インストール方法 • Flutter SDK をダウンロード • zip を展開し
PATH を通す • flutter doctor コマンドを実行
まとめ 36
Flutter とは何か • Flutter はモバイルアプリ開発フレームワーク ◦ 今後 Web、デスクトップ向けも作成できる • Dart
は Java っぽい JavaScript ◦ Java を扱ったことがあれば、楽に習得できそう • Widget の入れ子でアプリを構成していく 37