Tombol Aksi Mengambang

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 5 dari 34.

Banyak aplikasi memiliki satu tombol bulat yang mengambang di sudut kanan bawah: pesan baru, catatan baru, foto baru. Flutter menyebutnya FloatingActionButton.

Tombol ini tidak diletakkan di dalam body. Scaffold memiliki tempat tersendiri untuk tombol ini, di sebelah appBar: dan body::

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

Scaffold menempatkan tombol ini di sudut dan menjaganya tetap berada di atas semua elemen lain di layar. child:-nya biasanya berupa Icon.

Tantangan

Mudah

Beri Scaffold tombol aksi mengambang dengan Icons.add yang mencetak New note saat ditekan.

Coba sendiri

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