表示 勉強会 資料 Google Developer Group 京都 DevFest Kyoto 2017

Web ^目線

Flutter

仕組 調べ た

DevFest Kyoto 2017

Hello!

I AM Keiko Inoue

Web ^制作全般(HTML5, CSS3, Javascript)^{やっ す}

WordPress^{構築 カ タマ ン やっ す}

しく 願いし す＾＾

Building Layouts

in Flutter

Flutter ^構築

https://flutter.io/tutorials/layout/

“

○ _UI ^{構築す た 使用さ}

ク す

○ ^要素 _UI ^{要素 両方}

使用さ す

○ ^{単純 作成し 複雑}

作成し す

https://flutter.io/tutorials/layout/#approach

Flutter ^{ほ すべ す}

基本要素 分割

HTML <section> ^や

<div> ^{括 大 ブ}

ク 分割

要素 さ 細 く分割

<section> ^や <div> ^{内 要素 さ}

細 く分割す

右図 そ

状 表示した

種類 把握す

○ ^：

設定す た

●

_Container

●

_Row

●

Column ...etc

表示す っ 最適 選択す

Widgets Catalog

https://flutter.io/widgets/

記法

1. ^{表示 作成}

○ ^キ

new Text('Hello World', style: new TextStyle(fontSize: 32.0))

○ ^メ

new Image.asset('images/myPic.jpg', fit: BoxFit.cover)

○ ^コン

new Icon(Icons.star, color: Colors.red[500])

^※ Flutter Icon class

https://docs.flutter.io/flutter/material/Icons-class.html

記法

2. ^{表示 追加}

new Center(

child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))

記法

3. ^{ペ 追加}

class _MyHomePageState extends State<MyHomePage> { @override

Widget build(BuildContext context) { return new Scaffold(

appBar: new AppBar(

title: new Text(widget.title), ),

body: new Center(

child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)), ),

); } }

HTML / CSS Flutter / Dart ^{コ 対応付け}

HTML/CSS Analogs in Flutter

https://flutter.io/web-analogs/

HTML CSS Flutter / Dart ^{コ す う 書}

け 良い 解説さ い す

CREDITS

Special thanks to all the people who made and released these awesome resources for free:

○ Presentation template by SlidesCarnival

○ Photographs by Unsplash

PRESENTATION DESIGN

This presentations uses the following typographies and colors:

○ Titles: Montserrat

○ Body copy: Open Sans

You can download the fonts on this page:

https://www.google.com/fonts#UsePlace:use/Collection:Montserrat:400,700|Open+Sans:300italic,400italic,600ital ic,700italic,800italic,400,300,600,700,800

Click on the arrow button that appears on the top right

○ Teal ”background) #45afdc / Teal ”text) #1d98c7

○ Gold ”background) #ed9e46 / Gold ”text) #ffc800

You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®

SlidesCarnival icons are editable shapes. This means that you can:

● Resize them without losing quality.

● Change line color, width and style. Isn’t that nice? :)

Examples:

Now you can use any emoji as an icon!

And of course it resizes without losing quality and you can change the color. How? Follow Google instructions

https://twitter.com/googledocs/status/730087240156643328

✋ ^❤

and many more...