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

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

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