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
jalemy
November 28, 2019
Programming
0
250
Flutterレイアウト入門
jalemy
November 28, 2019
Tweet
Share
More Decks by jalemy
See All by jalemy
AWS LightsailでHTTPS対応WordPress構築 & ShifterでサーバーレスWordPress
jalemy
0
400
モダンGASプログラミング
jalemy
1
1.2k
Other Decks in Programming
See All in Programming
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
理論と実務のギャップを超える
eycjur
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
Claude Agent SDK を使ってみよう
hyshu
0
570
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
590
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
390
Featured
See All Featured
Six Lessons from altMBA
skipperchong
29
4k
The Invisible Side of Design
smashingmag
302
51k
How GitHub (no longer) Works
holman
315
140k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Rails Girls Zürich Keynote
gr2m
95
14k
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
Flutterレイアウト入門 ゆるはち.it(2019/11/28) @jalemy
自己紹介 • 佐野友亮(@jalemy) ◦ じゃれみーって呼んでください • Unity/C#→なんやかんや→Laravel+Vue.js(今 •
Flutter良さそうだなと思って勉強中
Flutterとは
Flutterとは • Googleが開発しているモバイルアプリケーションフレームワーク • クロスプラットフォーム開発 ◦ iOS, Android向けにアプリケーションを作れる
◦ Webアプリも(https://flutter.dev/web) ◦ デスクトップアプリも!( https://github.com/flutter/flutter/wiki/Desktop-shells) ◦ 将来的にIoTデバイスなど組み込み環境でも実行できるようになるらしい • 言語はDart
Dart言語 • Googleが開発している プログラミング言語 • 初出は2011年 • JavaScriptの問題点を解決すると
言われていた • しかし、TypeScriptなどの台頭により 一時断念…… Flutterのfizzbuzz
Dart言語 • 2018年にDart2が発表 • 続けてFlutterが発表されることで盛り上がる
ちなみにFlutterの動向は?
Flutterの実績 • https://flutter.dev/showcase • Google Ads • Alibaba
Group • etc……
Instagram っぽいUIをつくる
Widget • FlutterはWidgetと呼ばれるUI部品を組み合わせてレイアウトを作る • 例えば→図だと……
Scaffold • Scaffoldは “足場” という意味 • Material Componentの1つ
◦ (https://api.flutter.dev/flutter/material/Scaffold-class.html) • Scaffoldの上にWidgetを重ねることでレイアウトを作るのが基本
Scaffold
Scaffold
Scaffold • appBar ◦ 画面上部にあるタイトルバー • body ◦ 文字通りbodyとなる部分
◦ ここにコンテンツを配置する • bottomNavigationBar ◦ 画面下部にあるナビゲーションバー ◦ 各画面への遷移用ボタンを配置したりする • floatingActionButton ◦ 独立したボタン ◦ 頻繁に利用する操作のショートカットにしたりする • 他にもプロパティいろいろ……
Row / Column • RowはX方向、ColumnはY方向にWidgetを並べるためのWidget
Material Widgetいろいろ (https://flutter.dev/docs/development/ui/widgets/material)
iOSっぽい見た目を作りたい
Cupertino Widget (https://flutter.dev/docs/development/ui/widgets/cupertino)
Cupertino Widgetサンプル
Cupertino Widget
iOSとAndroid処理を分けるには?
Platform class • dart.io パッケージに Platform class が実装されている (https://api.dartlang.org/stable/2.6.1/dart-io/Platform-class.html) •
このclassを利用すれば端末のPlatform判定が可能 • プロジェクトごとにラップした処理を作って 共通化できれば良さそうだが…… まだ考え中
Flutter Studio • ブラウザ上でFlutterのレイアウトを組める 便利ツール • まだMaterialComponentしか対応してない •
ついでに公式のサービスではない • レイアウトを組んだ上でソースコードを 生成できる (https://flutterstudio.app/)
Flutter Studio
• Dart ◦ JavaScriptとJavaの良いとこ取りした 感じ ◦ Flutterと同時に盛り上がっていきそう
• Flutter ◦ HotReloadめちゃくちゃ便利 ◦ 提供されているWidgetUIならすぐ作 れる ◦ React/Fluxインスパイア 慣れている人ならすぐ書けそう
◦ iOS/Androidが1つのコードで書ける のは強い