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
500
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
64
山梨のIT勉強会コミュニティを盛り上げるためにアレ作ってみた!
yuukis
0
63
FastAPI を活用した オープンデータAPI の作成
yuukis
0
950
FastAPIで始める やまなし温泉めぐり
yuukis
0
440
Slack の困りごとを何とかしてみた①
yuukis
0
81
Pythonでslackの困りごとを何とかしてみた①
yuukis
0
300
Pythonでお絵かき①
yuukis
0
350
Pythonを使ってみんなでワイワイしたい
yuukis
0
180
Pythonで始めるお手軽ダイエット(2)
yuukis
0
380
Other Decks in Programming
See All in Programming
Introduction to kotlinx.rpc
arawn
0
630
Ruby on cygwin 2025-02
fd0
0
140
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
テストをしないQAエンジニアは何をしているか?
nealle
0
130
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Automating Front-end Workflow
addyosmani
1367
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Scaling GitHub
holman
459
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building Your Own Lightsaber
phodgson
104
6.2k
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