使用Web视图链接创建Flutter底部导航栏

Question

I want to create a bottom navigation bar that it I want each item to display different web view.

My webview package is webview_flutter.dart

This is my main file

import 'package:flutter/material.dart';
import 'home_widget.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      home:  Home(),
    );
  }
}

This is my home_widget file

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

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  @override
  int _currentIndex = 0;
  final List<Widget> _children = [
    PlaceholderWidget(Colors.white),
    PlaceholderWidget(Colors.deepOrange),
    PlaceholderWidget(Colors.green)
  ];

  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex], // new
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          BottomNavigationBarItem(
              icon: new Icon(Icons.shopping_cart),
              title: new Text(
                'جدیدترین محصولات',
                style: TextStyle(
                  fontFamily: 'iransans',
                ),
              )),
          BottomNavigationBarItem(
              icon: new Icon(Icons.format_list_bulleted),
              title: new Text(
                'دسته بندی محصولات',
                style: TextStyle(
                  fontFamily: 'iransans',
                ),
              )),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: new Text(
                'حساب کاربری',
                style: TextStyle(
                  fontFamily: 'iransans',
                ),
              ))
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

and this is my placeholder_widget file

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

class PlaceholderWidget extends StatelessWidget {
  final Color color;

  PlaceholderWidget(this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
    );
  }
}

Now I want load different webview url in each tap. This code is currently changing the background color but I would like to be able to display a specific webpage at any time. If you want to know how my webview_flutter works, use this code

import 'package:webview_flutter/webview_flutter.dart';

  return Scaffold(
  appBar: AppBar(
    title: const Text('Flutter WebView example'),
  ),
  body: const WebView(
    initialUrl: 'https://flutter.io',
    javascriptMode: JavascriptMode.unrestricted,
  ),
);

Answer 1

You should put your webview in placeholder and use variable for url.

class PlaceholderWidget  extends StatelessWidget {
var url;

PlaceholderWidget(this.url);

@override
Widget build(BuildContext context) {
return Container(
        child: WebView(
          initialUrl: url,
          javascriptMode: JavascriptMode.unrestricted,
        ),
  );
 }
}