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
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.4k
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
4.8k
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
CSC305 Lecture 06
javiergs
PRO
0
270
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
What's new in Spring Modulith?
olivergierke
1
160
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
250
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
56
6.6k
Statistics for Hackers
jakevdp
799
220k
Context Engineering - Making Every Token Count
addyosmani
7
280
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Music & Morning Musume
bryan
46
6.9k
A better future with KSS
kneath
239
18k
Become a Pro
speakerdeck
PRO
29
5.6k
KATA
mclloyd
PRO
32
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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つのコードで書ける のは強い