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';
Related
I just started develop a website using docusaurus and I want to run this website within flutter on mobile (android or ios) ,I thought of running the build files (index.html) through flutter webview, but by search i found it diffucult to run docusaurus site without webserver, I have tried way to host a local build of an docusaurus website in flutter webview by use local_assets_server flutter library
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Local Assets Server Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Local Assets Server Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isListening = false;
String? address;
int? port;
WebViewController? controller;
void _incrementCounter() {
controller?.evaluateJavascript('window.increment()');
}
#override
initState() {
_initServer();
super.initState();
}
_initServer() async {
final server = new LocalAssetsServer(
address: InternetAddress.loopbackIPv4,
assetsBasePath: 'web',
logger: DebugLogger(),
);
final address = await server.serve();
setState(() {
this.address = address.address;
port = server.boundPort!;
isListening = true;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: isListening
? WebView(
debuggingEnabled: true,
initialUrl: 'http://$address:$port',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (c) {
controller = c;
},
)
: Center(child: CircularProgressIndicator()),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
but flutter webview give this message
I have a code here for a simple webview. It simply displays a webpage. However, the top part of the webpage is shown stacked below the notification bar(As in some of the buttons on the top part of the page). How can I prevent this?
I know I can hide the notification bar/icons, but I want to show the contents of the webview widgets below the notification bar without hiding it. I also don't want to use an app bar. Kindly help me out
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
late WebViewController controller;
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
)),
debugShowCheckedModeBanner: false,
);
}
}
Just wrap your webviw with SafeArea
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
WebViewController controller;
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
),
)),
debugShowCheckedModeBanner: false,
);
}
}
output:
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?
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
I am making Downloader app which has a Webview where user can browse when there is the video playing he can download by click float button .but the problem is that it has only initial URL I want final URL to send it to my API to download that video.How to get Final Url in webview
import 'dart:html';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main(){
runApp(myapp());
}
class myapp extends StatefulWidget {
#override
_myappState createState() => _myappState();
}
final Completer<WebViewController> _controller = Completer<WebViewController>();
class _myappState extends State<myapp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: new Text('Fb Video Downloader'),
backgroundColor: Colors.blueAccent,
),
body: Column(
children: <Widget>[
new Text(''),
WebView(
initialUrl: "https://example.com",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webcontroller){
_controller.complete(webcontroller);
},
),
],
),
),
);
}
}`
Looking at the documentation for WebViewController it seems like it has a method called currentUrl() that probably will give you the result you're looking for.
currentUrl = await _yourWebController.currentUrl()