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
690
[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
[potatotips #86]UX Improvements on Flutter Apps Part 1
korodroid
0
27
Supporting RTL on Flutter Apps 7 Development Tips
korodroid
0
28
[DevFestKC]Go Global with Flutter Apps 101
korodroid
0
32
[ABC2023A]Go Global with Flutter Apps
korodroid
0
24
[potatotips #85]Deep Dive into RTL on Flutter Apps (Short ver.)
korodroid
0
35
Supporting RTL on Flutter Apps
korodroid
0
31
[potatotips #84]Supporting Large Screen on Flutter
korodroid
0
81
7 Tips for Wear OS Apps Development
korodroid
0
39
英語学習の取り組み方(例) / Part2
korodroid
1
350
Other Decks in Technology
See All in Technology
第131回 雲勉【オンライン】AWSを9年触ってきて経験した落とし穴、ハマったポイント
iret
6
480
サイボウズのQAエンジニア育成
cybozuinsideout
PRO
3
560
【OpenAI本出版記念】npakaによるOpenAI最新技術情報と技術情報キャッチアップ術
npaka
8
1.5k
実録_マルチテナント環境でのGmailガイドライン対応
ryuichi1208
7
1.5k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
Skaffoldを用いたGKEアプリケーションの CD(Continuous Development)
kojake_300
1
120
5分で理解するWebAssemblyのWebの外の話 PHPはマイコンの夢を見るか?
usuyuki
3
200
スプリント内で試験を完了させるには?アジャイル・スクラム開発に参加したQAエンジニアの悩みと対策
cybozuinsideout
PRO
1
120
10年モノのレガシーPHPアプリケーションを移植しきるまでの泥臭くも長い軌跡 / legacy-php-app-migration
toshimaru
0
710
OpenStack再入門「アーキテクチャ編」
kajinamit
0
250
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
layerx-0-to-1-product-development-in-compound-startups
shnjtk
1
520
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
56
13k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Typedesign – Prime Four
hannesfritz
36
2k
A Tale of Four Properties
chriscoyier
150
22k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Gamification - CAS2011
davidbonilla
76
4.5k
The Invisible Side of Design
smashingmag
293
49k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
RailsConf 2023
tenderlove
0
500
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
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