Load Multiple Webview in background flutter

Question

It's like link bubble, so my main webview loads a website with multiple links, I'd like to open the links in the background and keep them ready for the user

So for example, if you're visiting google, and click on 10 links, This link bubble will open all the 10 websites in separate webviews for you and keep them ready

I'm able to open multiple links for the user, however, it doesn't preload whenever I click on the button all websites reload instead of staying ready

I am storing websites in an array and accessing them using this code

Widget buildSheet(websites) => Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: websites.length,
              itemBuilder: ((context, index) {
                return Container(
                  margin: const EdgeInsets.all(10),
                  height: 200,
                  child: WebView(
                    initialUrl: "https://www.google.com",
                    gestureRecognizers: Set()
                      ..add(
                        Factory<VerticalDragGestureRecognizer>(
                          () => VerticalDragGestureRecognizer(),
                        ),
                      ),
                  ),
                );
              }),
            ),
          ),
        ],
      ),
    );

I am using A floating action method to trigger this method,

          floatingActionButton: DraggableFab(
            child: ElevatedButton(
              child: Text('WebPage ${websites.length}'),
              onPressed: () => {
                showModalBottomSheet(
                    isScrollControlled: true,
                    isDismissible: true,
                    context: context,
                    builder: (context) => buildSheet(websites)),
              },
            ),
          ),

Is there any way where the websites loads and stays ready when clicking on the modal and not reload?

Answer 1

You can try using an OffStage widget and hide and show once its loaded inside a stack. I created a demo. Please check the codes below

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHome(),
    );
  }
}

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

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  bool hideWebsite = true;

  @override
  void initState() {
    // TODO: implement initState

    super.initState();
  }

  Map<String, String> cookies = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: const [
              //all your other Ui elements here
            ],
          ),
          Offstage(
            offstage: hideWebsite,
            child: GestureDetector(
              onTap: () {
                hideWebsite = true;
                setState(() {});
              },
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Colors.black.withOpacity(0.5),
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            topRight: Radius.circular(10))),
                    height: MediaQuery.of(context).size.height * 0.7,
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: 10,
                      itemBuilder: ((context, index) {
                        return Container(
                          margin: const EdgeInsets.all(10),
                          height: 200,
                          child: WebView(
                            initialUrl: "https://www.google.com",
                            gestureRecognizers: Set()
                              ..add(
                                Factory<VerticalDragGestureRecognizer>(
                                  () => VerticalDragGestureRecognizer(),
                                ),
                              ),
                          ),
                        );
                      }),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
      floatingActionButton: Container(
        child: ElevatedButton(
          child: const Text('WebPage '),
          onPressed: () {
            hideWebsite = !hideWebsite;
            setState(() {});
          },
        ),
      ),
    );
  }
}

For now I have set the website open close toggle on FAB and used a stack instead of bottom sheet but should work as expected.