Expandable Floating Action 버튼 구현

이혁진 블로그·2023년 5월 5일

fab flutter

Flutter

목록 보기

1/2

이번 프로잭트를 진행하면서 Expandable Floating Action 버튼의 이야기가 종종 나왔다.

그래서 공부할 겸 일단 구현해보고자 한다.

패키지 이용 (flutter_expandable_fab 1.7.1)

일단 패키지를 이용하여 쉽게 구현해보자
일단 위에 이미지처럼 버튼을 누르면 리스트 형식처럼 촤라락 나오게 하고 싶었다.

그래서 일단 flutter_expandable_fab 패키지의 페이지 설명을 보는데...

아 일단 이 페키지를 적용하면 floatingActionButton 하위 메소드로 Expandablefab 를 사용할 수 있나 보다 그리고 그 EXPFAB 의 하위 버튼을 children 으로 사용하나 보당

근데 못 보던게 있다

loaction?

location ? 일단 ExpFab 하위 메소드가 아니라 Fab의 메소드이니 flutter 공식 페이지에서 찾아보기로 했다.

https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

아 위페이지에서 찾아보니 위치를 조정하는 건가 보다
근디 parameter 값으로 ExpandableFab.loaction 인데 이건 어디서 조정하는 거디?

함 찾아보자

흠 공식문서에도 안나온다
그럼 일단 내 생각에는 FAB의 위치를 조정하는 거니 내가 커스터마이즈 가능하고 내가 조정할 수 있는 것 같다.

그럼 다시 넘어가고

Open/Close programmatically?

또 이상한게 나와따 ..
Open/Close programmatically ? 진짜 처음 들어본다.

열기...닫기? 일단 혹시 ExpFAB 를 누르면 열기 닫기를 의미하는 건가 ? 싶었다.

중간 정리

일단 페키지 소개 문서를 읽고 의아한게 많았다. 직관적으로 이해하려면 그냥 andriod 스튜디오에서 실행해봐야 알 것만 같았다.

일단 실행해보기

아 일단 첫번째 처음 말이 맞는 거 가따
이 부분

import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';

Scaffold(
  floatingActionButtonLocation: ExpandableFab.location,
  floatingActionButton: ExpandableFab(
    children: [
      FloatingActionButton.small(
        heroTag: null,
        child: const Icon(Icons.edit),
        onPressed: () {},
      ),
      FloatingActionButton.small(
        heroTag: null,
        child: const Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
),

그럼 두번째 Open/Close programmatically 이 부분은?

음 일단 추가해보자....
음?

final _key = GlobalKey<ExpandableFabState>();
//error !

Scaffold(
  floatingActionButtonLocation: ExpandableFab.location,
  floatingActionButton: ExpandableFab(
    key: _key,
    children: [
      FloatingActionButton.small(
        child: const Icon(Icons.edit),
        onPressed: () {
          final state = _key.currentState;
          if (state != null) {
            debugPrint('isOpen:${state.isOpen}');
            state.toggle();
          }
        },
      ),
    ],
  ),
),

추가하려 하니 key 부분에서 syntex 에러가 자꾸 뜬다
근데 key 가 머지? 그리고 왜 private 로 선언햇찌? 알아보자

출처: https://nsinc.tistory.com/214

일단 key 를 알아보니 widget 의 type 과 별개로 widget 을 구분하는 값이라고 생각하면 될 것 같다. 그리고 이 key 값은 해당위젯을 build 하는 최상위 위젯에 넣으면 된단다.
나중에 key 도 정리해야겠따

일단 stateless 에서는 계속 오류가 걸리니 stateful 로 번경하여 _key 를 등록하고 해줬다.

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  final _key = GlobalKey<ExpandableFabState>();

  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(

      floatingActionButtonLocation: ExpandableFab.location,
      floatingActionButton: ExpandableFab(
        key: _key,
        children: [
          FloatingActionButton.small(
            child: const Icon(Icons.edit),
            onPressed: () {
              final state = _key.currentState;
              if (state != null) {
                debugPrint('isOpen:${state.isOpen}');
                state.toggle();
              }
            },
          ),
        ],
      ),
    ),

    );
  }
}

오 잘되는 듯?
근데 또 이상한 부분이 있다


      floatingActionButtonLocation: ExpandableFab.location,
      floatingActionButton: ExpandableFab(
        key: _key,
        children: [
          FloatingActionButton.small(
            child: const Icon(Icons.edit),
            onPressed: () {
              final state = _key.currentState;
              if (state != null) {
                debugPrint('isOpen:${state.isOpen}');
                state.toggle();
              }
            },
          ),
        ],
      ),

이 부분은 머디? 함 눌러보까?

오 보니까

 onPressed: () {
              final state = _key.currentState;
              if (state != null) {
                debugPrint('isOpen:${state.isOpen}');
                state.toggle();

_key.currentState , state.isopen 을 보니 key 는 현재 상태도 저장 할 수 있나보다
그리고 state.toggle() 을 보니 열려있는 것을 닫게 할 수 있고 닫힌 것을 열게 할 수 있나보다...

중간 정리

정리해보면flutter_expandable_fab 1.7.1 는 floatingActionButton 의 Exp FAB 메소드를 간단히 추가할 수 있고
EXP Fab 의 리스트 버튼을 추가하여 EXP FAB 를 구현하는 것 같다.
그럼 우린 이걸 어떻게 잘 사용할 수 있을까?
즉 내가 원하는 알흠다운 리스트형식의 FAB 는 어떻게 만들 수 있징???