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.3k
DartとFlutterでアプリ開発
2019/07/05
「宮城アプリ開発勉強会 #1」の資料です。
Dart/Flutterに興味はあるけどやった事無い、という皆さんに向けて、
こんな感じだよー、という雰囲気の資料です。
ken
July 05, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.6k
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
速いWebフレームワークを作る
yusukebe
5
1.7k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Code Review Best Practice
trishagee
70
19k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
KATA
mclloyd
32
14k
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Optimizing for Happiness
mojombo
379
70k
RailsConf 2023
tenderlove
30
1.2k
Thoughts on Productivity
jonyablonski
70
4.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
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ɺ ࠓɺ·͞ʹաظʹ͋Δͷͩʂ ৽͍͠Ϟϊ͖ͳΒ ৮ͬͯΈΔՁΞϦʂ