2020.01.15 2020.08.03

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

tamappe

Table of Contents

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

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

【目次】

iOSエンジニアがFlutter を触ってみた2
Scaffold と AppBar
- Scaffold について整理する

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

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

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