【Flutter】Scaffoldの基本的な使い方

この記事がおすすめな人

Flutterアプリ開発初心者
英語のFlutterドキュメントを読むのが難しい
Scaffold Widgetの基本的な使い方が知りたい

Scaffold Widgetを使えば、Flutterアプリの基盤となるレイアウトを指定できます。

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

Scaffoldの基本となるプロパティ

Scaffoldの基本となるプロパティ

appBar：トップバーを設置
body：コンテンツとなるWidgetを指定
backgroundColor：背景色を指定
floatingActionButton：FloatingActionButtonがタップされた時コールバック関数を実行

appBar

Scaffold(
  appBar: AppBar(
    title: Text('Flutter入門アカデミー'),
    backgroundColor: Colors.orange,
  ),
),

appBarプロパティを使えばトップバー設置できます。また、appBarの引数にはAppBarを使用します。今回はAppBarの最も基本となる「title」と「backgroundColor」を紹介します。

titleプロパティ：トップバーのタイトルを指定
backgroundColorプロパティ：トップバーの背景色を指定

body

Scaffold(
  appBar: AppBar(
    title: Text('Flutter入門アカデミー'),
    backgroundColor: Colors.orange,
  ),
  body: Center(
    child: Text(
      'Hello World',
      style: TextStyle(
      fontSize: 40,
      ),
    ),
  ),
),

bodyプロパティで、コンテンツとなるWidgetを指定します。

backgroundColor

Scaffold(
  appBar: AppBar(
    title: Text('Flutter入門アカデミー'),
  ),
  backgroundColor: Colors.yellow,
),

backgroundColorプロパティで、コンテンツの背景色を指定します。

floatingActionButton

floatingActionButtonプロパティはScaffoldのコンテンツ上に浮いているボタンです。また、FloatingActionButtonを代入します。ユーザーによってボタンがタップされた時、onPressedプロパティで定義したコールバック関数を実行します。

>>【Flutter/Dart】コールバック関数と無名関数の使い方

//動画で使用しているコード
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter App'),
        ),
        body: Center(
          child: Text(
            '$number',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(
              () {
                number += 1;
              },
            );
          },
        ),
      ),
    );
  }
}