1

This may be a relatively simple question, but I'm new to Flutter, and I need to implement this today.

I have a Flutter app that looks like this...

enter image description here

There's a Flutter BottomNavigationBar and a Flutter Webview_Plugin

All I need help with is for a new url to load when the button Home or Language is pressed. But I'm having trouble entirely figuring out the Flutter paradigm.

My current code, if it helps:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter_webview_plugin_example/home.dart';
import 'package:flutter_webview_plugin_example/settings.dart';

const kAndroidUserAgent =
    'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36';

String selectedUrl = 'http://google.com';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'MyApp',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (_) => const MyHomePage(title: 'MyApp'),
        '/widget': (_) => new WebviewScaffold(
              url: selectedUrl,
              appBar: new AppBar(
                title: const Text('Widget webview'),
              ),
              withZoom: true,
              withLocalStorage: true,
            )
      },
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Instance of WebView plugin
  final flutterWebviewPlugin = new FlutterWebviewPlugin();

  // On destroy stream
  StreamSubscription _onDestroy;

  // On urlChanged stream
  StreamSubscription<String> _onUrlChanged;

  // On urlChanged stream
  StreamSubscription<WebViewStateChanged> _onStateChanged;

  StreamSubscription<WebViewHttpError> _onHttpError;

  StreamSubscription<double> _onScrollYChanged;

  StreamSubscription<double> _onScrollXChanged;

  final _urlCtrl = new TextEditingController(text: selectedUrl);

  final _codeCtrl =
      new TextEditingController(text: 'window.navigator.userAgent');

  final _scaffoldKey = new GlobalKey<ScaffoldState>();

  final _history = [];

  @override
  void initState() {
    super.initState();

    flutterWebviewPlugin.close();

    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

    _urlCtrl.addListener(() {
      selectedUrl = _urlCtrl.text;
    });

    // Add a listener to on destroy WebView, so you can make came actions.
    _onDestroy = flutterWebviewPlugin.onDestroy.listen((_) {
      if (mounted) {
        // Actions like show a info toast.
        _scaffoldKey.currentState.showSnackBar(
            const SnackBar(content: const Text('Webview Destroyed')));
      }
    });

    // Add a listener to on url changed
    _onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          _history.add('onUrlChanged: $url');
        });
      }
    });

    _onScrollYChanged =
        flutterWebviewPlugin.onScrollYChanged.listen((double y) {
      if (mounted) {
        setState(() {
          _history.add("Scroll in Y Direction: $y");
        });
      }
    });

    _onScrollXChanged =
        flutterWebviewPlugin.onScrollXChanged.listen((double x) {
      if (mounted) {
        setState(() {
          _history.add("Scroll in X Direction: $x");
        });
      }
    });

    _onStateChanged =
        flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if (mounted) {
        setState(() {
          _history.add('onStateChanged: ${state.type} ${state.url}');
        });
      }
    });

    _onHttpError =
        flutterWebviewPlugin.onHttpError.listen((WebViewHttpError error) {
      if (mounted) {
        setState(() {
          _history.add('onHttpError: ${error.code} ${error.url}');
        });
      }
    });
  }

  @override
  void dispose() {
    // Every listener should be canceled, the same should be done with this stream.
    _onDestroy.cancel();
    _onUrlChanged.cancel();
    _onStateChanged.cancel();
    _onHttpError.cancel();
    _onScrollXChanged.cancel();
    _onScrollYChanged.cancel();

    flutterWebviewPlugin.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    BottomNavigationBar btm = new BottomNavigationBar(
      items: [
        new BottomNavigationBarItem(
            icon: new Icon(
              Icons.home,
              color: const Color(0xFFFFFFFF),
            ),
            title: new Text(
              "Home",
              style: new TextStyle(
                color: const Color(0xFFFFFFFF),
              ),
            )),
        new BottomNavigationBarItem(
            icon: new Icon(
              Icons.settings,
              color: const Color(0xFFFFFFFF),
            ),
            title: new Text(
              "Language",
              style: new TextStyle(
                color: const Color(0xFFFFFFFF),
              ),
            )),
      ],
//      onTap: changeURL()
    );

    flutterWebviewPlugin.launch(selectedUrl,
    rect: new Rect.fromLTWH(
    0.0, 0.0,
    MediaQuery.of(context).size.width, MediaQuery.of(context).size.height - 55),
    userAgent: kAndroidUserAgent);

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          widget.title,
          style: new TextStyle(color: const Color(0xFFFFFFFF)),
        ),
      ),
      bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
          canvasColor: const Color(0xFF167F67),
        ), // sets the inactive color of the `BottomNavigationBar`
        child: btm
      ),
    );
  }
}

1 Answer 1

1

So it looks like all it takes is something like the onTap below...

@override
Widget build(BuildContext context) {
  BottomNavigationBar btm = new BottomNavigationBar(
    items: [
      new BottomNavigationBarItem(
          icon: new Icon(
            Icons.home,
            color: const Color(0xFFFFFFFF),
          ),
          title: new Text(
            "Home",
            style: new TextStyle(
              color: const Color(0xFFFFFFFF),
            ),
          )),
      new BottomNavigationBarItem(
          icon: new Icon(
            Icons.settings,
            color: const Color(0xFFFFFFFF),
          ),
          title: new Text(
            "Language",
            style: new TextStyle(
              color: const Color(0xFFFFFFFF),
            ),
          )),
    ],
    onTap: (int index) {
      flutterWebviewPlugin.close();
      flutterWebviewPlugin.launch('http://google.com',
          rect: new Rect.fromLTWH(
              0.0, 0.0,
              MediaQuery.of(context).size.width, MediaQuery.of(context).size.height - 55),
          userAgent: kAndroidUserAgent);
    },
  );

Simple in retrospect, but was having trouble getting it just right

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.