I want to show a minimize moveable calling screen in top of the app

I tried with stack it does not meet my expectation

CodePudding user response：

@Raiyan, you have to use picture-in-picture concept to implement such floating child.

In flutter, multiple plugins are there, that we can use for the, some are as follows:

• 

  Sadly the gif is not working... But by on taping and draging on the green window will make the green window move.

  Try this:

  import 'dart:math';
  
  import 'package:flutter/material.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    const MyHomePage({super.key, required this.title});
  
    final String title;
  
    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }
  
  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;
  
    void _incrementCounter() {
      setState(() {
        _counter  ;
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return OverlayWindow(
        overlayChild: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              "Overlay Window",
              style: TextStyle(fontSize: 20),
            ),
            Icon(
              Icons.android,
              size: 80,
            ),
          ],
        ),
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ),
      );
    }
  }
  
  class OverlayWindow extends StatefulWidget {
    const OverlayWindow(
        {Key? key, required this.overlayChild, required this.child})
        : super(key: key);
  
    final Widget overlayChild;
    final Widget child;
  
    @override
    State<OverlayWindow> createState() => _OverlayWindowState();
  }
  
  class _OverlayWindowState extends State<OverlayWindow> {
    double _top = 0;
    double _left = 0;
  
    @override
    Widget build(BuildContext context) {
      return Stack(
        children: [
          widget.child,
          Positioned(
            top: _top,
            left: _left,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  _top = max(0, _top   details.delta.dy);
                  _left = max(0, _left   details.delta.dx);
                });
              },
              child: Container(
                height: 300,
                width: 200,
                color: Colors.green,
                child: widget.overlayChild,
              ),
            ),
          )
        ],
      );
    }
  }
  

  More about things like that, you can find here:

  https://docs.flutter.dev/development/ui/advanced/gestures