初心者用:Fluuterのメモ帳

f:id:MasayaStripes:20200309093313j:plain

私が得たFlutterの知見を書いていくよ。宜しくね⭐️

基礎構文

void main() => runApp(MaterialApp());

MaterialAppを指定する事で、外部からMaterial デザインとして使えるようになるよ。

 

Widget の簡単な考え方

以下の図を参考にしたらわかりやすいよ。

階層構造になっているよ。HTMLのタグみたいだね。

Material App Widget の Center Widget を使って、Textを中央に持ってくるよ。

f:id:MasayaStripes:20200305163249p:plain

 以下がコードになるよ。

void main() => runApp(MaterialApp(
home: Center(
child: Text('Hello world'),
),
));

 これも同じ意味のコードだよ。"=>" が "{" に変わってるね。

void main() {
runApp(MaterialApp(
home: Center(
child: Text('Hello world'),
),
));
}

Scaffold Wiget

見た目の基礎となるWidgetだよ。覚えておいてね。

f:id:MasayaStripes:20200306095940p:plain


書き方はこうだよ。

void main() {
runApp(MaterialApp(
home: Scaffold(
  appBar: AppBar(
  title: Text('First My App'),
  ),
   )));
}

ここに出てきている、AppBar()は、バーを付けてくれる関数だよ。

 よりアプリらしくなるね。

f:id:MasayaStripes:20200306101230p:plain

 出力結果はこんな感じ。良い見た目だね。

f:id:MasayaStripes:20200306101339p:plain

 DEBUGタグの外し方

Android Studio 上で、このDEBUGタグを外す方法は、下の画像を見てね。

Android Studio端にある、Flutter Inspector タグを押して、MoreActionを押すと、プルダウンで出てくるよ。

Hide Debug Mode Banner を押すと、消えるよ!

f:id:MasayaStripes:20200306102731p:plain

 

AppBar の色を変更する 

まず、公式ドキュメントを見てみよう!

https://api.flutter.dev/flutter/material/AppBar-class.html

 

この中に、AppBarのPropertiesがあるよね。その中のこれを見てみよう。

backgroundColor → ColorThe color to use for the app bar's material. Typically this should be set along with brightnessiconThemetextTheme[...]

final

これでカラーを変えられるはずだ!そしたらソースコードに戻って、

appBar: AppBar(
title: Text('First My App'),
backgroundColor: Colors.blueGrey[900],<- こうしたら色変えられる!
),

そして、実装するとこうなるよ。

f:id:MasayaStripes:20200306112900p:plain

画像の貼り付け方

Image Widgetを使って、画像を挿入するよ。ソースコードは以下の感じです。

ネットから引っ張ってきた画像を表示してるよ。

あと、基礎画面の部分の色も変えてるよ。(ScafooldのBackGroundColorを変更)

void main() {
runApp(MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: Text('First My App'),
backgroundColor: Colors.blueGrey[900],
),
body:
    // この部分が画像を表示するコード
    Image(
image: NetworkImage(
'https://www.bigstockphoto.com/images/homepage/module-6.jpg')),
)));
}

f:id:MasayaStripes:20200306114939p:plain

画像を中央に持っていきたい 

Center Widget を使って、Image Widgetをラップすれば、中央に持ってこれるよ。

void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: Text('First My App'),
backgroundColor: Colors.blueGrey[900],
),
     // 中央に持ってくる為のコード
body: Center(
child: Image(
image: NetworkImage('https://www.bigstockphoto'
'.com/images/homepage/module-6.jpg'),
),
)
,
),
),
);
}

f:id:MasayaStripes:20200306131726p:plain

また、簡単にCenter指定する方法は、電球マークをクリックすると、こんな感じでプルダウンが出てくるよ。そして、Wrap with Centerにすると、

f:id:MasayaStripes:20200306132032p:plain

f:id:MasayaStripes:20200306132128p:plain

Center指定ができたよ。簡単だね!

Widget Tree で考えると。。。?

FlutterのWidgetの考え方で、Widget Treeがあるよ。

例えば、前のソースコードWidget Treeで考えると、

f:id:MasayaStripes:20200306135344p:plain

 

考えやすくなったかな?

 

StatelessWidgetを簡単に作成する方法(Android Studio

簡単だよ!"stless" と打つだけで、簡単に関数ができるよ。

f:id:MasayaStripes:20200306155828p:plain

ホイ!

f:id:MasayaStripes:20200306155905p:plain

ね!簡単でしょ?

 

Widget Columnの考え方を一目で分かるように解説するよ

これから次の様な画面を作って行くよ。

f:id:MasayaStripes:20200309104307p:plain

ソースコードは次の通りだよ。

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
// 画面横いっぱいに伸ばすよ
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// Container 1
Container(
height: 100.0,
color: Colors.white,
child: Text('Container 1'),
),

//スペース
SizedBox(
height: 20.0,
),

// Container 2
Container(
height: 100,
color: Colors.blue,
child: Text('Container 2'),
),

// Container 3
Container(
height: 100,
color: Colors.red,
child: Text('Container 3'),
),
],
),
),
),
);
}
}

Columnの中に入れ子になって、各Widgetが定義されているね。

// Container 1
Container(
height: 100.0,
color: Colors.white,
child: Text('Container 1'),
),

つまりは、Container の中で色々と作っていくよ。

イメージとしてはHTMLのDivタグをイメージして!

 

 長くなったので、別記事へ行くよ!