I use the WebView_plugin in my Flutter project. I can load my own website. But my website updates aren't there. I guess it's a cache issue.
I tried to pass some options like: clearCache, appCacheEnabled but my website updates aren't there.
How I instantiate my webview:
dart
final webView = WebviewScaffold(
url: url,
clearCache: true, // <-- I don't want cache
appCacheEnabled: false, // <-- I don't want cache
initialChild: Container(
color: Colors.white,
child: const Center(
child: const CircularProgressIndicator(),
),
),
withZoom: false,
withLocalStorage: true,
hidden: true,
);
In my pubspec.yaml:
dependencies:
flutter_webview_plugin: ^0.3.5
How do I clear the cache?
try it, frist clearCache: true and after appcacheEnable: false
dart
final webView = WebviewScaffold(
clearCache: true, // <-- first clearCache
appCacheEnabled: false, // <--after it :3
url: url,
initialChild: Container(
color: Colors.white,
child: const Center(
child: const CircularProgressIndicator(),
),
),
withZoom: false,
withLocalStorage: true,
hidden: true,
);
The easiest way is, add a random generated number as parameter in url.
Like this:
class WebView extends StatelessWidget {
final String url;
WebView(this.url);
#override
Widget build(BuildContext context) {
final randNum = Random().nextInt(1000);
return WebviewScaffold(
appBar: AppBar(
title: Text("My Web"),
),
url: "$url?id=$randNum",
hidden: true,
initialChild: CircularProgressIndicator(),
);
}
}
Related
I want to show CircularProgressIndicator when ever the webview loads an URL. Below is code but it only shows loading element while initializing the webview.
Widget build(BuildContext context) {
return new MaterialApp(
theme
: new ThemeData(
primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
routes: {
"/": (_) => new WebviewScaffold(
url: url,
appBar: new AppBar(
title: Text(title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () => Navigator.of(context).pop(null),
)
],
),
withJavascript: true,
withLocalStorage: true,
appCacheEnabled: true,
hidden: true,
)
},
);
}
I want it to show loading element when user clicks on any link within webview.
its should work for first time, I know that is not exactly what's your looking for but it may help.
WebviewScaffold(
url: "https://www.google.com/",
appBar: new AppBar(
title: const Text('Widget webview'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
child: const Center(
child: CircularProgressIndicator(),
),
),
);
This doesn't seem to be supported currently.
There is a pull request that seems to provide such a feature
https://github.com/fluttercommunity/flutter_webview_plugin/pull/255
Several related issues/feature requests
https://github.com/fluttercommunity/flutter_webview_plugin/issues/177
https://github.com/fluttercommunity/flutter_webview_plugin/issues/284
https://github.com/fluttercommunity/flutter_webview_plugin/issues/232
https://github.com/fluttercommunity/flutter_webview_plugin/issues/159
This is how I implemented using IndexedStack
class WebViewWidget extends StatefulWidget {
#override
_WebViewWidgetState createState() => _WebViewWidgetState();
}
class _WebViewWidgetState extends State<WebViewWidget> {
var stackToShow = 1;
#override
Widget build(BuildContext context) {
return IndexedStack(
index: stackToShow,
children: [
WebView(
initialUrl: "https://www.google.com/",
onPageFinished: (String url) {
// when page loaded
setState(() {
stackToShow = 0;
});
},
),
Container(child: Center(child: CircularProgressIndicator())),
],
);
}
}
Enjoy coding!
This will work with WebviewScaffold
Just paste it in your Class.
#override
void initState() {
super.initState();
_onPageProgress =
flutterWebViewPlugin.onProgressChanged.listen(progessChange);
}
progessChange(double event) {
print("Page loading " + event.toString());
if (event == 1.0) {
flutterWebViewPlugin.show();
} else {
flutterWebViewPlugin.hide();
}
}
final flutterWebViewPlugin = FlutterWebviewPlugin();
late StreamSubscription<double> _onPageProgress;
Widget build(BuildContext context) {
return WebviewScaffold(
initialChild: Container(
color: Colors.white,
child: Center(
child: CircularProgressIndicator(
color: Colors.blue,
)),
),
hidden: true,
clearCache: true,
withJavascript: true,
url: "https://www.google.com/",
);
}
I'm using the webview_fluttter plugin, but I can't find a way to show a CircularProgressIndicator before the webview shows the page...
What's the equivalent of Androids WebViewClient onPageStarted/onPageFinished?
WebView(
initialUrl: url,
onWebViewCreated: (controller) {
},
)
In version 0.3.5 there is 'onPageFinished' callback. You can create WebView container with IndexedStack.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class _WebViewContainerState extends State < WebViewContainer > {
var _url;
final _key = UniqueKey();
_WebViewContainerState(this._url);
num _stackToView = 1;
void _handleLoad(String value) {
setState(() {
_stackToView = 0;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: IndexedStack(
index: _stackToView,
children: [
Column(
children: < Widget > [
Expanded(
child: WebView(
key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url,
onPageFinished: _handleLoad,
)
),
],
),
Container(
color: Colors.white,
child: Center(
child: CircularProgressIndicator(),
),
),
],
)
);
}
}
class WebViewContainer extends StatefulWidget {
final url;
WebViewContainer(this.url);
#override
createState() => _WebViewContainerState(this.url);
}
This is working properly for me
initState() {
isLoading = true;
};
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("Your Title",centerTitle: true
),
body: Stack(
children: <Widget>[
new WebView(
initialUrl: /* YourUrl*/,
onPageFinished: (_) {
setState(() {
isLoading = false;
});
},
),
isLoading ? Center( child: CircularProgressIndicator()) : Container(),
],
),
);
}
class _WebViewContainerState extends State<WebViewContainer> {
var _url;
final _key = UniqueKey();
bool _isLoadingPage;
Completer<WebViewController> _controller = Completer<WebViewController>();
_WebViewContainerState(this._url);
#override
void initState() {
super.initState();
_isLoadingPage = true;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
new WebView(
key: _key,
initialUrl: _url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (webViewCreate) {
_controller.complete(webViewCreate);
},
onPageFinished: (finish) {
setState(() {
_isLoadingPage = false;
});
},
),
_isLoadingPage
? Container(
alignment: FractionalOffset.center,
child: CircularProgressIndicator(),
)
: Container(
color: Colors.transparent,
),
],
),
);
}
}
Optional parameters hidden and initialChild are available so that you can show something else while waiting for the page to load.If you set hidden to true it will show a default CircularProgressIndicator. If you additionally specify a Widget for initialChild you can have it display whatever you like till page-load.
check this page : flutter_webview_plugin
and you can specify what you want to show with initialChild
return new MaterialApp(
title: 'Flutter WebView Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
'/widget': (_) => new WebviewScaffold(
url: selectedUrl,
appBar: new AppBar(
title: const Text('Widget webview'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
child: const Center(
child: CircularProgressIndicator(),
),
),
),
},
);
I use a combination of webview_flutter, progress_indicators
Here is a sample working code:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
import 'package:progress_indicators/progress_indicators.dart';
class ContactUs extends StatefulWidget {
#override
_ContactUsState createState() => _ContactUsState();
}
class _ContactUsState extends State<ContactUs> {
bool vis1 = true;
Size deviceSize;
#override
Widget build(BuildContext context) {
deviceSize = MediaQuery.of(context).size;
final lindicator = Center(
child: AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
opacity: vis1 ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: HeartbeatProgressIndicator(
child: Container(
width: 100.0,
height: 50.0,
padding: EdgeInsets.fromLTRB(35.0,0.0,5.0,0.0),
child: Row(
children: <Widget>[
Icon(
Icons.all_inclusive, color: Colors.white, size: 14.0,),
Text(
"Loading View", style: TextStyle(color: Colors.white, fontSize: 6.0),),
],
),
),
),
),
);
return new Scaffold(
appBar: new AppBar(
title: new Row(
children:<Widget>[
Text('THisApp'),
lindicator,
]),
backgroundColor: Colors.red,
),
body: new Container(
child:WebView(
initialUrl: 'https://cspydo.com.ng/',
javaScriptMode: JavaScriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController){
setState(() {
vis1=false;
});
},
)
),
);
}
}
Found the solution.You can add initialChild and set attribute hidden as true.
WebviewScaffold(
hidden: true,
url:url,initialChild: Center(
child: Text("Plase Wait...",style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.deepPurpleAccent[100]
),)
) )
You can work on isLoading and change it after you are sure data is loaded properly.
class X extends StatefulWidget {
XState createState() => XState();
}
class XState extends State<X>{
bool isLoading = false;
#override
void initState() {
setState(() {
isLoading = true;
});
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
isLoading ? Center(child: CircularProgressIndicator()) : WebView(...)
]
)
);
}
}
I used A stack in flutter.
#override
void initState() {
isLoading = true;
super.initState();
}
in the build method
Stack(
children: [
isLoading ? Loading() : Container(),
Container(
child: Flex(
direction: Axis.vertical,
children: [
Expanded(
child: InAppWebView(
contextMenu: contextMenu,
initialUrl: url,
onLoadSop: (InAppWebViewController controller, url) {
setState(() {
isLoading = false;
});
},
)
),
],
),
),
],
)
I need floating action button like this:
.
Are there standard tools for implementation? I watched both the standard version of the button and the extended one, but did not find anything
You don't need to use an external library because it will grow the size of your bundle.
This is the code:
FloatingActionButton.extended(
onPressed: () {
// Add your onPressed code here!
},
label: Text('Approve'),
icon: Icon(Icons.thumb_up),
backgroundColor: Colors.pink,
)
You can use this flutter package flutter_fab
Or you can refer from this article Create Animated FAB in flutter.
You can also use this flutter_speed_dial
https://pub.dev/packages/flutter_speed_dial#-readme-tab-
You can use FloatingActionButton.Extended.
just copy and paste the code and see the result itself
import 'package:flutter/material.dart';
class TestClass extends StatefulWidget {
#override
_TestClassState createState() => _TestClassState();
}
class _TestClassState extends State<TestClass> {
bool floatExtended = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 272,
height: 168,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), color: Colors.indigo),
)),
floatingActionButton: FloatingActionButton.extended(
tooltip: 'Create Card',
label: Row(
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.save)),
IconButton(onPressed: () {}, icon: Icon(Icons.library_add_check)),
// Text('1'),
// Text('2'),
// Text('3'),
],
),
isExtended: floatExtended,
icon: Icon(
floatExtended == true ? Icons.close : Icons.radio_button_on,
color: floatExtended == true ? Colors.red : Colors.black,
),
onPressed: () {
setState(() {
floatExtended = !floatExtended;
});
},
backgroundColor: floatExtended == true
? Colors.blueGrey
: Colors.white.withOpacity(.7),
),
);
}
}
Add a Text("YourText") widget in child of FloatingActionButton. Then it will work.
FloatingActionButton.extended(
child: Text('Login'),
backgroundColor: Colors.pink,
onPressed: null,)
Use Flow class. It's built-in flutter No need for an external package. The flow was built for this kind of feature.
Here is the doc link
https://api.flutter.dev/flutter/widgets/Flow-class.html
i run the code in ios simulator ,but ios alaways loading,the webview state is startLoad,but canot finishLoad,
the page always loading,the code liek this:
#override
Widget build(BuildContext context) {
List<Widget> titleContent = [];
titleContent.add(new Text(
"资讯详情",
style: new TextStyle(color: Colors.white),
));
if (!loaded) {
titleContent.add(new CupertinoActivityIndicator());
}
titleContent.add(new Container(width: 50.0));
print(widget.id);
return new WebviewScaffold(
url: "http://www.baidu.com",
appBar: new AppBar(
title: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: titleContent,
),
actions: <Widget>[
new IconButton(
icon: icon,
onPressed: () {
print('收藏');
setState(() {
icon = new Icon(Icons.star);
});
},
),
new IconButton(
icon: new Icon(Icons.share),
onPressed: () {
print('分享');
},
),
],
iconTheme: new IconThemeData(color: Colors.white),
),
withZoom: false,
withLocalStorage: false,
withJavascript: true,
withLocalUrl: true,
);
}
the page like :
the page like this
thanks
Listen for the httpError stream. Maybe you're getting some errors, because normally it should work.
FlutterWebviewPlugin().onHttpError.listen((WebViewHttpError item) {
print(" WebView onHttpError.code: ${item.code}");
});
Try to remove this line:
withLocalUrl: true,
I try to Overlay a floatingActionButton on a Webview which is opened in a Widget.
"/widget": (_) => new WebviewScaffold(
clearCache: true,
clearCookies: true,
withJavascript: false,
url: selectedUrl,
appBar: new AppBar(
title: new Text("Widget webview"),
),
withLocalStorage: true,
/*floatingActionButton: new FloatingActionButton (
backgroundColor: Colors.amber,
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new AddLinkPage()));
},
child: new Icon(
Icons.add,
color: Colors.black,
),
),*/
)
This doesn't work.
It is possible with persistentFooterButtons: <Widget>[], but then the view will be cut off
I use the flutter_webview_plugin: 0.1.5
That's not possible.
The WebView is an Android view shown as overlay and is therefore always the top-most content that is shown.