【Flutter】Scaffoldの使い方｜アプリのレイアウトを作成

今回は「Scaffold」の基本的な使い方について紹介します。

Scaffoldを使えばFlutterアプリの基盤となるレイアウトが簡単に作れます！

Scaffoldの基本プロパティ

appBar

appBarプロパティではトップバーを設置できます。

//ソース
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
          backgroundColor: Colors.orange,
        ),
      ),
    );
  }

実装できるWidget：AppBar, CupertinoTabBar, ObstructingPreferredSizeWidget, PreferredSize, Tab, TabBar

body

bodyプロパティではScaffoldのコンテンツ（Primary Widget）となるWidgetを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
        ),
        body: const Center(
          child: Text(
            "Hello World",
          ),
        ),
      ),
    );
  }

実装できるWidget：何でもOK

backgroundColor

backgroundColorプロパティで背景色を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter'),
        ),
        backgroundColor: Colors.purple,
      ),
    );
  }

実装できるWidget：Colors, ColorSwatch, CupertinoDynamicColor, MaterialStateColor

floatingActionButton

floatingActionButtonプロパティでScaffoldのbodyプロパティ右下に浮いたボタンを実装できます。

//ソース
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'),
        ),
        body: Center(
          child: Text('$number'),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(
              () {
                number += 1;
              },
            );
          },
        ),
      ),
    );
  }
}

実装できるWidget：FloatingActionButton

備考：FloatingActionButtonは「StatefulWidget」で使用するようにしましょう。

以上です。