SlideShare a Scribd company logo
Flutterを使って
モバイルアプリを作った軌跡
2019/09/20 sh-ogawa
きょうの流れ
Flutterについて
Flutterで作る前に何をしたか
Flutterで作ってみてどうだったか
Flutterについて
● ハイブリッドアプリケーションプラット
フォーム
● Googleが開発
● version 1.9が最新
ハイブリッドアプリケーシ
ョンプラットフォーム
● センサなどデバイスへのアクセス可能
● Webベース
● ネイティブベース
Webベース
● cordova/phonegap、ionic
● html5/css3/javascript
● SPAの元祖(言い過ぎかもしれない)
ネイティブベース
● xamarin、react native、flutter
● コンパイルされる
Flutter
● Dart製
● 下側はプラットフォームレベルのCと連携し
ている模様
● コンパイルすると.soが作られる
● Android/iOS用に拡張できる
アプリ作る前にやったこと
● とりあえず本読んだ
https://www.amazon.co.jp/dp/4798055832/ref=cm_sw_em_r_mt_dp_U_wkVGDb77K2H7S
● Flutter official site document
https://flutter.dev/docs
● TODO書いてみた
https://github.com/sh-ogawa/flutter-todo
● Flutter Widget of the week
https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
● Effective Dart
https://dart.dev/guides/language/effective-dart
コードを読んでみる
Flutterで作ってみてどう
だったか
● UIの微調整は慣れが必要
● Widgetはイミュータブル
● Widgetツリーを意識する
● ジェスチャーの実装が楽
● リソース読み込みは全部非同期
● ログは読みづらいけど親切ではある
UIの微調整は慣れが必要
● 思ったようにマージン適応できない
● LEFTが思ったように効かない
● ListView使うとエラーになる
Widgetはイミュータブル
● 常に新しく作られて置き換わる
● パネルで考えると判りやすい
Widgetツリーを意識する
● Widgetのリビルド範囲に直結する
● 何も考えないで配置すると激重になる
● Stateによって再生成するものは外側へ
● StatefullWidgetのサンプル悪ない?
ジェスチャーの実装が楽
● スワイプとかダブルタップとか標準
● オブジェクトがどこに配置されているか管理
不要
リソース読込みは非同期
● Futureが強力(Async/Awaitのこと)
● Futureにジェネリクスが使える
● Promiseをある程度使えない人にはFlutter
は難しい
ログは親切
● だらだら垂れ流してくるから読みづらい
● 必要なことは書いてある
● だが読みづらい
おしまい

More Related Content

Similar to Flutter first impression

PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -Katsumi Onishi
 
Firefox os hackathon
Firefox os hackathonFirefox os hackathon
Firefox os hackathon
dynamis
 
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみようDartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
cch-robo
 
Rubykaigi2010
Rubykaigi2010Rubykaigi2010
Rubykaigi2010
masaki yamada
 
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 についてNAO/Pepper 開発環境 について
NAO/Pepper 開発環境 について
Takuji Kawata
 
NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法Naruto TAKAHASHI
 
Try Firefox OS
Try Firefox OSTry Firefox OS
Try Firefox OS
dynamis
 
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
 
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発takeuchi-tk
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
Shozo Okada
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
 
ネイティブ機能を利用する Webアプリの実例 ~PhoneGap×Rails~
ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~
ネイティブ機能を利用する Webアプリの実例 ~PhoneGap×Rails~Daisuke Futatsumori
 
Html5 seminar 1_pac
Html5 seminar 1_pacHtml5 seminar 1_pac
Html5 seminar 1_pac1PAC. INC.
 
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
Monaca
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Socialngi group.
 
自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!
とさ はるき
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール WeinerをつかってみたMasakazu Muraoka
 
PhoneGapの始め方
PhoneGapの始め方PhoneGapの始め方
PhoneGapの始め方
akabana
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
アシアル株式会社
 

Similar to Flutter first impression (20)

PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
 
Firefox os hackathon
Firefox os hackathonFirefox os hackathon
Firefox os hackathon
 
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみようDartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
 
Rubykaigi2010
Rubykaigi2010Rubykaigi2010
Rubykaigi2010
 
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 についてNAO/Pepper 開発環境 について
NAO/Pepper 開発環境 について
 
NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法NPAPIを使ったandroid標準ブラウザの拡張方法
NPAPIを使ったandroid標準ブラウザの拡張方法
 
OSC福岡 20111203
OSC福岡 20111203OSC福岡 20111203
OSC福岡 20111203
 
Try Firefox OS
Try Firefox OSTry Firefox OS
Try Firefox OS
 
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
 
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
 
2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk2011_9_9_AIR_LightningTalk
2011_9_9_AIR_LightningTalk
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
ネイティブ機能を利用する Webアプリの実例 ~PhoneGap×Rails~
ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~ネイティブ機能を利用するWebアプリの実例~PhoneGap×Rails~
ネイティブ機能を利用する Webアプリの実例 ~PhoneGap×Rails~
 
