I'm developing WebView mobile application in Flutter and I would like to customize webview errors, because if customer will have his wifi turned off and he got "net::ERR_ADDRESS_UNREACHABLE", it's not so good. So i would like to change this page to some custom design and show something like "This application requires internet connection, you should turn your wifi on"..
Is something like this possible? I was searching in docs and found nothing.
Thanks a lot.
Not sure if we can modify the actual message shown from the webview itself, but there is a workaround that I have used.
You can use a Stack widget and show a custom message in a separate widget whenever the error occurs. A sample code is below.
Stack(
children: [
if (!controller.isError)
WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://some-random-url.com",
onPageFinished: controller.onLoaded,
onWebResourceError: controller.onError,
),
if (controller.isLoading)
Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
),
if (controller.isError)
Center(
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Text(
text: "Something went wrong, please try again",
),
),
)
],
),
The Controller object you see is a GetX controller which I use for state management, you are free to use whatever you like. The main action elements are
isError -> State variable which monitors if an error has occurred.
WebView.onWebResourceError -> Callback function called when a certain error occurs.
You can pass a function to this and this callback is only called when an error occurs. With this, you can then modify the state variable isError to be true, which will, in turn, hide the webview and show an error message at the center of the screen.
With this, you will have the error handling you are looking for.
PS: I know I am late for this answer, but I hope somebody else finds it useful.
Related
Please I need your help I have a mobile application, when am typing on the input fields, the keyboard covers the input fields and it doesn't scroll for user to input text. See below the code am talking about. Below is a sample could you tell where the issue is ? (Note this is a flutter app)
AppTextField(
controller: emailController,
focus: emailFocus,
textFieldType: TextFieldType.EMAIL,
decoration: inputDecoration(context, hint: appLocalization.translate('email')),
nextFocus: widget.phoneNumber != null ? null : passFocus,
errorThisFieldRequired: appLocalization.translate('field_Required'),
errorInvalidEmail: appLocalization.translate('email_Validation'),
maxLines: 1,
cursorColor: colorPrimary,
).paddingBottom(16),
return Scaffold(
resizeToAvoidBottomInset: **true**,
body: Container(
child: Stack(
children: [
Form(
This solution worked for me, by changing the value to true from my the code above. It was set to false.
N:B - I got the info from another thread. check the link some options there might also be helpful should incase any come across same issue.
Flutter Keyboard makes textfield hide
Long story short, I use flutter's camera dependency. Everything works fine until it's time for the camera preview to show up, but it doesn't even though the camera hardware is activated already (I use emulator so I can see the webcam indicator lamp is active). When I hot reload it, the preview shows. I tried programmatical force rebuild but it doesn't work because the problem lays on the value of camera controller (that's what the output says).
Without further ado, here's my snippet
if (camCtrl == null || !camCtrl.value.isInitialized) {
return LoadingOverlay();
} else if (camCtrl.value.isInitialized) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
SizedBox(
width: displayWidth(context),
child: camCtrl.value.isInitialized
? CameraPreview(camCtrl)
: LoadingOverlay(),
),
Padding(
padding: EdgeInsets.only(bottom: 20),
child: FloatingActionButton(child: Icon(Icons.camera), onPressed: () {}),
)
],
);
}
This happens due to the mishandling of Futures.
Try to go through your Code again.
I guess you have missed the await keyboard somewhere.
Also, you can use a FutureBuilder here.
If none helps, refer this - https://flutter.dev/docs/cookbook/plugins/picture-using-camera
This may be a duplicate question as I have seen a lot of questions that has to do with iframes, webview and all that but each one gets me more confused as I study them. Currently I am making use of the WebView widget to display a webview in my mobile app. I wish to build for the web now but WebView is not supported for web so I have been seeking for an alternative approach. I got to know about HtmlElementView from the flutter documentation. Trying to research into it but I can not seem to find any clear way I am supposed to use it to solve my problem.
Here is my code:
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
child: !kIsWeb
? WebView(
initialUrl: this.widget._url,
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: this._pageStarted,
)
: HtmlElementView(
viewType: '',
),
),
),
);
}
From my code, I am building the WebView when not compiled for web and building HtmlElementView when compiled for web. As much as I hate to say it, this is as far as my knowledge can go for now on HtmlElementView. From the docs, viewType is to take a String which I do not really know anything about.
What I wish to do exactly? The contents loaded in WebView is kind of dynamic so I wish to load same in the HtmlElementView. Any help or maybe materials that could help me in this would be so much appreciated as I am new to all these. Thanks.
I'm currently on the same quest and found this handy, simple example:
https://codepen.io/riccio85/pen/wvMeaMe
import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() {
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
'hello-html',
(int viewId) => IFrameElement()
..width = '500'
..height = '360'
..src = 'https://www.youtube.com/embed/xg4S67ZvsRs'
..style.border = 'none');
runApp( Padding(
padding: EdgeInsets.all(25),
child: SizedBox(
width: 640,
height: 360,
child: HtmlElementView(viewType: 'hello-html'),
),
),
);
}
It's not perfect but it seems to do what I need to. Which is to say, I also end up checking for web in the same way as your example and use webview_flutter otherwise.
Seems to be a bit of a shortcoming with the whole thing at the moment, let's hope the situation improves.
I created a new Flutter app from scratch, in Android Studio. In one of my previous apps, I intentionally used a weird font style. Now, for some reason, the new app has the same fonts. Is it possible that I had stored some "global" font style somewhere in the Android Studio, and now it's getting re-used? How can I get rid of it and revert the "normal" fonts?
Here's the code of one widget and its screenshot in the emulator:
import 'package:flutter/material.dart';
class LoginScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: Column(
children: <Widget>[
RaisedButton(
child: Text('Login'),
onPressed: () {
Navigator.pushNamed(context, '/');
},
),
Text('Login'),
],
),
),
);
}
}
No, there shouldn't be.
In my case it also appeared in the debug app, but disappeared again when I recompiled the project. I haven't seen it in a finished app yet.
I have a MultiBlocProvider assigned for an app that has a Bottom Navigation Bar to navigate through main routes like Home, Search, Wishlist ...
I use setState(){} to change the currentPage for each route.
Recently I've added Blocs to each of them by using flutter_bloc package and I'm using BlocProvider to provide the bloc to each BlocBuilder,
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
key: _scaffoldKey,
body: PageStorage(
child: Stack(
children: <Widget>[
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
child: BlocProvider<WishlistBloc>(
create: (BuildContext context) => WishlistBloc(WishlistRepository()),
child: currentPage),
),
bottomBar(currentPageScroll)
],
),
bucket: bucket,
),
),
);
}
Is it ok to use MultiBlocProvider to provide all the BlocsProviders I need?
they could be more than 10 providers, would it affect the performance of the app?
It's definitely OK, MultiBlocProvider created for this purposes. But you need to understand, that if you with your creation also send(for e.x.) initialize event which started loading in all 10 blocs some data you will have some issues. So, if you will have some performance issues, please create separate SO question and community will help to find root-cause of this.