Flutter 스피드 다이얼 구현

 

단일 버튼에서 다양한 동작이나 선택 사항을 제공해주는 Speed Dial은 Flutter에서 일반적으로 잘 알려진 FAB(Floatin Action Button) 중 하나이다. 버튼을 탭하면 빠르게 확장되어 더 작은 버튼이나 동작 목록을 발견하여 사용자가 관련 작업을 수행할 수 있도록 한다.

 

오늘은 flutter_speed_dial 패키지를 소개하는 블로그를 읽고 정리해 보기로 한다.

 

시작하기

Flutter의 Speed ​​Dial은 단일 플로팅 액션 버튼에서 다양한 액션을 처리할 때 사용하기 좋은 방법이다. 아래의 데모를 통해 Flutter에서 Speed ​​Dial을 사용하는 방법과 Flutter 애플리케이션에서 flutter_speed_dial 패키지를 사용하여 Speed ​​Dial이 작동하는 방식을 알아보자.

 

 

구현하기

1. main.dart 파일에서 SpeedDialDemo()라는 새 클래스를 만든다. Center 위젯 내부에 높이와 너비가 있는 이미지를 추가하고 텍스트를 추가한다.

Center(
    child: Column(
  children: [
    Image.asset(
      "assets/logo.png",
      height: MediaQuery.of(context).size.height * 0.45,
      width: MediaQuery.of(context).size.width * 0.7,
    ),
    const Text(
      'PLease tap the FAB button',
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
    ),
  ],
)),

 

 

2. floatingActionButton을 추가한다. 이 버튼에 SpeedDial() 함수를 추가합니다. 이 함수 내부에 animatedIcon, backgroundColor, foregroundColor, overlayColor, overlayOpacity 등을 추가합니다.

floatingActionButton: SpeedDial(
  animatedIcon: AnimatedIcons.menu_close,
  backgroundColor: Colors.teal.shade100,
  foregroundColor: Colors.black,
  overlayColor: Colors.white,
  overlayOpacity: 0.5,
  spacing: 12.0,
  spaceBetweenChildren: 9.0,
  direction: SpeedDialDirection.up,
  children: [
    SpeedDialChild(
      child: const Icon(Icons.message),
      label: 'Chat',
      onTap: () => print('Chat'),
    ),
    SpeedDialChild(
      child: const Icon(Icons.call),
      label: 'Call',
      onTap: () => print('Call'),
    ),
    SpeedDialChild(
      child: const Icon(Icons.camera_alt),
      label: 'Camera',
      onTap: () => print('Camera'),
    ),
  ],
),

 

children에는 SpeedDialChild() 함수 3개를 추가한다. 이 함수에서 자식 위젯과 onTap()동작을 구현한다.

 

애플리케이션을 실행하면 아래와 같다.

 

 

전체 코드

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';
import 'package:flutter_speed_dial_demo/splash_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

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

  @override
  State<SpeedDialDemo> createState() => _SpeedDialDemoState();
}

class _SpeedDialDemoState extends State<SpeedDialDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        centerTitle: true,
        title: const Text('Flutter Speed Dial Demo'),
        backgroundColor: Colors.teal.shade100,
      ),
      body: Center(
          child: Column(
        children: [
          Image.asset(
            "assets/logo.png",
            height: MediaQuery.of(context).size.height * 0.45,
            width: MediaQuery.of(context).size.width * 0.7,
          ),
          const Text(
            'PLease tap the FAB button',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
          ),
        ],
      )),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        backgroundColor: Colors.teal.shade100,
        foregroundColor: Colors.black,
        overlayColor: Colors.white,
        overlayOpacity: 0.5,
        spacing: 12.0,
        spaceBetweenChildren: 9.0,
        direction: SpeedDialDirection.up,
        children: [
          SpeedDialChild(
            child: const Icon(Icons.message),
            label: 'Chat',
            onTap: () => print('Chat'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.call),
            label: 'Call',
            onTap: () => print('Call'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.camera_alt),
            label: 'Camera',
            onTap: () => print('Camera'),
          ),
        ],
      ),
    );
  }
}

 

마치며

간단하게 Flutter에서 Speed DIal을 구현해보았다. 위 코드는 아주 간단한 유저 인터랙션이며 추가 코드를 작성함으로 더욱 보완될 수 있다. UI/UX로 사용자의 편의성을 더욱 요구하는 요즘, 이 패키지는 꽤나 유용하게 사용될 것이라 생각한다.

 

 

아래 링크의 포스팅을 참고하여 정리한 내용입니다. 원문을 확인하고 싶으시면 아래 링크를 확인해주세요.

출처 - https://flutterexperts.com/explore-speed-dial-in-flutter/