[Flutter][Widget] FloatingActionButton 위젯

FloatingActionButton이란?

---

FloatingActionButton은 아래의 그림과 같이 화면 위에 떠 있는 버튼을 말한다.▼

TickTick의 화면

 

 

앱마다 조금씩은 다르겠지만 보통 앱에서 제공하는 기능 중 핵심적인 기능을 접근하기 쉽게 하기 위해 FloatingActionButton 으로 배치하곤 한다.

많은 앱들에서 사용하지만 꼭 필요한 기능은 아니다.

특별히 보여줘야 할 화면이 있는데, 그 화면에서 추가적으로 핵심 기능을 사용할 수 있게 할 때 사용하는 것 같다.

 

 

사용 예시

---

Flutter에서의 사용예시를 예제 코드와 함께 알아보자.

 

FloatingActionButton 그리기

지금은 FloatingActionButton에 애니메이션을 넣는 단계는 아니고 간단하게 화면에 추가하는 방법을 알아보도록 해보자.

가장 먼저 FloatingActionButton 은 아래와 같이 사용할 수 있다.▼

FloatingActionButton(child: Icon(Icons.run_circle), onPressed: (){});

 

Scaffold에 floatingActionButton Property가 있어서 Scaffold에 넣으면 그림과 같이 배치를 해준다.▼

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {},
      ),
    );
  }
}

 

사진과 같이 배치를 해준다.

 

 

하지만 그렇다고 꼭 Scaffold의 floatingActionButton Property에만 배치할 수 있는 것은 아니다.

FloatingActionButton도 결국엔 하나의 위젯이므로 다른 위젯들 처럼 배치할 수 있다.▼

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {},
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {},
      ),
    );
  }
}

 

항상 보던 위치가 아닌 다른 위치에 배치된 floatingActionButton.

 

 

onPressed

한 가지 주의할 점은 child Property는 required가 아니라 꼭 넣을 필요는 없지만, onPressed Property는 required Property라서 필수로 넣어줘야한다.

(사실 아무 기능없는 그냥 동그라미를 띄울거면 이 위젯 말고 Container나 Image를 쓰는게 맞다.)

onPressed Property에는 함수가 들어간다.

하지만 굳이 함수를 선언하지 않고 익명 함수인 람다 함수를 사용해도 된다.

자주 사용되는 함수면 추가적으로 선언해도 되고, 그게 아니라면 람다 함수를 사용하는게 좋아 보인다.

간단하게 onPressed에 콘솔에 프린트하는 함수를 넣어보았다.▼

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {},
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {
          print("버튼이 눌렸습니다.");
        },
      ),
    );
  }
}

 

누르면 색이 바뀐다.

 

 

그러면 버튼을 누를 때 마다 콘솔에 “버튼이 눌렸습니다.” 라는 문구가 나온다. ▼

 

 

코드 전문

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.run_circle),
        onPressed: () {},
      ),
    );
  }
}

 

 

마치며

---

Floating Action Button은 안드로이드에서 주로 사용되던 컴포넌트다.

사용자가 주로 오른손으로 스마트폰을 사용하기에 엄지손가락으로 가장 접근하기 쉬운 위치에 떠 있는 버튼으로 옛날부터 현재까지 꾸준하게 사용되는 버튼이다.

다만 요즘에는 UI/UX 에 대한 연구가 많이 이뤄져서 이런 방식보다 더 좋은 구성법이 나와 예전처럼 사용되지는 않는거 같다.

하지만 다른 대안이 없다면 여전히 좋은 접근성을 자랑한다.