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
[NTT Tech Conference]Flutterアプリ開発スタートアップwithTips
Search
Kenichi Kambara
February 26, 2021
Technology
0
800
[NTT Tech Conference]Flutterアプリ開発スタートアップwithTips
This is my presentation file on NTT Tech Conference 5.
#NTTtech
#flutterjp
#flutter
Kenichi Kambara
February 26, 2021
Tweet
Share
More Decks by Kenichi Kambara
See All by Kenichi Kambara
[ABC2025Spring]Code Less, Build More: A Practical Guide to Mobile Apps with Generative AI
korodroid
0
170
[DevTalksRomania]Building Augmented Reality Experiences with Flutter and AI-Powered Development
korodroid
0
11
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
36
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
63
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
860
[DevFestMilano]Enhancing Flutter Apps UX for Global Users
korodroid
0
44
[mobile #15]UX Improvements on Flutter Apps Part 5
korodroid
0
59
[ABC2024Summer]Flutter UX Improvements + α
korodroid
0
540
[YUMEMI.grow Mobile #14]Wear OS Recap from I/O 2024 [short version]
korodroid
0
66
Other Decks in Technology
See All in Technology
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
160
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
100
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
370
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
140
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
230
5min GuardDuty Extended Threat Detection EKS
takakuni
0
190
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.2k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
It's Worth the Effort
3n
185
28k
Agile that works and the tools we love
rasmusluckow
329
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
2021.02.26 Kenichi Kambara (@korodroid) FlutterΞϓϦ։ൃελʔτΞοϓ with Tips
About me •Mobile App Development •Speeches (e.g. 9 International confs.)
•Writings (e.g. 5 Dev Books) •[Official] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
About my product (Private works) Sekaiphone(Kotlin/Swift+Firebase) MyToDo(Flutter+Firebase)
•Flutter֓ཁ •Flutterͷ͡Ίํ •ޮతͳ։ൃͷਐΊํ(Tipsू) Agenda
Flutter֓ཁ
Flutter ڞ௨ͷιʔεͰiOS/Android͚ΞϓϦΛ ։ൃͰ͖ΔSDK(ΫϩεϓϥοτϑΥʔϜ) ※σεΫτοϓ/WebରԠਐߦத
Flutterͷಛ 1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ 2.ߴ͍։ൃޮ 3.ݴޠDart
1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ https://flutter.dev/showcase iOS/Android͚ͷࣗલUI(≠ϥούʔ)
2.ߴ͍։ൃޮ ίʔυมߋΛଈө(Hot Reload)
3.ݴޠDart Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ(UI࡞ΓDart) import 'package:flutter/material.dart'; void main() { runApp( Center(
child: Text( '͜ΜʹͪɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
Flutterͷ͡Ίํ
·ͣײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code
•IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio &DartPad ͍׳Ε͍ͯΕ ࠷ॳ͔Βͪ͜ΒͰ
·ͣײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code
•IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio &DartPad ͍׳Ε͍ͯΕ ࠷ॳ͔Βͪ͜ΒͰ
(ຊདྷDartͰUI࡞Γ)GUIπʔϧΛͬͯɺUIσβΠϯՄೳ 1. ը໘Λ࡞Δ(Flutter Studio)
Web্ͰDartίʔσΟϯά&FlutterʹରԠ 2. ࣮ߦ͢Δ(DartPad)
·ͣײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code
•IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio &DartPad ͍׳Ε͍ͯΕ ࠷ॳ͔Βͪ͜ΒͰ
։ൃڥߏஙˠΞϓϦ࣮ߦ͕ͬͭΓলུ ʢৄࡉެࣜαΠτͰ🙇ʣ
ೖ࣌ʹԡ͍͑ͨ͞ϙΠϯτ •FlutterΞϓϦͷϑΝΠϧߏ •ը໘ͷ࡞Γํ •ϏδωεϩδοΫͷޮతͳ࣮
FlutterΞϓϦͷϑΝΠϧߏ ιʔείʔυ(*.dart) •ϥΠϒϥϦఆٛ •Ϧιʔεఆٛ(ը૾ͳͲ)
ը໘ͷ։ൃDart(LayoutXML, StoryBoard) ը໘ͷ࡞Γํ import 'package:flutter/material.dart'; void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('͡ΊͯͷFlutter'), ), body: Center( child: Text('͜ΜʹͪɺFlutter'), ), ), ); } }
એݴతUIϑϨʔϜϫʔΫ Hello Flutterͷίʔυղઆ import 'package:flutter/material.dart'; void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('͡ΊͯͷFlutter'), ), body: Center( child: Text('͜ΜʹͪɺFlutter'), ), ), ); } }
πϦʔߏͰେ͖ͳཁૉˠখ͞ͳཁૉͷॱংͰ ߏཁૉશͯWidget(ΟδΣοτ) Text AppBar Body Scaffold Text Center
StateΛར༻ͯ͠ঢ়ଶཧ [Ԡ༻]ಈతͳը໘ߋ৽ˠ(·ͣ)StatefulWidget import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class
MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(title: 'Welcome to Flutter'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } …(লུ)…
ϏδωεϩδοΫͷޮతͳ࣮ https://pub.dev/ ंྠͷൃ໌લʹʮύοέʔδʯௐࠪ
ྫ͑ɺKey-Valueܗࣜͷσʔλอଘ “sharedpreference”Ͱݕࡧ 3 1 2 pubspec.yamlͷఆٛํ๏ Πϯετʔϧํ๏ (IDEͳΒಉظϘλϯԡ͚ͩ͢) ϥΠϒϥϦͷΠϯϙʔτ
“^0.5.8” Android StudioͰͷૢ࡞ 1 2
ύοέʔδΛར༻࣮ͨ͠ྫ import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async { SharedPreferences prefs
= await SharedPreferences.getInstance(); await prefs.setString('key1', value); }
Flutterೖ࣌ʹ͓͍͑ͨ͞Dartཁૉ • _ (privateʹ૬) • https://dart.dev/guides/language/language-tour#libraries-and-visibility • .. (Χεέʔυه๏)
• https://dart.dev/guides/language/language-tour#cascade-notation- • … (Spreadԋࢉࢠ) • https://dart.dev/guides/language/language-tour#spread-operator • Future / Stream (ඇಉظॲཧ) • https://dart.dev/tutorials/language/streams ref. Dart Official Site https://dart.dev/
ޮతͳ։ൃͷਐΊํ(Tipsू)
FlutterΞϓϦ։ൃͷߴԽ ίʔσΟϯάฤ ศརϓϥάΠϯฤ ※ࠓճAndroid StudioΛར༻͠·͢ɻ
ίʔσΟϯάฤ
[Before]ΟδΣοτΛશͯखॻ͖ class MainPage extends StatelessWidget { @override Widget build(BuildContext context)
{ return Container(); } } // Stateless Widget
stless/stfull/stanim+[Tab] Key [After 1] ϥΠϒςϯϓϨʔτͷ׆༻
[After 1] ϥΠϒςϯϓϨʔτͷ׆༻
[After 2] Flutter Snippets ΑΓଟ͘ͷςϯϓϨʔτ
[After 3] ࣗલςϯϓϨʔτ Α͘͏ͷɺࣗͰ᪳ͳ͘ొʂ
Ϣʔεέʔε:ը໘ͷվ
Select Widget & ALT+ENTER [After 4] ίʔυΞγετػೳͷ׆༻
ศརϓϥάΠϯฤ
[Plugin 1] FlutterGen ΞηοτɾϑΥϯτɾΧϥʔͷཧࢧԉ [wasabeef͞Μ]https://github.com/FlutterGen/flutter_gen // Before class MainPage extends
StatelessWidget { @override Widget build(BuildContext context) { return Image.asset("assets/images/chara1.png"); } } // After
[Plugin 2] Flutter Enhancement Suite ύοέʔδͷಋೖࢧԉ [Marius Höfler͞Μ]https://plugins.jetbrains.com/plugin/12693-flutter-enhancement-suite
[Plugin 3] FlutterJsonBeanFactory JSONͷར༻ࢧԉ [zhangruiyu͞Μ]https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory
•ϝϯςφϯε͠қ͍UIͷ࡞Γํ ʢ֊Λਂ͘͠ա͗ͳ͍Α͏ʹϩδοΫׂʣ •ΞϓϦͷঢ়ଶཧ ɹ(Provider/Riverpod/BLoC) [Ԡ༻]࣍ʹԡ͍͑ͨ͞ϙΠϯτ
Conclusion •1ιʔεͰAndroid/iOS+αΞϓϦ։ൃ •ϓϩμΫγϣϯద༻Մೳ •TipsΛϑϧ׆༻ͯ͠ޮతͳ։ൃΛʂ
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