flutter 抖动背景浮动窗口功能

vnjpjtjt  于 2023-03-13  发布在  Flutter
关注(0)|答案(4)|浏览(232)

有没有办法像IMO那样用Flutter创建一个背景浮动窗口?

背景浮动窗口:这是一个可以用手指拖动的窗口,它不仅限于我的应用程序。用户可以让我的应用程序窗口显示在不同的应用程序太。一些应用程序使用它包括TrueCaller,IMO等。

这是截图,男孩窗口可以拖动,当你点击主页按钮,应用程序将得到最小化,但这个男孩窗口仍将在主页启动器,如果用户导航到其他一些应用程序,这个窗口仍将存在。

屏幕截图示例

scyqe7ek

scyqe7ek1#

下面的代码给出了你想要的结果

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Unit Converter',
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Stack(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    color: Colors.red
                  ),
                ),
                Container(
                  margin: EdgeInsets.all(20),
                  width: 150,
                  height: 200,
                  decoration: BoxDecoration(
                    color: Colors.blue
                  )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

vdgimpew

vdgimpew2#

你想要的东西的最小值:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: App(),
      ),
    );
  }
}

class App extends StatefulWidget {
  @override
  AppState createState() => AppState();
}

class AppState extends State<App> {
  Color caughtColor = Colors.grey;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(color: Colors.red),
        ),
        DragBox(Offset(0.0, 0.0), 'Box One', Colors.blueAccent),
        DragBox(Offset(200.0, 0.0), 'Box Two', Colors.orange),
        DragBox(Offset(300.0, 0.0), 'Box Three', Colors.lightGreen),
      ],
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemColor;

  DragBox(this.initPos, this.label, this.itemColor);

  @override
  DragBoxState createState() => DragBoxState();
}

class DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
        left: position.dx,
        top: position.dy,
        child: Draggable(
          data: widget.itemColor,
          child: Container(
            width: 100.0,
            height: 100.0,
            color: widget.itemColor,
            child: Center(
              child: Text(
                widget.label,
                style: TextStyle(
                  color: Colors.white,
                  decoration: TextDecoration.none,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
          onDraggableCanceled: (velocity, offset) {
            setState(() {
              position = offset;
            });
          },
          feedback: Container(
            width: 120.0,
            height: 120.0,
            color: widget.itemColor.withOpacity(0.5),
            child: Center(
              child: Text(
                widget.label,
                style: TextStyle(
                  color: Colors.white,
                  decoration: TextDecoration.none,
                  fontSize: 18.0,
                ),
              ),
            ),
          ),
        ));
  }
}

ia2d9nvy

ia2d9nvy3#

这个问题已经存在了很长一段时间,但如果仍然有开发人员在追求同样的事情,我发现这两个插件似乎是这样做:
1.可拖动窗口
1.将在其他应用程序上可见,即使您自己的应用程序处于后台
1.“后台”应用程序仍然可以与“浮动窗口”通信
https://pub.dev/packages/flutter_overlay_windowhttps://pub.dev/packages/flutter_floatwing

相关问题