A flutter package which will help you to create a draggable widget that can be dragged around the screen.

Overview

License: MIT Version

A flutter package which will help you to create a draggable widget that can be dragged around the screen.

Demo

Features 💚

  • Manually Control the position of the widget along with drags.
  • Automatically resizes itself when the widget changes
  • Highly customizable
  • Supports Flutter web as well

Properties 🔖

/// The widget that will be displayed as dragging widget
  final Widget child;

  /// The horizontal padding around the widget
  final double horizontalSpace;

  /// The vertical padding around the widget
  final double verticalSpace;

  /// Intial location of the widget, default to [AnchoringPosition.bottomRight]
  final AnchoringPosition initialPosition;

  /// Intially should the widget be visible or not, default to [true]
  final bool intialVisibility;

  /// The top bottom pargin to create the bottom boundary for the widget, for example if you have a [BottomNavigationBar],
  /// then you may need to set the bottom boundary so that the draggable button can't get on top of the [BottomNavigationBar]
  final double bottomMargin;

  /// The top bottom pargin to create the top boundary for the widget, for example if you have a [AppBar],
  /// then you may need to set the bottom boundary so that the draggable button can't get on top of the [AppBar]
  final double topMargin;

  /// Status bar's height, default to 24
  final double statusBarHeight;

  /// Shadow's border radius for the draggable widget, default to 10
  final double shadowBorderRadius;

  /// A drag controller to show/hide or move the widget around the screen
  final DragController? dragController;

  /// [BoxShadow] when the widget is not being dragged, default to
  /// ```Dart
  ///const BoxShadow(
  ///     color: Colors.black38,
  ///    offset: Offset(0, 4),
  ///    blurRadius: 2,
  ///  ),
  /// ```

  final BoxShadow normalShadow;

  /// [BoxShadow] when the widget is being dragged
  ///```Dart
  ///const BoxShadow(
  ///     color: Colors.black38,
  ///    offset: Offset(0, 10),
  ///    blurRadius: 10,
  ///  ),
  /// ```
  final BoxShadow draggingShadow;

  /// How much should the [DraggableWidget] be scaled when it is being dragged, default to 1.1
  final double dragAnimationScale;

AnchoringPosition can be among these 4 types

enum AnchoringPosition {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
  center
}

How to use

Stack(
  children:[
    // other widgets...
    DraggableWidget(
      bottomMargin: 80,
      topMargin: 80,
      intialVisibility: true,
      horizontalSpace: 20,
      shadowBorderRadius: 50,
      child: Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
      ),
      initialPosition: AnchoringPosition.bottomLeft,
      dragController: dragController,
    ),
  ],
)

DragController Functionality

/// Jump to any [AnchoringPosition] programatically
void jumpTo(AnchoringPosition anchoringPosition)

/// Get the current screen [Offset?] of the widget
Offset? getCurrentPosition()

/// Makes the widget visible
void showWidget()

/// Hide the widget
void hideWidget()

Run the example app in the exmaple folder to find out more about how to use it.

You might also like...

Chance Dart is a free Open Source project that lets you create random strings, integers, and other things to help with tiresome tasks, especially when building automated tests or wherever else you require anything random.

 Chance Dart is a free Open Source project that lets you create random strings, integers, and other things to help with tiresome tasks, especially when building automated tests or wherever else you require anything random.

Chance Dart Random generator helper for Dart Homepage • Documentation Overview Chance Dart is a free Open Source project that lets you create random s

Dec 27, 2022

A flutter package that helps you create an on-boarding screen for your project within minutes just by providing a few parameters.

A flutter package that helps you create an on-boarding screen for your project within minutes just by providing a few parameters.

A flutter package that helps you create an on-boarding screen for your project within minutes just by providing a few parameters.

Sep 27, 2022

This project is a NGO which let you donate anything or even let you ask for help to people.

ngo_app This app is written in flutter using dart language. Getting Started This project is a NGO which let you donate anything or even let you ask fo

May 8, 2022

This package adds CustomRefreshIndicator widget that allows you to create whatever indicator you want.

This package adds CustomRefreshIndicator widget that allows you to create whatever indicator you want.

Custom Refresh Indicator A flutter package that allows you to easily create a custom refresh indicator widget. TLDR; ONLINE DEMO! QUICK START CustomRe

Dec 16, 2022

A Flutter package that help you create a verification input.

A Flutter package that help you create a verification input.

flutter_verification_code A Flutter package that help you create a verification input. Based on https://github.com/tiny-express/flutter_verification_c

Dec 15, 2022

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Nov 10, 2022

Today we will show you how you can create your developer portfolio website and app using flutter.

Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Dec 30, 2022

Flutter package that provides you custom clippers to help you achieve various custom shapes.

Flutter package that provides you custom clippers to help you achieve various custom shapes.

flutter_custom_clippers Flutter package that provides you custom clippers to help you achieve various custom shapes. Usage To use this plugin, add flu

Dec 23, 2022
Comments
  • Null safety support and other changes

    Null safety support and other changes

    Resolve #6 but also:

    • Fix name of parameter horizontalSpace (instance of horizontalSapce)
    • Remove dummy tests and remove flutter_test unused dependency
    • Change example for use StatelessWidget (StatefullWidget is unnecessary)
    • Remove unnecessary content from the pubspec.yaml
    • Change README.md to follow markdown conventions
    • Change CHANGELOG.md to follow Markdown conventions
    • Improve README.md of the example

    If these changes are not wanted to accept this #7 PR with only support for null safety.

    opened by leynier 3
  • Implemented some new features

    Implemented some new features

    Hello, first of all thanks for this library.

    I've implemented some new features in my own fork, and couldn't make a successful pull request to your repo, so please feel free to implement these features to your own library too.

    1- Implemented "center" position: it is not a snapping location but still usefull in some cases.

    2- Implemented a touch delay feature: It is required when we have a button at the edge of the draggable widget (i.e a video player), because when we click on the button, onPointerUp event triggers and widget moves to the relevant corner in some cases.

    you can check from https://github.com/dreampowder/draggable_widget

    draggable_widget.dat / anchor_docket.dart

    thanks again!.

    opened by dreampowder 2
  • Implemented new features

    Implemented new features

    • Added center anchor location, it is not a snapping location but still useful in some cases.

    • Implemented a touchDelayDuration. Useful for situations like having buttons on the edges of the content widget. (without a delay touching a button might trigger the drag effect)

    opened by dreampowder 0
  • click widget jump position

    click widget jump position

    I facing an issue when first action is not "drag" is "click", the widget will jump to top left position, below is the video

    https://user-images.githubusercontent.com/6957533/140676875-da06e5a9-5ae5-4404-88e9-0c90b0d67a5a.mp4

    opened by callmejm 0
Owner
Adar
Has a very keen interest in Front-end, mobile applications & problem-solving. Currently working with Flutter :) And A Dota freak xD
Adar
A widget that shows an image which can be scaled and dragged using gestures.

[DISCONTINUED] - 24.05.2021 While this widget was useful in the early days of Flutter, the Flutter team introduced an own way to zoom and pan, see Int

EPNW 15 May 3, 2022
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

null 394 Mar 3, 2022
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
Breathe is a mental health blogging app where users can join communities of doctors and other users from around the world and both share their problems as well as lend a ear to and help others

?????????????? ?????????????? In a condensed, suffocating society you can feel closed off, when you can't process your emotions and are going through

Soham Sen 3 May 16, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

CU Apps 4 May 5, 2022
A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Abdelrahman Saed 1 Jun 18, 2020
camilo velandia 69 Dec 30, 2022