【Flutter】Scaffold|アプリのレイアウトを作成

今回はScaffoldの基本的な使い方を紹介します。

Scaffoldを使えばアプリの基本レイアウトを作成できます。

\ 世界最大級のオンライン学習サービス /

目次

Scaffoldの使い方

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

Scaffoldはアプリの基本レイアウトをつくるのに使用されるので、上記コードのようにMaterialAppとセットで使用されます。

bodyの引数にはアプリのコンポーネントとなるWidgetを渡していきます。

アプリバー(アクションバー)を生成

Scaffold(
  appBar: AppBar(
    title: Text('FlutterZero'),
  ),
  body: Center(
    child: Text(
      'Hello World',
      style: TextStyle(
        fontSize: 30,
      ),
    ),
  ),
),

appBarの引数にAppBarを渡してアプリバーを生成できます。

背景色を変更

Scaffold(
  appBar: AppBar(
    title: Text('FlutterZero'),
  ),
  backgroundColor: Colors.pink[200],
  body: Center(
    child: Text(
      'Hello World',
      style: TextStyle(
        fontSize: 30,
        color: Colors.white,
      ),
    ),
  ),
),

backgroundColorでアプリの背景色を指定できます。

FloatingActionButtonを生成

//全体コードは記事下
floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () => setState(() => _count++),
),

floatingActionButtonの引数にFloatingActionButtonを渡して、Scaffold上に浮いているボタンを設置できます。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterZero'),
        ),
        body: Center(
          child: Text(
            'Count: $_count',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => setState(() => _count++),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次