Webviews in a Bottom Navigation Bar!

[Alpha]

Hello,

So I ma new to flutter and I am trying to build this app where I am going to have few navigation bar items where every item will open a different website. I implemented the navigation bar and It worked just fine also the web-views they work fine individually. But somehow when I run the app and navigate to the web-views only the one with 0 index open up and then when I click the other ones nothing happens. I am pretty sure I need to add something to the following method but I have no idea what is it!! ANY HELP.

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

[ABADA SAMUEL]

I don't think this code snippet alone is enough to debug what went wrong.

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/5c4fabee-c8b4-4f18-9e2c-75a9aeaef20e%40googlegroups.com.

[Alpha]

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

class MyHomeScreen extends StatefulWidget {
  MyHomeScreen({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomeScreenState createState() => _MyHomeScreenState();
}

class _MyHomeScreenState extends State<MyHomeScreen> {
  static final Completer<WebViewController> _controller =
      Completer<WebViewController>();
  WebViewController newController;

  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  static List<Widget> _widgetOptions = <Widget>[
    Container(
      child: WebView(
          initialUrl: "https://www.twitter.com",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          }),
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        border: Border.all(
          color: Colors.grey,
          width: 8,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    ),
    Container(
      child: WebView(
          initialUrl: "https://www.facebook.com",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          }),
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        border: Border.all(
          color: Colors.grey,
          width: 8,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    ),
    Container(
      child: WebView(
          initialUrl: "https://www.instagram.com",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          }),
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        border: Border.all(
          color: Colors.grey,
          width: 8,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ),
        title: const Text('Outcast'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.search), onPressed: null)
        ],
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Twitter'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            title: Text('Facebook'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.photo),
            title: Text('Instagram'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.grey,
        onTap: _onItemTapped,
      ),
    );
  }
}

On Monday, January 6, 2020 at 11:22:46 PM UTC-6, Abada Samuel wrote:

I don't think this code snippet alone is enough to debug what went wrong.

On Mon, Jan 6, 2020 at 4:23 PM Alpha <farooo...@gmail.com> wrote:

Hello,

So I ma new to flutter and I am trying to build this app where I am going to have few navigation bar items where every item will open a different website. I implemented the navigation bar and It worked just fine also the web-views they work fine individually. But somehow when I run the app and navigate to the web-views only the one with 0 index open up and then when I click the other ones nothing happens. I am pretty sure I need to add something to the following method but I have no idea what is it!! ANY HELP.

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

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

[Andy Greenshaw]

There’s quite a bit wrong there:

1. To Flutter, each Container in your _widgetOptions list looks the same, so setState won’t have any effect here - Flutter doesn’t see anything to update. Add a 'key: GlobalKey()' to each Container is the easiest way to fix that, making each Container unique.
   
2. _controller.complete(webViewController); You can only complete a single Completer once, so fixing 1. will still fail.
   

I think a re-design is required.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/8bdc18e3-b97f-4c0e-8d31-78733bd84f4e%40googlegroups.com.

[ABADA SAMUEL]

I think a redesign is required as Andy stated.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/8bdc18e3-b97f-4c0e-8d31-78733bd84f4e%40googlegroups.com.

[Alpha]

Well the solution you gave me worked fine but when I re-navigate the same tab it does not load again. For example, suppose I am on tab0, then I navigated to tab1, and finally I went back to tab0 but now tab0 zero will not load!

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/8bdc18e3-b97f-4c0e-8d31-78733bd84f4e%40googlegroups.com.

[Andy Greenshaw]

Please show your current code.

 

---

From: flutt...@googlegroups.com on behalf of Alpha <farooo...@gmail.com>
Sent: Thursday, January 9, 2020 3:00 am
To: Flutter Development (flutter-dev)
Subject: Re: Webviews in a Bottom Navigation Bar!

 

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/bf95f155-e5e9-4abc-8bb0-d1c7b0f13a24%40googlegroups.com.