Present below nothing

[lslv1243]

Present below nothing

[HasanAlyazidi]

@lslv1243 Thanks. it would be great if you could share some examples of how to use the new RawPIPView and if it does the same as my fork, i will delete my fork happily.

[lslv1243]

Hi, unfortunately it is not possible with the current implementation.
It would be necessary to rewrite a bit of the lib to allow any screen to become the pip without affecting the navigator.

[HasanAlyazidi]

I have managed to do it using your package with some modifications + Overlay.

I will submit a PR to enable/disable the bottom view now.

Edit: the version I used is not null sound, so a PR is somehow useless.

[abusaadp]

@HasanAlyazidi Can you please share your implementation? I am also looking for something like this. I want the floating page to be below the last opened page instead of creating a new widget. If you can share your implementation it will be great.

[HasanAlyazidi]

@abusaadp Check out my fork
https://github.com/HasanAlyazidi/pip_view

[abusaadp]

But it is presented below an empty screen. I want to present it below the previous screen so as to minimize the screen I want to be in pip. Is it possible?

[HasanAlyazidi]

This is what i ended up doing

in main.dart

...
            return MaterialApp(
              title: 'App',
              home: LayoutBuilder(
                builder: (layoutContext, constraints) {
                  WidgetsBinding.instance?.addPostFrameCallback((_) {
                    if (alreadyAddedOverlays) {
                      return;
                    }

                    Overlay.of(context)?.insert(
                      OverlayEntry(builder: (context) => YourWidget()),
                    );

                    alreadyAddedOverlays = true;
                  });

                  return HomeScreen();
                },
              ),
              theme: ThemeData(

...

YourWidget:

class YourWidget extends StatelessWidget {
  const YourWidget({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PIPView(
      initialCorner: PIPViewCorner.bottomLeft,
      builder: (context, isFloating) {
        return YourMinimizableAndMaximizableWidget();
      },
    );
  }
}

• Make sure you only insert the overlay once hence using alreadyAddedOverlays variable

[abusaadp]

I am not able to get what you are trying to implement. Further explanation will be highly appreciated. I want the floating widget to be below my previous screen.

[HasanAlyazidi]

You need to insert the floating widget you want as an overlay as explained in my previous comment

it's better to create an issue in my fork and send the codes of your main.dart and floating widget, so i can understand and help if i could.

[abusaadp]

I am not able to create an issue in your fork. I don’t know why.

[HasanAlyazidi]

You may send them here

[abusaadp]

My main.dart code is below

import 'package:flutter/material.dart';
import 'package:pip_view/pip_view.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  bool alreadyAddedOverlays = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
              title: 'App',
              home: LayoutBuilder(
                builder: (layoutContext, constraints) {
                  WidgetsBinding.instance?.addPostFrameCallback((_) {
                    if (alreadyAddedOverlays) {
                      return;
                    }

                    Overlay.of(context)?.insert(
                      OverlayEntry(builder: (context) => HomeScreen()),
                    );

                    alreadyAddedOverlays = true;
                  });

                  return FirstScreen();
                },
              ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text('This is the first page!'),
              Text('If you tap on the floating screen, it stops floating.'),
              Text('Navigation works as expected.'),
              MaterialButton(
                color: Theme.of(context).primaryColor,
                child: Text('Push to floating screen'),
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => HomeScreen(),
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PIPView(
      builder: (context, isFloating) {
        return Scaffold(
          resizeToAvoidBottomInset: !isFloating,
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Text('This page will float!'),
                  MaterialButton(
                    color: Theme.of(context).primaryColor,
                    child: Text('Start floating!'),
                    onPressed: () {
                      PIPView.of(context)?.present();
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

When the app starts I want to show the FirstScreen and then navigate to HomeScreen. Now when we want to float the HomeScreen it should be shown below the FirstScreen. I don't want to create the FirstScreen again, it should be shown below the previous FirstScreen. Right now it is shown below a blank screen. I want the floating screen to be shown below the previous screen.

Thank You

[abusaadp]

Any update?

[abusaadp]

Any help will be highly appreciated.

[HasanAlyazidi]

If you can send a demo project, that would be helpful.

Happy Eid

[abusaadp]

Happy Eid.
Where do you want me to send the demo project?
The main.dart file code I pasted above is used in my demo project. That is the only dart file in that project. I had replaced your main.dart with my file in the example project of your repository i.e https://github.com/HasanAlyazidi/pip_view

Thank you

[abusaadp]

You can check the example project from my repository https://github.com/abusaadp/pip_view
The example projects contains the main.dart with the changes suggested by you.

Thank You.

[HasanAlyazidi]

I will have a look. Thank you.

[HasanAlyazidi]

Here you go

• you need to use Flutter 2 with null-safety

firstly, import my fork of pip_view in your pubspec.yaml

  pip_view:
    git: https://github.com/HasanAlyazidi/pip_view

Secondly, create a state manager for the floating screen, i created a static class here, but i recommend using provider package

class FloatingManager {
  static final ValueNotifier<bool> _isFloatingShown = ValueNotifier(false);

  static bool get isShown => _isFloatingShown.value;

  static void showFull() {
    _isFloatingShown.value = true;
  }

  static void minimize(BuildContext context) {
    PIPView.of(context)?.present();
  }

  static void close() {
    _isFloatingShown.value = false;
  }

  static void listen(VoidCallback callback) {
    _isFloatingShown.addListener(callback);
  }
}

here is the main.dart file

import 'package:flutter/material.dart';
import 'package:pip_view/pip_view.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool alreadyAddedOverlays = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: LayoutBuilder(
        builder: (layoutContext, constraints) {
          WidgetsBinding.instance?.addPostFrameCallback((_) {
            if (alreadyAddedOverlays) {
              return;
            }

            // use LayoutBuilder's context (LayoutBuilder)
            Overlay.of(layoutContext)?.insert(
              OverlayEntry(builder: (context) => const HomeScreen()),
            );

            alreadyAddedOverlays = true;
          });

          return const FirstScreen();
        },
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              const Text('This is the first page!'),
              const Text(
                  'If you tap on the floating screen, it stops floating.'),
              const Text('Navigation works as expected.'),
              MaterialButton(
                color: Theme.of(context).primaryColor,
                child: const Text('Push to floating screen'),
                onPressed: () {
                  FloatingManager.showFull();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    FloatingManager.listen(() {
      setState(() {
        // do something ..
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // hide floating screen when it is not shown
    if (!FloatingManager.isShown) {
      return const SizedBox.shrink();
    }

    return PIPView(
      builder: (context, isFloating) {
        return SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const Text('This page will float!'),
                MaterialButton(
                  color: Theme.of(context).primaryColor,
                  child: const Text('Start floating!'),
                  onPressed: () {
                    FloatingManager.minimize(context);
                  },
                ),
                MaterialButton(
                  color: Colors.red,
                  child: const Text('End floating!'),
                  onPressed: () {
                    FloatingManager.close();
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class FloatingManager {
  static final ValueNotifier<bool> _isFloatingShown = ValueNotifier(false);

  static bool get isShown => _isFloatingShown.value;

  static void showFull() {
    _isFloatingShown.value = true;
  }

  static void minimize(BuildContext context) {
    PIPView.of(context)?.present();
  }

  static void close() {
    _isFloatingShown.value = false;
  }

  static void listen(VoidCallback callback) {
    _isFloatingShown.addListener(callback);
  }
}

[abusaadp]

Let me try it and get back to you. Thank you very much.

[abusaadp]

Thank you very much. It is working like a charm.

JazakAllah Khair.

[HasanAlyazidi]

Great. You are welcome.
Wa jazak Allahu Khair

[lslv1243]

Hello, @HasanAlyazidi.
I know it has been a while since you requested the feature, but the new release may achieve what you are looking for. You can use the new more declarative api called RawPIPView, which allows doing all kinds of cool stuff.

[lslv1243]

Sorry about that, but I just tested it and it is not working as I expected 😅. When I have free time again, I will fix it and publish a new update.

[lizhuoyuan]

it would be great if you could share some examples of how to use the new RawPIPView

[lizhuoyuan]

@HasanAlyazidi thanks, your code helped me

[HasanAlyazidi]

@lizhuoyuan You are welcome.