Nút hành động nổi

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 5 trên 34.

Nhiều ứng dụng có một nút tròn nổi ở góc dưới bên phải: tạo tin nhắn, tạo ghi chú mới, chụp ảnh mới. Flutter gọi nút này là FloatingActionButton.

Nút này không nằm trong body. Scaffold có vị trí riêng dành cho nút, bên cạnh appBar: và body::

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

Scaffold đặt nút này ở góc và giữ nó ở phía trên mọi thứ khác trên màn hình. child: của nút thường là một Icon.

Thử thách

Dễ

Thêm cho Scaffold một nút hành động nổi với Icons.add, nút này sẽ in ra New note khi được nhấn.

Tự làm thử

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