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
Flutter 入門勉強会
Search
Yuuki Shimizu
June 08, 2019
Programming
1
520
Flutter 入門勉強会
2019.6.8
山梨IT同好会(仮)
https://yamanashi-it.connpass.com/event/133038/
Yuuki Shimizu
June 08, 2019
Tweet
Share
More Decks by Yuuki Shimizu
See All by Yuuki Shimizu
Perlで痩せる
yuukis
1
690
Pythonで遊べるLEDボードの紹介
yuukis
0
70
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
220
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
400
Gemini API を試した話と山梨でオススメのものを語るLT
yuukis
0
81
山梨のIT勉強会コミュニティを盛り上げるためにアレ作ってみた!
yuukis
0
75
FastAPI を活用した オープンデータAPI の作成
yuukis
0
1k
FastAPIで始める やまなし温泉めぐり
yuukis
0
460
Slack の困りごとを何とかしてみた①
yuukis
0
90
Other Decks in Programming
See All in Programming
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
5つのアンチパターンから学ぶLT設計
narihara
1
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Select API from Kotlin Coroutine
jmatsu
1
190
CursorはMCPを使った方が良いぞ
taigakono
1
180
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
340
技術同人誌をMCP Serverにしてみた
74th
1
360
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Music & Morning Musume
bryan
46
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Gamification - CAS2011
davidbonilla
81
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Ace a Technical Interview
jacobian
277
23k
Producing Creativity
orderedlist
PRO
346
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Transcript
1 入門 勉強会 2019. 6. 8 山梨IT同好会(仮)
自己紹介 しみず ゆうき • モバイルアプリ エンジニア ◦ Android (2010年〜)、iOS (2013年〜)
• 甲府生まれ 甲府育ち ※ 現在は東京に出稼ぎ中(3年目) 2
【本日のテーマ】 Flutter を体験 しよう 3
本日の勉強会の進め方 演習の時間をたっぷり用意します。 あせらずゆっくり進めましょう。 隣同士で議論し、作業内容を確認し合いながら 進めましょう。 4
本日の流れ • 概要の説明 • デモ • ワークショップ 5
Flutter 概要 6
Flutter ってナニ??
モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない...
モバイルアプリ開発の悩み... • Android と iOS を両対応させたいが、 開発のマンパワーが足りない... ↓ クロスプラットフォーム開発フレームワーク はどうよ?
クロスプラットフォーム開発 1ソースで 複数 のプラットフォームのアプリケーションを 開発!
クロスプラットフォーム開発フレームワーク
クロスプラットフォーム開発フレームワーク(他) • ゲーム系 ◦ Unity ◦ Cocos2d-x • WebView ベース
◦ Apache Cordova ◦ Titanium Mobile • 他にも色々
万能ではない!!!! • 動作が重いこともあるし... • バイナリサイズが大きくなっちゃうし... • OSが提供する全ての機能にアクセスできるわけでも無いし... • デザインもツールに縛られる場合があるし...
Flutter はどうなの? 14
Flutter • Google が提供 • Android/iOS アプリのための SDK (クロスプラットフォーム) •
高い開発効率と実行パフォーマンス ◦ ホット リロードでサクサク開発できる ◦ Dart で書いたコードがマシンコードにコンパイルされる ◦ 1000くらいのウィジェットがある • マテリアルデザインに則った UI パーツを標準提供
16 Windows, macOS, Linux 開発がもうすぐ可能に!
Dart 言語 17
注目されはじめている 18 Study of Programming Languages Not to Learn in
2019 https://www.codementor.io/blog /worst-languages-2019-6mvbfg3 w9x
Dart • Java や JavaScript に似たシンタックス ◦ オブジェクト指向型言語 • 静的型付けにも対応。型推論も出来る
• JavaScript やマシンコードにコンパイルできる 19
組み込み型 ① int, double ② String ③ Boolean 20 ④
List ⑤ Set ⑥ Map
int meaningOfLife = 42; double valueOfPi = 3.141592; bool visible
= true; String shakespeareQuote = "All the world's a stage, ..."; List superheroes = [ 'Batman', 'Superman', 'Harry Potter' ]; Set villains = new Set(); villains.add('Joker'); villains.addAll( ['Lex Luther', 'Voldemort'] ); Map sidekicks = { 'Batman': 'Robin', 'Superman': 'Lois Lane', 'Harry Potter': 'Ron and Hermione' }; 21
22 クラス class Animal { String name; int power; //
コンストラクタ Animal(this.name, this.power); }
23 クラス class Tiger extends Animal { int height; Tiger(this.height,
String name, int power) : super(name, power); }
24 非同期処理 (async/await) import 'dart:async'; void main() async { var
result = await futureTest(); print(result); } Future <String> futureTest(){ return new Future.delayed(new Duration(seconds: 10), (){ return new DateTime.now().toString(); }); }
Flutter 25
サンプルアプリを読み解く 26 Scaffold アプリ全体の構成を決定 AppBar タイトルバーに表示する内容 Centor 中心に表示 Text 文字の表示
FloatingActionButton ボタンの表示 Centor Scaffold AppBar Text Widget の入れ子で Flutter は構成される
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget
{ @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 27
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++; }); } ... 28
class _MyHomePageState extends State<MyHomePage> { ... @override Widget build(BuildContext context)
{ return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 29
Stateless? Stateful? 30 • StatelessWidget ◦ build メソッドを持ち、Widget もしくはテキストを返す ◦
State(状態) の概念がないため、動的に変化しない Widget • StatefulWidget ◦ Widget に State の概念を入れて拡張したもの ◦ createState メソッドを持ち、State クラスを返す State クラスで build メソッドを持ち、Widget を返す ◦ 画面更新タイミングで setState を呼ぶ 状態が動的に変化するかしないか
デモ 31
山梨県のイベントカレンダーを作ってみます 32 1. プロジェクトの作成 2. Hello World 3. ダミーで ListView
に表示 4. connpass API からデータ取得 5. 取得結果を非同期処理で表示 6. タップで connpass に遷移
Flutter でアプリ開発してみよう
開発に必要なもの • Flutter SDK • IDE・エディタ ◦ Android Studio ◦
IntelliJ IDEA ◦ Visual Studio Code • エミュレータ ◦ Xcode の iOS シミュレータ ◦ Android エミュレータ
Flutter SDK インストール方法 • Flutter SDK をダウンロード • zip を展開し
PATH を通す • flutter doctor コマンドを実行
まとめ 36
Flutter とは何か • Flutter はモバイルアプリ開発フレームワーク ◦ 今後 Web、デスクトップ向けも作成できる • Dart
は Java っぽい JavaScript ◦ Java を扱ったことがあれば、楽に習得できそう • Widget の入れ子でアプリを構成していく 37