悬浮操作按钮

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 5 课，共 34 课。

很多应用的右下角都有一个悬浮的圆形按钮：新建消息、新建便笺、新建照片。Flutter 把它称为 FloatingActionButton。

它不放在 body 里。Scaffold 有专门的位置放它，和 appBar:、body: 并列：

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

Scaffold 会把它放在角落，并让它显示在屏幕上所有其他内容的上方。它的 child: 通常是一个 Icon。

挑战

简单

为 Scaffold 添加一个带有 Icons.add 的悬浮操作按钮，按下时打印 New note。

亲手试试

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