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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
jalemy
November 28, 2019
Programming
0
260
Flutterレイアウト入門
jalemy
November 28, 2019
Tweet
Share
More Decks by jalemy
See All by jalemy
AWS LightsailでHTTPS対応WordPress構築 & ShifterでサーバーレスWordPress
jalemy
0
410
モダンGASプログラミング
jalemy
1
1.3k
Other Decks in Programming
See All in Programming
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
440
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
Data-Centric Kaggle
isax1015
2
770
Apache Iceberg V3 and migration to V3
tomtanaka
0
160
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
690
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
260
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
「ブロックテーマでは再現できない」は本当か?
inc2734
0
970
Patterns of Patterns
denyspoltorak
0
1.4k
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
400
Featured
See All Featured
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
220
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
710
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
HDC tutorial
michielstock
1
380
Build your cross-platform service in a week with App Engine
jlugia
234
18k
The agentic SEO stack - context over prompts
schlessera
0
630
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
Code Review Best Practice
trishagee
74
20k
We Are The Robots
honzajavorek
0
160
Navigating Team Friction
lara
192
16k
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つのコードで書ける のは強い