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
700
Pythonで遊べるLEDボードの紹介
yuukis
0
71
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
230
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
410
Gemini API を試した話と山梨でオススメのものを語るLT
yuukis
0
81
山梨のIT勉強会コミュニティを盛り上げるためにアレ作ってみた!
yuukis
0
75
FastAPI を活用した オープンデータAPI の作成
yuukis
0
1k
FastAPIで始める やまなし温泉めぐり
yuukis
0
470
Slack の困りごとを何とかしてみた①
yuukis
0
90
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
5つのアンチパターンから学ぶLT設計
narihara
1
140
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
600
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
GoのGenericsによるslice操作との付き合い方
syumai
3
710
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
390
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
Goで作る、開発・CI環境
sin392
0
190
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
BBQ
matthewcrist
89
9.7k
A better future with KSS
kneath
239
17k
The Language of Interfaces
destraynor
158
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Six Lessons from altMBA
skipperchong
28
3.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Designing Experiences People Love
moore
142
24k
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