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
710
Pythonで遊べるLEDボードの紹介
yuukis
0
72
今話題のMCPサーバーをFastAPIでサッと作ってみた
yuukis
0
240
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
410
Gemini API を試した話と山梨でオススメのものを語るLT
yuukis
0
81
山梨のIT勉強会コミュニティを盛り上げるためにアレ作ってみた!
yuukis
0
76
FastAPI を活用した オープンデータAPI の作成
yuukis
0
1k
FastAPIで始める やまなし温泉めぐり
yuukis
0
470
Slack の困りごとを何とかしてみた①
yuukis
0
90
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
310
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.5k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
17k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
5つのアンチパターンから学ぶLT設計
narihara
1
170
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Porting a visionOS App to Android XR
akkeylab
0
460
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Mobile First: as difficult as doing things right
swwweet
223
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Being A Developer After 40
akosma
90
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Code Review Best Practice
trishagee
69
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bash Introduction
62gerente
613
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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