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
810
[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
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
740
[AgentConHelsinki2025]From Assistant to Agent: How Developer Agents Reshape Mobile Workflows
korodroid
0
9
[FlutterTokyo#10]In-App Language Switching in Flutter
korodroid
0
24
[potatotips #92]Integrating Quick Settings Tiles into Your Android App
korodroid
1
140
[ABC2025Spring]Code Less, Build More: A Practical Guide to Mobile Apps with Generative AI
korodroid
0
200
[DevTalksRomania]Building Augmented Reality Experiences with Flutter and AI-Powered Development
korodroid
0
17
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
51
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
70
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
930
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
310
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
210
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.4k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
500
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
310
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
260
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
150
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1.1k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Navigating Team Friction
lara
190
15k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Ace a Technical Interview
jacobian
280
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Building an army of robots
kneath
306
46k
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