Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutterレイアウト入門

jalemy
November 28, 2019

 Flutterレイアウト入門

jalemy

November 28, 2019
Tweet

More Decks by jalemy

Other Decks in Programming

Transcript

  1. Flutterとは • Googleが開発しているモバイルアプリケーションフレームワーク 
 • クロスプラットフォーム開発 
 ◦ iOS, Android向けにアプリケーションを作れる

    
 ◦ Webアプリも(https://flutter.dev/web)
 ◦ デスクトップアプリも!( https://github.com/flutter/flutter/wiki/Desktop-shells)
 ◦ 将来的にIoTデバイスなど組み込み環境でも実行できるようになるらしい 
 • 言語はDart

  2. Dart言語 • Googleが開発している 
 プログラミング言語
 • 初出は2011年
 • JavaScriptの問題点を解決すると 


    言われていた
 • しかし、TypeScriptなどの台頭により 
 一時断念……
 Flutterのfizzbuzz

  3. Scaffold • Scaffoldは “足場” という意味 
 • Material Componentの1つ 


    ◦ (https://api.flutter.dev/flutter/material/Scaffold-class.html)
 • Scaffoldの上にWidgetを重ねることでレイアウトを作るのが基本 

  4. Scaffold • appBar
 ◦ 画面上部にあるタイトルバー 
 • body
 ◦ 文字通りbodyとなる部分

    
 ◦ ここにコンテンツを配置する 
 • bottomNavigationBar 
 ◦ 画面下部にあるナビゲーションバー 
 ◦ 各画面への遷移用ボタンを配置したりする 
 • floatingActionButton 
 ◦ 独立したボタン
 ◦ 頻繁に利用する操作のショートカットにしたりする 
 • 他にもプロパティいろいろ…… 

  5. Platform class • dart.io パッケージに Platform class が実装されている (https://api.dartlang.org/stable/2.6.1/dart-io/Platform-class.html)
 •

    このclassを利用すれば端末のPlatform判定が可能 
 
 
 • プロジェクトごとにラップした処理を作って 
 共通化できれば良さそうだが…… 
 まだ考え中
 
 
 

  6. Flutter Studio • ブラウザ上でFlutterのレイアウトを組める 
 便利ツール
 • まだMaterialComponentしか対応してない 
 •

    ついでに公式のサービスではない 
 
 
 • レイアウトを組んだ上でソースコードを 
 生成できる
 
 
 
 (https://flutterstudio.app/)