플로팅 액션 버튼

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 5번째.

많은 앱에는 오른쪽 아래 모서리에 떠 있는 둥근 버튼이 하나 있습니다. 새 메시지, 새 메모, 새 사진 버튼이 그 예입니다. 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'),
        ),
      ),
    );
  }
}