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
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
10分でわかるfreeeのQA
freee
0
260
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
380
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
260
LLMの現在
pfn
PRO
3
1.3k
GraphQLに入門してみた
chiroruxx
2
130
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
760
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
450
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
920
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.7k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
236
11k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Rails Girls Zürich Keynote
gr2m
91
13k
GraphQLとの向き合い方2022年版
quramy
28
12k
A Tale of Four Properties
chriscoyier
150
22k
Scaling GitHub
holman
456
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
BBQ
matthewcrist
78
8.7k
YesSQL, Process and Tooling at Scale
rocio
160
13k
Building an army of robots
kneath
300
41k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
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