Flutter background floating window feature - dart

Question

Is there any way to create a background floating window using Flutter like IMO does.
Background Floating Window: This is a window which can be dragged using fingers and it is not only limited to my app. User can have my app window showing up on different apps too. Some apps that uses it include TrueCaller, IMO, etc.
Here is the screenshot, the boy window can be dragged and when you tap home button, the app will get minimised but this boy window will still be there on the home launcher and if user navigates to some other app, this window will still persist.
Screenshot Example

Answer 1

the below code gives you the result you want
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 2

A minimal E.g of What you Want:
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,
),
),
),
),
));
}
}

Answer 3

A simple way to do this would be a stack.
https://docs.flutter.io/flutter/widgets/Stack-class.html