[Flutter] Draggable Floating 위젯 예제

Flutter 앱에서 드래그 가능한 떠다니는 위젯을 구현할 필요가 있어 검색을 했더니 
아주 깔끔한 포스팅이 있었다. 

 

Draggable Floating Action Button In Flutter

---

위의 포스팅으로 구현을 해도 되지만, pub.dev에 비슷한 기능을 하는 패키지가 등록되어 있다.

floating_draggable_widget | Flutter Package

설치방법은 다음과 같다. 

 

콘솔에서 
flutter pub add floating_draggable_widget

또는 pubspec.yaml에 직접

dependencies:
  floating_draggable_widget: ^2.0.0

 

이를 이용하면 쉽게 드래그가 가능한 floating widget을 구현할 수 있다. 

사용법은 컨테이너가 될 위젯을 아래와 같이 FloatingDraggableWidget으로 둘러싸고

 

floatingWidget에 floating할 위젯을 구현하면 된다. 그리고 floatingWidgetHeight, floatingWidgetWidth로 크기를 설정하며 

dx, dy로 시작위치를 지정하면 된다. 

 

[예제결과화면]

 

다음은 패키지를 이용한 간단한 예제이다. 

import 'package:flutter/material.dart';
import 'package:floating_draggable_widget/floating_draggable_widget.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return FloatingDraggableWidget(
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'Drag floating widget 예제',
                )
              ],
            ),
          ),
        ),
        floatingWidget: Container(
          decoration:
              BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
          child: Center(
            child: Text("😀",
                style: TextStyle(fontSize: 30), textAlign: TextAlign.center),
          ),
        ),
        floatingWidgetHeight: 70,
        floatingWidgetWidth: 70,
        dx: 100,
        dy: 100);
  }
}