Back button is not working properly with webview flutter - flutter

I am building a flutter app which simply views website URL. but I press back instead of navigating back it exists the app. I searched for solutions but no solution helped me. or that code doesn't support with latest flutter...
Here is my code
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
);
}
}

This is happening because you are not coming from any page.
This is how currently your structure is following...
main() ===> MyApp() ===> MyHomePage(title: 'Flutter Demo Home Page') ===> "your-web-vide-page".
so if you would like to work back button then there has to be any page from the page you are going to like...
Navigator.push(context, MaterialPageRoute(builder: (context) {
return //<=== your-page-here
},));

You need to handle this manually.
Create a webView Controller first:
final Completer<WebViewController _controller =
Completer<WebViewController ();
and then create actions in the appBar, and add buttons to handle back and forward actions.
so on back button you would call:
controller.goBack();
and forward:
controller.goForward();
to handle the back button on android device you need to wrap your scaffold with willpopscop and then handle the case inside onWillPop function.

Related

InAppWebView is not working in flutter web app - Desktop

I have used InAppWebView plugin to load webview. It works fine in android and iOS. But in flutter web app, it throws error as plugin not supported.
Kindly suggest some solution or an plugin that works fine in all platforms.
InAppWebview or Webview isn't supported in Flutter Web.
Check this package out: https://pub.dev/packages/webviewx
This is an example:
import 'package:flutter/material.dart';
import 'package:webviewx/webviewx.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return const Scaffold(
body: WebViewX(
initialContent: "https://flutter.dev/",
width: double.maxFinite,
height: double.maxFinite,
),
);
}
}

Flutter SmartLook SDK works only on the first page

I'm trying to use SmartLook in my Flutter project. I use the latest flutter_smartlook package. Here is my code according to their documentation:
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
final SetupOptions options = (SetupOptionsBuilder('*******')
..Fps = 10
..StartNewSession = true)
.build();
Smartlook.setupAndStartRecording(options);
}
#override
Widget build(BuildContext context) {
return SmartlookHelperWidget(
child: MaterialApp(
title: 'My App',
theme: ThemeData(
fontFamily: 'OpenSans',
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
debugShowCheckedModeBanner: false,
navigatorKey: Global.navigatorKey,
initialRoute: AppRouter.main,
onGenerateRoute: AppRouter.onGenerateRoute,
onGenerateInitialRoutes: AppRouter.onGenerateInitialRoutes,
),
);
}
}
The problem is that in recordings, only the first page is visible (with very poor quality / not bad fps but just poor quality). I should mention that my first page contains a GoogleMap widget from google_maps_flutter package which fill almost two third of the entire screen. In the recordings, you can see that one third of the screen which whenever user opens a new page, that part gets updates. So I think it has something with Google maps widget but I'm not sure.

How to get rid of address bar and bottom bar in Flutter 'WebBrowser' Plugin?

My App is a Flutter WEB app.
This is the plugin I am using to display some HTML coming from the server:
https://pub.dev/packages/web_browser
Here is the code I am using:
WebBrowser(
initialUrl: 'https://${Provider.of<CP>(context).getPaymentURL()+Provider.of<CP>(context).getPaymentPATH()}?O=${Provider.of<CP>(context).getOrder().orderUID}&Ro=${Provider.of<CP>(context).getOrder().res_key}',
),
My screen looks like below:
I would like to rid of the address bar and bottom bar but not sure how. Can someone help please?
You can copy paste run full code below
You can use attribute interactionSettings and set WebBrowserInteractionSettings's topBar and bottomBar to SizedBox.shrink()
code snippet
return WebBrowser(
initialUrl: 'https://dart.dev/',
interactionSettings: WebBrowserInteractionSettings(
topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));
working demo
full code
import 'package:flutter/material.dart';
import 'package:web_browser/web_browser.dart';
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return WebBrowser(
initialUrl: 'https://dart.dev/',
interactionSettings: WebBrowserInteractionSettings(
topBar: SizedBox.shrink(), bottomBar: SizedBox.shrink()));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: MyWidget()),
);
}
}

Instruction page that only loads after installation

I have a page in my app that has some icons and animations on how to use the app.
I want to load this page on the first launch after installation and then I want any other launch of the app to go straight to the home page.
How can this be done?
I have seen a couple threads that confuse this question with splash screens, I only want this page to be launched once after installation and then never again.
Thank you
You must create splash screen and in this page check the shared preference that tell you if you already showed intro page or not
if you showed that page you can navigate to main page otherwise navigate to intro page
in intro page show whatever you want to show and in when introduction is over set the isIntroShowed or to true on shared preference
like below code
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreen(),
);
}
}
class SplashScreen extends StatefulWidget {
SplashScreen({Key key}) : super(key: key);
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
SharedPreferences.getInstance().then((prefs){
var isShowed =prefs.getBool("isIntroShowed");
if(isShowed!=null && isShowed)
{
//navigate to main page
}
else{
//navigate to intro page
}
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: CircularProgressIndicator(),),
);
}
}
class IntroPage extends StatelessWidget {
const IntroPage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child:FlatButton(child: Text('intro done'),onPressed: ()async{
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setBool('isIntroShowed', true);
// navigate to main content
},)
),
);
}
}

Material App styles doesn't work without Scaffold

I'm trying to create a Material design app without the Scaffold element: Here is the purely default app:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Text(widget.title);
}
}
The result is:
How to fix that and use material styles without Scaffold?
Answer:
I need to use the Material widget. As a very beginner in Flutter I had read Material design tutorials and all of them were using the Scaffold widget. Thanks for pointing out the Material widget in comments.
It will not work without scaffold.
I think you are not getting what scaffold is and how it's behaviour is?
Scaffold is a widget which provides your screen/route a default behaviour similar to your android/ios screens like AppBar, Body, Title, FloatingActionButton, Drawer etc.
So that you do not have to make yourself a new structure.
If you are not using scaffold, then your page will act like a plain body structure in which you have to fill custom widgets as per your requirements.
For ex :
In android, Any Activity will have a default ActionBar. But, if you use NoActionBarActivity then Activity will be displayed without actionBar.
Even Scaffold works in the similar manner.
Updated Method :
#override
Widget build(BuildContext context) {
return Material(child: Center(child: Text(widget.title,)),color: Colors.white,);
}
You need to use Material Widget as a parent to behave the child widgets in the similar manner when using Scaffold.