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

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

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

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

スポンサーリンク

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プロパティ:トップバーの背景色を指定
appBar

body

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

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

body

backgroundColor

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

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

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;
              },
            );
          },
        ),
      ),
    );
  }
}
タイトルとURLをコピーしました