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
PicoRuby on Rails
makicamel
2
130
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
670
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
720
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
350
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Is Xcode slowly dying out in 2025?
uetyo
1
260
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Site-Speed That Sticks
csswizardry
10
680
Embracing the Ebb and Flow
colly
86
4.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
KATA
mclloyd
30
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Automating Front-end Workflow
addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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ɺ ࠓɺ·͞ʹաظʹ͋Δͷͩʂ ৽͍͠Ϟϊ͖ͳΒ ৮ͬͯΈΔՁΞϦʂ