Dart

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

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:w300

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

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

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。