Question

有没有办法像IMO一样使用Flutter创建背景浮动窗口。

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

这是屏幕截图，可以拖动男孩窗口，并且在单击“主页”按钮时，该应用将最小化，但是此男孩窗口仍将位于主页启动器上，并且如果用户导航至其他某个应用，则该窗口将仍然坚持。

屏幕截图示例

Answer 1

一个简单的方法就是堆栈。

https://docs.flutter.io/flutter/widgets/Stack-class.html

Answer 2

下面的代码为您提供所需的结果

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
                  )
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

最低限度的例如您想要的东西

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,
                ),
              ),
            ),
          ),
        ));
  }
}

https://www.diawi.com/

颤动的背景浮动窗口功能

屏幕截图示例

3 个答案: