iOSエンジニアがFlutter を触ってみた2

今回は Scaffold と AppBar について勉強しましょう。

Scaffold と AppBar

Scaffold はアプリの構成の骨組みみたいなもので家みたいなものをイメージしています。 AppBar はiOS でいうところのNavigationBar そのものです。

では基本構成を見ていきます。

main.dart に下のコードをコピペしていきましょう!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Text(
          'Hello World',
          style: TextStyle(fontSize: 32.0),
        ),
      ),
    );
  }
}

これでアプリをビルドできます。

f:id:qed805:20200114231956p:plain
Hello World を表示します

今回はMaterialApp のhome に Scaffold を入れます。

      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Text(
          'Hello World',
          style: TextStyle(fontSize: 32.0),
        ),
      ),

このソースコードを簡略化すると

      home: Scaffold(
        appBar: AppBar(),
        body: Text(),
      ),

となります。

つまり、Scaffoldの中に AppBar と Text が入った構成になっているわけです。

AppBarと Text はそれぞれ

        AppBar(
          title: Text('Hello Flutter'),
        ),
        Text(
          'Hello World',
          style: TextStyle(fontSize: 32.0),
        ),

このような形になっています。

だいぶ見やすくなりましたね。

Scaffold について

Scaffold を整理すると次のようにしてインスタンスを作成します。

Scaffold( appBar: xxx, body: yyy)

では最初に戻りましょう。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Text(
          'Hello World',
          style: TextStyle(fontSize: 32.0),
        ),
      ),
    );
  }
}

今回はこれを暗記します。