Load html from assets folder and add query parameters with webview_flutter package - flutter

I want to send query parameters to my HTML in the assets folder with the webview_flutter package.
I added the HTML file to my pubspec.yaml file.
This is my code.
//Dart
import 'dart:convert';
//flutter
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
//plugins
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
HomePageState createState() {
return HomePageState();
}
}
class HomePageState extends State<HomePage> {
WebViewController _controller;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Help')),
body: WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
),
);
}
_loadHtmlFromAssets() async {
String fileText = await rootBundle.loadString('assets/web/index.html');
_controller.loadUrl(Uri.dataFromString(fileText,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
}
I tried to add parameters like this. but it can't load HTML.
_loadHtmlFromAssets() async {
String fileText = await rootBundle
.loadString('assets/web/index.html?url=https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4');
_controller.loadUrl(Uri.dataFromString(fileText,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
I also thoughts about the JavaScript the javascriptChannels it can send data from java script to the dart file. but I have no idea how to send data from dart file to html file with the web view?

Related

WebView on Flutter

When trying to run the below code, we got the error
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(
const MaterialApp(
home: WebViewApp(),
),
);
}
class WebViewApp extends StatefulWidget {
const WebViewApp({super.key});
#override
State<WebViewApp> createState() => _WebViewAppState();
}
class _WebViewAppState extends State<WebViewApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter WebView'),
),
body: const WebView(
initialUrl: 'https://flutter.dev',
),
);
}
}
In import 'package:webview_flutter/webview_flutter.dart';
we got the error:
Target of URI doesn't exist: 'package:webview_flutter/webview_flutter.dart'.
Try creating the file referenced by the URI, or try using a URI for a file that does exist.

How to download files in Flutter WebView?

I am working on Flutter webview apps using Flutter Webview.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child : const WebView(
initialUrl: 'https://google.com',
javascriptMode: JavascriptMode.unrestricted,
),
)
)
);
}
}
I try to use launchURL plugin but that will open predefined url in external browser window.
if (url.contains('.pdf')) {
launchURL(url);
}
What I want is to download the file in-app webview.
There is actually an existing package that you could use. Check the flutter_downloader package:
A plugin for creating and managing download tasks. Supports iOS and
Android.
This plugin is using WorkManager on Android and
NSURLSessionDownloadTask on iOS to run download tasks in background.
Here is an example that you can try:
import 'package:flutter/material.dart';
import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:flutter_downloader_example/home_page.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await FlutterDownloader.initialize(debug: true, ignoreSsl: true);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const _title = 'flutter_downloader demo';
#override
Widget build(BuildContext context) {
final platform = Theme.of(context).platform;
return MaterialApp(
title: _title,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: MyHomePage(
title: _title,
platform: platform,
),
);
}
}

Flutter / webview_flutter too big to fit screen

I am running flutter 1.17.1, using webview_flutter: ^0.3.21
dependencies added to pubspec.yaml and added this to the end of info.plist
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
Problem: Webpage loaded into webview is too big to fit mobile phone screen.
screenshot
Here is the code with the webview:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
final url;
WebViewContainer(this.url);
#override
createState() => _WebViewContainerState(this.url);
}
class _WebViewContainerState extends State<WebViewContainer> {
var _url;
final _key = UniqueKey();
_WebViewContainerState(this._url);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Expanded(
child: WebView(
key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url))
],
));
}
}
Link to the full app:
https://github.com/bi-samson/mreader
I've tried a minimal repro with the url "https://www.businessinsider.jp/" and the latest version of webview_flutter, this is the output:
Minimal repro:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: WebView(
initialUrl: "https://www.businessinsider.jp/",
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
javascriptMode: JavascriptMode.unrestricted,
),
);
}
}
It seems that the issue doesn't occur in the latest version.
Use InAppWebView instead of WebView.
This will add a line like this to your package's pubspec.yaml:
dependencies:
flutter_inappwebview: ^5.3.2
Here is a code example:
return InAppWebView(
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
useHybridComposition: true,
textZoom: 100 * 2 // it makes 2 times bigger
)
),
onWebViewCreated: (InAppWebViewController controller) {
webViewController = controller;
controller.loadData(data: widget.html, mimeType: "text/html");
},
);
If you want to make it smaller, you just need to divide it as below:
textZoom: 100 / 2 // it makes 2 times smaller

Is there any Problem in my Flutter (dart) code ? 'Local html is not showing in UI'

