Setting a Window Drag Point in Flutter

Question

My Flutter application makes use of the relatively new Windows build tools and the community fluent_ui package.

In an attempt to make my application look more native, I have opted to remove the default Windows title bar using the window_manager package and implement my own. However, this introduces the issue of not being able to move the window by dragging the top of it.

Is there a way to make a widget a window drag point to allow for this?

Midlothian

Can you include your code-snippet that you've tried so far? – Munford

@YeasinSheikh Sorry to disappoint, but there are none. I can't find any good documentation on this and I'm unsure how to implement it. The closest I can find is the Draggable widget, which isn't what I'm looking for. – Midlothian

Answer 1

I recently found a solution by making DraggableAppBar. I'm also using window_manager package to add window control buttons to appbar.

Solution: use DraggableAppBar instead of AppBar in scaffold.

import 'package:flutter/material.dart';
import 'package:universal_platform/universal_platform.dart';
import 'package:window_manager/window_manager.dart';

class DraggebleAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final Brightness brightness;
  final Color backgroundColor;

  const DraggebleAppBar({
    super.key,
    required this.title,
    required this.brightness,
    required this.backgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        getAppBarTitle(title),
        Align(
          alignment: AlignmentDirectional.centerEnd,
          child: SizedBox(
            height: kToolbarHeight,
            width: 200,
            child: WindowCaption(
              backgroundColor: backgroundColor,
              brightness: brightness,
            ),
          ),
        )
      ],
    );
  }

  Widget getAppBarTitle(String title) {
    if (UniversalPlatform.isWeb) {
      return Align(
        alignment: AlignmentDirectional.center,
        child: Text(title),
      );
    } else {
      return DragToMoveArea(
        child: SizedBox(
          height: kToolbarHeight,
          child: Align(
            alignment: AlignmentDirectional.center,
            child: Text(title),
          ),
        ),
      );
    }
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

Sulphonamide

There is a question. The widget click event delayed if wraped in a DragToMoveArea. how to do? – Myrnamyrobalan

@Myrnamyrobalan - Can you provide more info for clarity? What are you exactly trying to do, add a click event delay to widget wrapped in DragToMoveArea or are you saying that click event of the widget in DragToMoveArea is delayed as a side effect? – Sulphonamide