[Flutter] FloatingActionButton에 SpeedDial(선택 버튼) 적용하기

안녕하세요.

 

오늘은 FloatingActionButton 구현 시, 선택버튼을 추가로 사용자에게 제시하는 방법에 대해 알아보도록 하겠습니다.

 

제가 원하는 기능은 FAB를 클릭할 경우 드롭업(?) 형식의 선택 버튼을 출력하여 사용자에게 추가적인 선택권을 제공하는 것이었는데요 !!

키워드 검색을 통해 적절한 API를 찾아내지 못하여(검색센스가 없어서 그런지 실제 레퍼런스가 없는 것인지는 모르겠지만요...) 여러번 찾아보고 가장 유사한 형태의 SpeedDial이라는 API를 소개하고자 합니다.

 

우선 영상을 통해 적용화면을 확인해보시죠 !

 

SpeedDial 적용화면

어떤가요?? 여러분들이 찾으시던 UI가 맞나요??

아니라면 여러분들은 조금 더 검색을 해보셔야할 것 같습니다...

 

자!! 그렇다면 이제 적용방법에 대해 알아보도록 하겠습니다.

우선 dependency를 추가하기 위해 pubspec.yaml 파일을 다음 설정을 추가해줍니다.

flutter_speed_dial: ^6.2.0

 

그런 뒤 Flutter Scaffold(화면 구성 Widget)의 속성인 floatingActionButton을 다음과 같이 작성해줍시다.

import 'package:flutter_speed_dial/flutter_speed_dial.dart';
...

Scaffold(
        body: ...,
        floatingActionButton: SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22.0),
          children: [
            SpeedDialChild(
              child: Icon(Icons.add_circle_outline),
              label: '경조사 추가',
              onTap: () async => ...,
            ),
            SpeedDialChild(
              child: Icon(Icons.add_reaction_outlined),
              label: '경조사 일괄 추가',
              onTap: () async => ...,
            ),
            SpeedDialChild(
              child: Icon(Icons.download),
              label: '일괄추가 템플릿 다운로드',
              onTap: () async => ...,
            ),
          ],
        ));

이런식으로 구현해주시면, 제가 작성한 화면대로 위젯을 구현하실 수 있습니다.

 

각 SpeedDialChild의 onTap 메소드는 각 버튼을 클릭할 경우 실행할 콜백메소드를 정의하시면 됩니다.

 

오늘 소개해드릴 위젯은 여기까지이구요!! 다음에도 유익한 게시물을 소개해드리도록 하겠습니다.

 

감사합니다.