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
190
Flutterレイアウト入門
jalemy
November 28, 2019
Tweet
Share
More Decks by jalemy
See All by jalemy
AWS LightsailでHTTPS対応WordPress構築 & ShifterでサーバーレスWordPress
jalemy
0
250
モダンGASプログラミング
jalemy
1
1k
Other Decks in Programming
See All in Programming
Ruby製社内ツールのGo移行
bgpat
2
260
incrementalモデルの理解を深める
ikkimiyazaki
2
640
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Understanding Ast By Looking
inouehi
0
120
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.5k
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
htmx is fun!
codehex
2
190
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Agile that works and the tools we love
rasmusluckow
323
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Thoughts on Productivity
jonyablonski
57
3.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
How STYLIGHT went responsive
nonsquared
92
4.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Teambox: Starting and Learning
jrom
126
8.4k
Building Applications with DynamoDB
mza
88
5.6k
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つのコードで書ける のは強い