for a job project i need to transform a website into an application using WebView
I'm stuck at the display part i don't know how the controller works (a missunderstanding from me). i'm under webview_flutter: ^4.7.0 and sdk>=2.19.0 < 3.0.0
Maybe you will find a solution (of course you will i'm new to Flutter and Dart, only 5hours)
Thanks for helping me
Here is the web_view_container.dart file
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; // Import the package
class WebViewContainer extends StatelessWidget {
final String initialUrl;
const WebViewContainer({required this.initialUrl, super.key});
@override
Widget build(BuildContext context) {
return WebViewWidget(
initialUrl: initialUrl,
javascriptMode: JavascriptMode.unrestricted,
);
}
}
Here is my main.dart file
import 'package:flutter/material.dart';
import 'package:vertbaudet_webview/web_view_container.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
'/': (context) => const WebViewExample(),
'/webViewContainer': (context) => const WebViewContainer(initialUrl: 'https://www.vertbaudet.fr/',),
},
),
);
class WebViewExample extends StatefulWidget {
const WebViewExample({super.key});
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
int selectedIndex = 0;
final List<String> webViewList = [
"https://google.com",
"https://yahoo.com",
"https://baidu.com"
];
late WebViewController? controller;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "Accueil",
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: "Exemple",
),
],
currentIndex: selectedIndex,
selectedItemColor: Colors.cyan,
onTap: (i) {
setState(() {
selectedIndex = i;
});
controller?.loadRequest(webViewList[i] as Uri);
},
),
appBar: AppBar(
backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
toolbarHeight: 5,
elevation: 0,
),
body: WebViewContainer(initialUrl: webViewList[selectedIndex]),
);
}
}
I except to have a navbar with 4 elements and when you click on an icon, the URL change to the expected one
Here is a simple solution.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
'/': (context) => const WebViewExample(),
},
),
);
class WebViewExample extends StatefulWidget {
const WebViewExample({super.key});
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
int selectedIndex = 0;
final List<String> webViewList = ["https://google.com", "https://yahoo.com", "https://baidu.com"];
late WebViewController controller;
@override
void initState() {
super.initState();
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse(webViewList[selectedIndex]));
}
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "Accueil",
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: "Exemple",
),
],
currentIndex: selectedIndex,
selectedItemColor: Colors.cyan,
onTap: (i) {
setState(() {
selectedIndex = i;
});
controller.loadRequest(Uri.parse(webViewList[i]));
},
),
appBar: AppBar(
backgroundColor: const Color.fromRGBO(255, 255, 255, 01),
toolbarHeight: 5,
elevation: 0,
),
body: WebViewContainer(
controller: controller,
),
);
}
}
class WebViewContainer extends StatelessWidget {
final WebViewController controller;
const WebViewContainer({super.key, required this.controller});
@override
Widget build(BuildContext context) {
return WebViewWidget(
controller: controller,
);
}
}