Html5 seminar 1_pac
Html5 seminar 1_pacHtml5 seminar 1_pac
Html5 seminar 1_pac
 
企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点企画者が押さえておきたいHtml5アプリ開発の要点
企画者が押さえておきたいHtml5アプリ開発の要点
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
 
自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!自作flutterアプリをリファクタリングしてみた!
自作flutterアプリをリファクタリングしてみた!
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
 
PhoneGapの始め方
PhoneGapの始め方PhoneGapの始め方
PhoneGapの始め方
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 

More from 小川 昌吾

Effective flutter
Effective flutterEffective flutter
Effective flutter
小川 昌吾
 
Flutter management statement
Flutter management statementFlutter management statement
Flutter management statement
小川 昌吾
 
Laravel vue-project-upload
Laravel vue-project-uploadLaravel vue-project-upload
Laravel vue-project-upload
小川 昌吾
 
Lara vue
Lara vueLara vue
Lara vue
小川 昌吾
 
Atomic design+vue
Atomic design+vueAtomic design+vue
Atomic design+vue
小川 昌吾
 
今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り
小川 昌吾
 
Njug docker-20180623
Njug docker-20180623Njug docker-20180623
Njug docker-20180623
小川 昌吾
 
アプリ屋のための Docker入門
アプリ屋のための Docker入門アプリ屋のための Docker入門
アプリ屋のための Docker入門
小川 昌吾
 
Njug 20180414
Njug 20180414Njug 20180414
Njug 20180414
小川 昌吾
 
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経ったJava屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
小川 昌吾
 
チュートリアルではじめるVue.js
チュートリアルではじめるVue.jsチュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
 
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
小川 昌吾
 
ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)
小川 昌吾
 
非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理
小川 昌吾
 
Dynamo db はじめの一歩
Dynamo db はじめの一歩Dynamo db はじめの一歩
Dynamo db はじめの一歩
小川 昌吾
 
スキトラGit
スキトラGitスキトラGit
スキトラGit
小川 昌吾
 
スキトラ Spring + mybatis
スキトラ Spring + mybatisスキトラ Spring + mybatis
スキトラ Spring + mybatis
小川 昌吾
 
テストコード入門
テストコード入門テストコード入門
テストコード入門
小川 昌吾
 
IoT検定
IoT検定IoT検定
IoT検定
小川 昌吾
 
MySQL入門
MySQL入門MySQL入門
MySQL入門
小川 昌吾
 

More from 小川 昌吾 (20)

Effective flutter
Effective flutterEffective flutter
Effective flutter
 
Flutter management statement
Flutter management statementFlutter management statement
Flutter management statement
 
Laravel vue-project-upload
Laravel vue-project-uploadLaravel vue-project-upload
Laravel vue-project-upload
 
Lara vue
Lara vueLara vue
Lara vue
 
Atomic design+vue
Atomic design+vueAtomic design+vue
Atomic design+vue
 
今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り今年はある意味当たり年だった! という一年振り返り
今年はある意味当たり年だった! という一年振り返り
 
Njug docker-20180623
Njug docker-20180623Njug docker-20180623
Njug docker-20180623
 
アプリ屋のための Docker入門
アプリ屋のための Docker入門アプリ屋のための Docker入門
アプリ屋のための Docker入門
 
Njug 20180414
Njug 20180414Njug 20180414
Njug 20180414
 
Java屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経ったJava屋からPHPerになって1年くらい経った
Java屋からPHPerになって1年くらい経った
 
チュートリアルではじめるVue.js
チュートリアルではじめるVue.jsチュートリアルではじめるVue.js
チュートリアルではじめるVue.js
 
受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた受託、SES、WEBと経験したので比較してみた
受託、SES、WEBと経験したので比較してみた
 
ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)ITの開発現場における最近の当たり前これからの当たり前(主観)
ITの開発現場における最近の当たり前これからの当たり前(主観)
 
非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理非エンジニアに捧ぐツアーオブ構成管理
非エンジニアに捧ぐツアーオブ構成管理
 
Dynamo db はじめの一歩
Dynamo db はじめの一歩Dynamo db はじめの一歩
Dynamo db はじめの一歩
 
スキトラGit
スキトラGitスキトラGit
スキトラGit
 
スキトラ Spring + mybatis
スキトラ Spring + mybatisスキトラ Spring + mybatis
スキトラ Spring + mybatis
 
テストコード入門
テストコード入門テストコード入門
テストコード入門
 
IoT検定
IoT検定IoT検定
IoT検定
 
MySQL入門
MySQL入門MySQL入門
MySQL入門
 

Flutter first impression

Editor's Notes

  1. ionicは割と頑張っている印象