I am Using this library (https://github.com/pedromassango/flutter_delivery) for drawer.
and i want to show Local html content in the home (Container) Widget,and i have followed this Webview Tutorial (http://www.coderzheaven.com/2019/05/25/load-local-html-file-into-webview-in-flutter-call-js-function-from-flutter/)
But nothing Worked for me !
Thanks in Advance !
http://www.coderzheaven.com/2019/05/25/load-local-html-file-into-webview-in-flutter-call-js-function-from-flutter/
main.dart
import 'dart:convert';
import 'package:delivery/circular_image.dart';
import 'package:delivery/menu_page.dart';
import 'package:flutter/material.dart';
import 'package:delivery/zoom_scaffold.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(new MyApp());
String filePath = '/assests/files/abc1.html';
WebViewController _webViewController;
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Zoom Menu',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
MenuController menuController;
#override
void initState() {
super.initState();
menuController = new MenuController(
vsync: this,
)..addListener(() => setState(() {}));
}
#override
void dispose() {
menuController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
builder: (context) => menuController,
child: ZoomScaffold(
menuScreen: MenuScreen(),
contentScreen: Layout(
contentBuilder: (cc) => Container(
color: Colors.grey[600],
child: WebView(
initialUrl: filePath,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
_loadHtmlFromAssets();
},
),
)),
),
);
}
_loadHtmlFromAssets() async {
String fileHtmlContents = await rootBundle.loadString(filePath);
_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
}
pubspec.taml
name: delivery
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.0.0-dev.68.0 <3.0.0"
dependencies:
webview_flutter: ^0.3.14+1
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
provider: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
# The following section is specific to Flutter.
flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assests/files/
- assests/files/abc1.html
# I want to show the local html file content but showing nothing !
# but works with widget like Text color,etc
Step 1 change /assets/files/abc1.html to assets/files/abc1.html , remove the frist /
Step 2 initialUrl: ''
full code
import 'dart:convert';
import 'package:delivery/circular_image.dart';
import 'package:delivery/menu_page.dart';
import 'package:flutter/material.dart';
import 'package:delivery/zoom_scaffold.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(new MyApp());
String filePath = 'assets/sample.html';
WebViewController _webViewController;
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Zoom Menu',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
MenuController menuController;
#override
void initState() {
super.initState();
menuController = new MenuController(
vsync: this,
)..addListener(() => setState(() {}));
}
#override
void dispose() {
menuController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
builder: (context) => menuController,
child: ZoomScaffold(
menuScreen: MenuScreen(),
contentScreen: Layout(
contentBuilder: (cc) => Container(
color: Colors.grey[600],
child: WebView(
initialUrl: '',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_webViewController = webViewController;
_loadHtmlFromAssets();
},
),
)),
),
);
}
_loadHtmlFromAssets() async {
String fileHtmlContents = await rootBundle.loadString(filePath);
_webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
}
working demo
I think you have given your asset path wrong.
Change your asset path from
String filePath = '/assests/files/abc1.html';
To
String filePath = '/assets/files/abc1.html';

WebView can not load two different urls in flutter?

I print the url message at the first line in build method. And here, the url is right, but the webView has no effect.
I use the webview_flutter lib, and the version is 0.3.13;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(WebPage());
class WebPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _WebPageState();
}
}
class _WebPageState extends State<WebPage> {
String url = "https://flutter.dev/";
void _changeUrl() {
setState(() {
this.url = "https://github.com/flutter/flutter";
});
}
#override
Widget build(BuildContext context) {
print("url:" + url);
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text("WebPage"),
),
body: WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
),
floatingActionButton: FloatingActionButton(
onPressed: _changeUrl,
child: Icon(Icons.replay),
),
));
}
}
I excepted the webView load the second url, but it not.
you need to use web-view controller class methods like this
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(WebPage());
class WebPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _WebPageState();
}
}
class _WebPageState extends State<WebPage> {
WebViewController controller;
var url = "https://flutter.dev/";
changeUrl() {
setState(() {
url = "https://github.com/flutter/flutter";
controller.loadUrl(url);
});
}
#override
Widget build(BuildContext context) {
print("url:" + url);
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text("WebPage"),
),
body: WebView(
// key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: url,
onWebViewCreated: (WebViewController webViewController) {
controller = webViewController;
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
changeUrl();
},
child: Icon(Icons.replay),
),
));
}
}
more methods to controller could be found here flutter web-view class methods