初心者用：Fluuterのメモ帳

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

基礎構文

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

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

Widget の簡単な考え方

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

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

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

 以下がコードになるよ。

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

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

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

Scaffold Wiget

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

書き方はこうだよ。

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

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

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

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

 DEBUGタグの外し方

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

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

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

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 brightness, iconTheme, textTheme. [...]

final

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

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

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

画像の貼り付け方

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')),
  )));
}

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

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'),
          ),
        ),
      ),
    ),
  );
}

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

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

Widget Tree で考えると。。。？

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

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

考えやすくなったかな？

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

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

ホイ！

ね！簡単でしょ？

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

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

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

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タグをイメージして！

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