Pływający przycisk akcji

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 5 z 34.

Wiele aplikacji ma jeden okrągły przycisk, który unosi się w prawym dolnym rogu: nowa wiadomość, nowa notatka, nowe zdjęcie. Flutter nazywa go FloatingActionButton.

Nie umieszcza się go w body. Scaffold ma dla niego własne miejsce, obok appBar: i body::

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

Scaffold umieszcza go w rogu i utrzymuje nad wszystkimi pozostałymi elementami na ekranie. Jego child: to zazwyczaj Icon.

Wyzwanie

Łatwy

Dodaj do Scaffold pływający przycisk akcji z Icons.add, który po naciśnięciu wypisuje New note.

Spróbuj swoich sił

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