フローティングアクションボタン

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 5/34。

多くのアプリには、右下の隅に浮かぶ丸いボタンがあります。新しいメッセージ、新しいメモ、新しい写真などに使います。FlutterではこれをFloatingActionButtonと呼びます。

これはbodyの中には置きません。Scaffoldには、appBar:やbody:の隣に、専用の配置場所があります。

Scaffold(
  body: ...,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.edit),
  ),
)

Scaffoldはこれを隅に配置し、画面上のほかのすべての要素より前面に表示します。通常、そのchild:にはIconを指定します。

チャレンジ

簡単

Scaffoldに、押したときにNew noteを出力するIcons.add付きのフローティングアクションボタンを追加してください。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('No notes yet'),
        ),
      ),
    );
  }
}