Call a webview as child Container in multi screen App in Flutter

Question

I have Multi screen app contains a bottom navigation bar, i need a page as webview as child container. App is working fine but Webview is not loading by Container I know we need to replace the Container by WebViewWidget but how will the other app page work?

See below code for Dashboard Screen

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:webview_flutter/webview_flutter.dart';

class DashboardScreen extends StatefulWidget {
  @override
  DashboardScreenState createState() => DashboardScreenState();
}

class DashboardScreenState extends State<DashboardScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      getValues();
      _selectedIndex = index;
    });
  }

  late final WebViewController controller;
  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('httpa://my-domain.com'),
      );
  }
  // @override
  // Widget build(BuildContext context) {
  //   return Stack(
  //     children: [
  //       WebViewWidget(
  //         controller: controller,
  //       )
  //     ],
  //   );
  // }

  late var pages = [
    new DashboardHomeFragment(controller: controller),
    new AccountFragment(),
    new PortfolioFragment(),
    new ProfileFragment(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      //    backgroundColor: const Color(0xff101324),
      appBar: AppBar(
        automaticallyImplyLeading: false,
        // backgroundColor: Color(0xFFB4C56C).withOpacity(0.0),
        backgroundColor: const Color(0xff00022e),
        elevation: 4,
        title: Image.asset(
          'assets/images/logo-horizontal.png',
          height: 40,
          width: 150,
        ),
        centerTitle: true,
      ),
      body: Container(child: pages[_selectedIndex]),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Currency',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_balance_wallet),
            label: 'Account',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.work),
            label: 'Portfolio',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'MyProfile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: const Color(0xff3ACCE1),
        unselectedItemColor: Colors.white,
        showUnselectedLabels: true,
        backgroundColor: const Color(0xff2c2f40),
        type: BottomNavigationBarType.fixed,
        onTap: _onItemTapped,
      ),
    );
  }
}

See below code for Webview Screen

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

class DashboardHomeFragment extends StatefulWidget {
  const DashboardHomeFragment({required this.controller, super.key});

  final WebViewController controller;
  @override
  State<DashboardHomeFragment> createState() => DashboardHomeFragmentState();
}

class DashboardHomeFragmentState extends State<DashboardHomeFragment> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff0a0b37),
      body: Builder(builder: (BuildContext context) {
        widget.controller
          ..setNavigationDelegate(
            NavigationDelegate(
              onPageStarted: (url) {
                print('Page started loading: $url');
              },
              onPageFinished: (url) {
                print('Page finished loading: $url');
              },
              onNavigationRequest: (navigation) {
                final host = Uri.parse(navigation.url).host;
                if (host.contains('youtube.com')) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        'Blocking navigation to $host',
                      ),
                    ),
                  );
                  return NavigationDecision.prevent;
                }
                return NavigationDecision.navigate;
              },
            ),
          )
          ..setJavaScriptMode(JavaScriptMode.unrestricted);

        return Text("data finding!");
      }),
    );
  }
}

Advance Thankyou.

score 0 · Answer 1 · answered Jul 09 '23 at 02:33

I found the alternative solution by just trying to load the webview in same screen instead of calling another screen.

Step 1. remove the other page of the webview from List

late var pages = [
    new DashboardHomeFragment(controller: controller), // this One 
    new AccountFragment(),
    new PortfolioFragment(),
    new ProfileFragment(),
  ];

by below

late var pages = [
    new WebViewWidget(controller: controller), // Modify
    new AccountFragment(),
    new PortfolioFragment(),
    new ProfileFragment(),
  ];

Step 2. Add setNavigationDelegate and setJavaScriptMode from other screen to this screen.

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('my-domain.com'),
      ); // Add setnavigateDelegate and Javascript
  }

with this

@override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('my-domain.com'),
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (url) {
            print('Page started loading: $url');
          },
          onPageFinished: (url) {
            print('Page finished loading: $url');
          },
          onNavigationRequest: (navigation) {
            final host = Uri.parse(navigation.url).host;
            if (host.contains('youtube.com')) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    'Blocking navigation to $host',
                  ),
                ),
              );
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..setJavaScriptMode(JavaScriptMode.unrestricted);
  }

But your answers will most welcomed if you can solve this by calling the Another screen.

Call a webview as child Container in multi screen App in Flutter

1 Answers1