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
[ABCD2021Winter]Flutterアプリ開発実践
Search
Kenichi Kambara
December 11, 2021
Technology
2
230
[ABCD2021Winter]Flutterアプリ開発実践
ABCD 2021 Winterの「Flutterアプリ開発実践」のセッション資料です。
#abcd2021w #androidjp #flutterjp
Kenichi Kambara
December 11, 2021
Tweet
Share
More Decks by Kenichi Kambara
See All by Kenichi Kambara
[potatotips #86]UX Improvements on Flutter Apps Part 1
korodroid
0
28
Supporting RTL on Flutter Apps 7 Development Tips
korodroid
0
30
[DevFestKC]Go Global with Flutter Apps 101
korodroid
0
33
[ABC2023A]Go Global with Flutter Apps
korodroid
0
24
[potatotips #85]Deep Dive into RTL on Flutter Apps (Short ver.)
korodroid
0
39
Supporting RTL on Flutter Apps
korodroid
0
31
[potatotips #84]Supporting Large Screen on Flutter
korodroid
0
82
7 Tips for Wear OS Apps Development
korodroid
0
39
英語学習の取り組み方(例) / Part2
korodroid
1
360
Other Decks in Technology
See All in Technology
暗黙知を集積するプラットフォーム : 「健常者エミュレータ事例集」の取り組み
sora32127
1
160
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
660
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
470
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.6k
バッチ処理のSLOをどう設計するか
rynsuke
7
550
統計的学習理論読み Chapter 2
kmatsui
1
190
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
大規模データとの戦い方
knih
1
460
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
やっていきテスト
k6s4i53rx
0
160
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
20
4k
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
350
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
For a Future-Friendly Web
brad_frost
170
8.9k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
A Philosophy of Restraint
colly
195
15k
Product Roadmaps are Hard
iamctodd
43
9.6k
Raft: Consensus for Rubyists
vanstee
130
6.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Atom: Resistance is Futile
akmur
258
25k
Designing for Performance
lara
601
67k
Transcript
2021.12.11 ਆݪ ݈Ұ (@korodroid) FlutterΞϓϦ։ൃ࣮ફ
About me •Mobile App Development •Speeches (e.g. 9 International confs.)
•Writings (e.g. 6 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org ਆݪɹ݈Ұ (@korodroid)
About my product (Private works) Sekaiphone(Kotlin/Swift+Firebase) MyToDo(Flutter+Firebase)
•ԡ͓͖͍͑ͯͨ͞Tips •࣮ફςΫχοΫ Agenda
ԡ͓͖͍͑ͯͨ͞Tips
Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻
Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻ class MainPage extends StatelessWidget { @override Widget
build(BuildContext context) { return Container(); } } //Before: ΟδΣοτΛશͯखॻ͖ //After: stless/stful/stanim+[Tab]Ωʔ
ΑΓଟ͘ͷςϯϓϨʔτ Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻
Tips 1. ϥΠϒςϯϓϨʔτͷ׆༻ සग़͢ΔίʔυɺࣗલςϯϓϨʔτԽ͓͢͢Ί
Tips 2. ίʔυΞγετػೳͷ׆༻
Widgetͷબ& ALT+ENTER Tips 2. ίʔυΞγετػೳͷ׆༻
Tips 3. FlutterGenͷ׆༻ ΞηοτɾϑΥϯτɾΧϥʔͷཧࢧԉ // Before class MainPage extends StatelessWidget
{ @override Widget build(BuildContext context) { return Image.asset("assets/images/chara1.png"); } } // After ref. FlutterGen: https://github.com/FlutterGen/ fl utter_gen
࣮ફςΫχοΫ
Android: Kotlin, iOS: Swift Android/iOS:Flutter എܠ. FlutterͷҠߦ
ૺ۰ͨ͠ͱରࡦ 1. ෳࡶͳUI 2. ঢ়ଶཧ 3. ϥϯλΠϜύʔϛογϣϯ
1. ෳࡶͳUI Ͳ͏࣮ͬͯݱ͢Δʁ •Step1. ը૾ͷՃ •Step2. ը૾ͷॏͶ߹Θͤ •Step3. Ґஔ߹Θͤ
Ϧιʔε … 100 images
Step1. ը૾ͷՃ(with FlutterGen) flutter: assets: - assets/images/imgKokkiLeftl.png # - assets/images/
pubspec.yaml
Step2. ը૾ͷॏͶ߹Θͤ (How?) ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html
+ +
Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image( height: 80.0,
), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], ); ref. Stack: https://api. fl utter.dev/ fl utter/widgets/Stack-class.html Step2. ը૾ͷॏͶ߹Θͤ
Step3. Ґஔ߹Θͤ //Before Widget _getKokkiImage() { return Stack( children: [
Assets.images.kokkiEn.image( height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Assets.images.imgSpeak.image( height: 24, ), ], );
Step3. Ґஔ߹Θͤ (How?) ref. Positioned: https://api. fl utter.dev/ fl utter/widgets/Positioned-class.html
// After Widget _getKokkiImage() { return Stack( children: [ Assets.images.kokkiEn.image(
height: 80.0, ), Assets.images.imgKokkiLeftl.image( height: 80.0, ), Positioned( left: 4.0, top: 60.0, child: Assets.images.imgSpeak.image( height: 24, ), ), ), ], ); } Step3. ϨΠΞτˍҐஔ߹Θͤ
2. ঢ়ଶཧ ͚ͩ͜͜ߋ৽
2. ঢ়ଶཧ •StatefulWidget •Provider (InheritedWidget) •Riverpod •Bloc •GetX •…
ಛΛཧղͯࣗ͠ͷߟ͑Ͱબ͢Δ͜ͱ͕େ
2. ঢ়ଶཧ •StatefulWidget •Provider (InheritedWidget) •Riverpod •Bloc •GetX •…
ಛΛཧղͯࣗ͠ͷߟ͑Ͱબ͢Δ͜ͱ͕େ
ྫ. GetXΛ༻͍ͨঢ়ଶཧ ൺֱతγϯϓϧʹར༻Մೳ // Before Text(‘Χϯλʔ’), Text("$count"), // After
class MainController extends GetxController { var count = 0.obs; increment() => count++; } [View]main_view.dart [Controller]main_contoroller.dart // After final MainController c = Get.put(MainController()); Text(‘Χϯλʔ’), Obx(() => Text(“${c.count}”)),
GetXͷศརػೳ ͦͷଞʹଟ͘ͷศརػೳ Get.to(NextScreen()); Get.toNamed(‘/details'); Get.back(); ը໘ભҠ(ൈਮ) Get.snackbar('͓Βͤ', ‘৽ணΫʔϙϯ͕͋Γ·͢ɻ'); Get.defaultDialog(
title: "֬ೝ", content: Text("ࠓ͙͢ɺϢʔβొ͠·͔͢ʁ"), confirm: TextButton( child: Text("Ok"), onPressed: () => print("OK࣌ͷॲཧ"), )); ϢʔςΟϦςΟ(ൈਮ) ※↑Ҏ֎ʹ͞·͟·ͳػೳ͕ఏڙ͞Ε͍ͯ·͢ɻ
3. ϥϯλΠϜύʔϛογϣϯ
ंྠͷ࠶ൃ໌ͷલʹ https://pub.dev/
My choice: permission_handler ϥΠϒϥϦͷՃ ϥΠϒϥϦͷΠϯϙʔτ
ྫ. ϥϯλΠϜύʔϛογϣϯͷར༻ཁٻ // ϚΠΫػೳͷར༻ύʔϛογϣϯͷཁٻ var status = await Permission.microphone.request(); औಘͰ͖Δ݁Ռͷྫ
- Granted - Denied - PermanentlyDenied - Restricted
Conclusion •Tipsˍ࣮ફςΫχοΫΛ׆༻ͯ͠ޮతͳ։ൃΛʂ •ࣗͨͪͷϕλʔϓϥΫςΟεΛฤΈग़͢ͷ͕͓͢͢Ίʂ •FlutterͷੈքΓ্͍͖͛ͯ·͠ΐ͏🏃 ref.1 : Twitter @korodroid ref.2
: Speaker Deck https://speakerdeck.com/korodroid/
Please let me know if you have any requests
such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much