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
DartとFlutterでアプリ開発
Search
ken
July 05, 2019
Programming
0
1.2k
DartとFlutterでアプリ開発
2019/07/05
「宮城アプリ開発勉強会 #1」の資料です。
Dart/Flutterに興味はあるけどやった事無い、という皆さんに向けて、
こんな感じだよー、という雰囲気の資料です。
ken
July 05, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
技術を改善し続ける
gumioji
0
180
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
62
20k
高セキュリティ・高耐障害性・サブシステム化。そして2億円
tasukulab280
1
330
Domain-Driven Design (Tutorial)
hschwentner
13
22k
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
770
Jakarta EE meets AI
ivargrimstad
0
780
Learning Kotlin with detekt
inouehi
1
220
Datadog Workflow Automation で圧倒的価値提供
showwin
1
330
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
760
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
160
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
150
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
270
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.7k
GitHub's CSS Performance
jonrohan
1030
460k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Bash Introduction
62gerente
611
210k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
DartとFlutterで アプリ開発 宮城アプリ開発勉強会 2019/07/05
⾃⼰紹介 ๏ 佐藤健(さとうけん) • フリーランスのプログラマ ๏ ⾔語 • Flash/ActionScript •
TypeScript ๏ 趣味 • スラックライン(楽しいよ) • トランポリン(ハマるよ)
Dart? JavaScriptの代替になりたかった プログラミング⾔語
Flutter? iOS/Androidアプリ開発の Dart⽤フレームワーク
Dart、誕⽣ ๏ Googleが開発 ๏ 2011年初公開 • JavaScriptの代替として新規開発 • DartVMで動作する •
DartVMはいずれChromeに統合される • …はずだったのだが…
Dart、⽅向転換 ๏ 2015年 DartVMのChrome統合を断念 • JavaScriptへコンパイルする形へ ๏ 2017年 TypeScriptがGoogle社内標準⾔語に Ͳ͏ߟ͑ͯɺ
%BSUɺ͜ͷ··ফ͑ΔͩΖɻɻɻ
๏ 2018年2⽉ 突然の再起動 • 22⽇ Dart2の発表 • 27⽇ Flutter(Beta)の発表 ๏
2018年12⽉ • 4⽇ Flutter1.0 リリース ๏ 2019年7⽉現在 • Dart2.4.0(2019-06-27) • Flutter 1.5.4-hotfix.2 • 開発版は1.7.11が最新 Dart、再起動 ٸʹ׆ൃʹͳͬͨʜ
๏ Androidアプリが作れる ๏ iOSアプリが作れる ๏ 同じソースコードで両⽅作れる • iOSっぽいUIパーツも⽤意されている Flutter、概要 ಉ͡ιʔείʔυͰ࡞ΕΔΑɻ
ͪΖΜͦΕͳΓͷखؒඞཁ͚ͩͲͶɻ w w w
Flutter、余談 ๏ Fuchsia(フクシア、フクシャ、フューシャ) • Googleが開発中の新しいOS(謎) • UIとアプリはDart/Flutterで作成
Dart/Flutter、開発環境 ๏ Dartを試すだけなら • https://dartpad.dartlang.org/ ๏ きちんと環境を構築するなら • AndroidStudio もしくは
VSCode • https://flutter.dev/ • 「Get Started」の通り 1.FlutterSDKを落としてパス通す 2.flutter doctorコマンドの⾔う事聞く
Dart/Flutter Don't Think. Feel.
Flutter、画⾯構築 ๏ 画⾯の全てはWidget ๏ Widgetは基本的には2種類 • StatelessWidget • StatefulWidget ๏
全てのWidgetは上記2種の継承クラス
サンプルコード import 'package:flutter/material.dart'; void main() { return runApp(MyApp()); } class
MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Hello World App'), ), body: Center( child: Text( 'Hello World', style: TextStyle( color: Colors.green, fontSize: 90, ), ), ), ), ); } }
サンプルコード(1) import 'package:flutter/material.dart'; void main() { return runApp(MyApp()); } class
MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return (লུ) } } ๏ main関数が最初に呼ばれる ๏ ‘new’は省略可能 ๏ runApp関数にWidgetのインスタンスを渡す ๏ アプリルートのWidgetに
サンプルコード(2) class MyApp extends StatelessWidget { @override Widget build(BuildContext context)
{ return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Hello World App'), ), body: (লུ) ), ); } } ๏ MaterialAppWidget ๏ ScaffoldWidget ๏ AppBarWidget ๏ TextWidget
サンプルコード(3) class MyApp extends StatelessWidget { @override Widget build(BuildContext context)
{ return MaterialApp( home: Scaffold( appBar: (লུ), body: Center( child: Text( 'Hello World', style: TextStyle( color: Colors.green, fontSize: 90, ), ), ), ), ); } }
レイアウト(配置の調整) Center( child: Text( 'Hello World', style: TextStyle((লུ)), ), )
Align( alignment: Alignment.bottomRight, child: Text( 'Hello World', style: TextStyle((লུ)), ), )
レイアウト(縦に並べる) Center( child: Text( 'Hello World', style: TextStyle((লུ)), ), )
Column( children: <Widget>[ Text( 'Hello World', style: TextStyle((লུ)), ), Text( 'Hello World', style: TextStyle((লུ)), ), ], ),
レイアウト(横に並べる) Center( child: Text( 'Hello World', style: TextStyle((লུ)), ), )
Row( children: <Widget>[ Text( 'Hello World', style: TextStyle((লུ)), ), Text( 'Hello World', style: TextStyle((লུ)), ), ], ),
画像を表⽰ Center( child: Image.network( 'http://jinten.net/logo.jpg', ), )
ボタン Center( child: RaisedButton( child: Text( 'Ϙλϯ', style: TextStyle(fontSize: 20),
), onPressed: () { print('Button pressed!!'); }, ), ),
ダイアログ onPressed: () { showDialog( context: context, builder: (BuildContext context)
{ return AlertDialog( title: Text('λΠτϧ'), content: Text('ຊจຊจຊจຊจ'), actions: <Widget>[ FlatButton( child: Text('Cancel'), onPressed: () {}, ), FlatButton( child: Text('OK'), onPressed: () {}, ), ], ); }, ); },
ダイアログ(iOS⾵) onPressed: () { showDialog( context: context, builder: (BuildContext context)
{ return CupertinoAlertDialog( title: Text('λΠτϧ'), content: Text('ຊจຊจຊจຊจ'), actions: <Widget>[ CupertinoButton( child: Text('Cancel'), onPressed: () {}, ), CupertinoButton( child: Text('OK'), onPressed: () {}, ), ], ); }, ); },
Dartパッケージの追加 ๏ https://pub.dev
Dart/Flutterの 良い所・悪い所
良い! ๏ 並べる系レイアウトなら⾮常に簡単 ๏ よくあるUIパーツなら⽤意されてる • pub.dev探せばそこそこのモノは⾒つかる ๏ Googleが開発している •
Googleサービス/プロダクトとの⾼い親和性 • firebaseとか ๏ (少なくとも今は)とても活発 ๏ AndroidとiOSのどちらにも対応できる • 将来的にはWeb, Desktop, RaspberryPi, 他 w w (PPE
悪い… ๏ ⾃由なレイアウトには対応しづらい • ゲームとか ๏ まだまだ新しい • 情報が少ない •
知名度が低い ๏ 「AndroidとiOSをワンソースで」の暴⾛ ๏ iOS⾵のUIという罠 ๏ ネストが深くなりがち ๏ スタンダートな設計などが確⽴されていない w #BE
まとめ %BSU'MVUUFSɺ ࠓɺ·͞ʹաظʹ͋Δͷͩʂ ৽͍͠Ϟϊ͖ͳΒ ৮ͬͯΈΔՁΞϦʂ