Develop Reference

flutter webview navigation menu is not working

I'm trying to make a webview app for my website and use the following starter code
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter1',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter1'),
),
body: WebView(
initialUrl: "URL.com",
javascriptMode: JavascriptMode.unrestricted,
),
),
);
}
}
PROBLEM
While the app opens the page, the navigation menu (three dots) do not respond when I click.
What can I do?
EDIT
I also tried to allow all mixed content using flutter_inappwebview
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter2',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter2'),
),
body: InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse("www.URL.com")),
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
mixedContentMode: AndroidMixedContentMode.MIXED_CONTENT_COMPATIBILITY_MODE
)
),
),
),
);
}
}
Still the dots are not working.

you have to have a controller for your Navigation- and WebView-Menu
final Completer<WebViewController> _controller =
Completer<WebViewController>();
then in your build methode:
Scaffold(
appBar: AppBar(
title: Text('Webview'),
actions: <Widget>[
NavigationControls(_controller.future),
WebViewMenu(_controller.future),
],
}
),
body: Builder(....)...
these are the classes from https://pub.dev/packages/webview_flutter/example
class WebViewMenu extends StatelessWidget {
WebViewMenu(this.controller);
final Future<WebViewController> controller;
final CookieManager cookieManager = CookieManager();
#override
Widget build(BuildContext context) {
return FutureBuilder<WebViewController>(
future: controller,
builder:
(BuildContext context, AsyncSnapshot<WebViewController> controller) {
if (controller.hasError) {
return Text('Controller has Error');
}
return PopupMenuButton<MenuOptions>(
onSelected: (MenuOptions value) {
switch (value) {
case MenuOptions.showUserAgent:
_onShowUserAgent(controller.data!, context);
break;
case MenuOptions.listCookies:
_onListCookies(controller.data!, context);
break;
case MenuOptions.clearCookies:
_onClearCookies(context);
break;
case MenuOptions.addToCache:
_onAddToCache(controller.data!, context);
break;
case MenuOptions.listCache:
_onListCache(controller.data!, context);
break;
case MenuOptions.clearCache:
_onClearCache(controller.data!, context);
break;
case MenuOptions.navigationDelegate:
_onNavigationDelegateExample(controller.data!, context);
break;
}
},
itemBuilder: (BuildContext context) => <PopupMenuItem<MenuOptions>>[
PopupMenuItem<MenuOptions>(
value: MenuOptions.showUserAgent,
child: const Text('Show user agent'),
enabled: controller.hasData,
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCookies,
child: Text('List cookies'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCookies,
child: Text('Clear cookies'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.addToCache,
child: Text('Add to cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.listCache,
child: Text('List cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.clearCache,
child: Text('Clear cache'),
),
const PopupMenuItem<MenuOptions>(
value: MenuOptions.navigationDelegate,
child: Text('Navigation Delegate example'),
),
],
);
},
);
}
void _onShowUserAgent(
WebViewController controller, BuildContext context) async {
// Send a message with the user agent string to the Toaster JavaScript channel we registered
// with the WebView.
await controller.evaluateJavascript(
'Toaster.postMessage("User Agent: " + navigator.userAgent);');
}
void _onListCookies(
WebViewController controller, BuildContext context) async {
final String cookies =
await controller.evaluateJavascript('document.cookie');
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(SnackBar(
content: Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Cookies:'),
_getCookieList(cookies),
],
),
));
}
void _onAddToCache(WebViewController controller, BuildContext context) async {
await controller.evaluateJavascript(
'caches.open("test_caches_entry"); localStorage["test_localStorage"] = "dummy_entry";');
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(const SnackBar(
content: Text('Added a test entry to cache.'),
));
}
void _onListCache(WebViewController controller, BuildContext context) async {
await controller.evaluateJavascript('caches.keys()'
'.then((cacheKeys) => JSON.stringify({"cacheKeys" : cacheKeys, "localStorage" : localStorage}))'
'.then((caches) => Toaster.postMessage(caches))');
}
void _onClearCache(WebViewController controller, BuildContext context) async {
await controller.clearCache();
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(const SnackBar(
content: Text("Cache cleared."),
));
}
void _onClearCookies(BuildContext context) async {
final bool hadCookies = await cookieManager.clearCookies();
String message = 'There were cookies. Now, they are gone!';
if (!hadCookies) {
message = 'There are no cookies.';
}
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(message),
));
}
void _onNavigationDelegateExample(
WebViewController controller, BuildContext context) async {
final String contentBase64 =
base64Encode(const Utf8Encoder().convert(kNavigationExamplePage));
await controller.loadUrl('data:text/html;base64,$contentBase64');
}
Widget _getCookieList(String cookies) {
if (cookies == null || cookies == '""') {
return Container();
}
final List<String> cookieList = cookies.split(';');
final Iterable<Text> cookieWidgets =
cookieList.map((String cookie) => Text(cookie));
return Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: cookieWidgets.toList(),
);
}
}
class NavigationControls extends StatelessWidget {
const NavigationControls(this._webViewControllerFuture);
final Future<WebViewController> _webViewControllerFuture;
#override
Widget build(BuildContext context) {
return FutureBuilder<WebViewController>(
future: _webViewControllerFuture,
builder:
(BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
if (snapshot.hasData) {
final bool webViewReady =
snapshot.connectionState == ConnectionState.done;
final WebViewController controller = snapshot.data!;
return Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.arrow_back_ios),
onPressed: !webViewReady
? null
: () async {
if (await controller.canGoBack()) {
await controller.goBack();
} else {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
const SnackBar(
content: Text("No back history item")),
);
return;
}
},
),
IconButton(
icon: const Icon(Icons.arrow_forward_ios),
onPressed: !webViewReady
? null
: () async {
if (await controller.canGoForward()) {
await controller.goForward();
} else {
// ignore: deprecated_member_use
Scaffold.of(context).showSnackBar(
const SnackBar(
content: Text("No forward history item")),
);
return;
}
},
),
IconButton(
icon: const Icon(Icons.replay),
onPressed: !webViewReady
? null
: () {
controller.reload();
},
),
],
);
}
return Text('loading navigationControls');
},
);
}
}

Getting Album Artwork in flutter

I am trying to create a music app. I managed to get all the songs list but I cannot seem to get album artwork from the song metadata. I am using flutter_audio_query: ^0.3.5+6 plugin for this.
I cannot get the artwork by using songs[index].albumArtwork. It always returns null instead of the image path. What is the problem with my code?
Here is my code
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:flutter_audio_query/flutter_audio_query.dart';
class HomePage extends StatefulWidget {
const HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final FlutterAudioQuery audioQuery = FlutterAudioQuery();
List<SongInfo> songs = [];
#override
void initState() {
super.initState();
checkPermission();
getAllSongs();
}
Future<void> getAllSongs() async {
songs = await audioQuery.getSongs();
}
Future<void> checkPermission() async {
if (await Permission.storage.request().isGranted) {
setState(() {});
} else {
_showDialog();
}
}
void _showDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Warning'),
content: SingleChildScrollView(
child: ListBody(
children: const <Widget>[
Text('The app needs storage permission in order to work'),
],
),
),
actions: <Widget>[
TextButton(
child: const Text('OK'),
onPressed: () async {
Navigator.of(context).pop();
await checkPermission();
},
),
],
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF3C3C3C),
appBar: AppBar(
elevation: 0.0,
centerTitle: true,
toolbarHeight: 64.0,
leading: Icon(
Icons.music_note_rounded,
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search_rounded),
),
],
backgroundColor: Colors.transparent,
title: Text(
"All Songs",
style: GoogleFonts.expletusSans(
fontWeight: FontWeight.bold,
),
),
),
body: ListView.builder(
itemCount: songs.length,
itemBuilder: (context, index) {
return ListTile(
leading: Image.asset(
songs[index].albumArtwork != null
? songs[index].albumArtwork
: "assets/placeholder.png",
),
title: Text(songs[index].title),
subtitle: Text(songs[index].artist),
);
},
),
);
}
}

Sometimes albumArtwork will return a null value. In this case you need to use [FlutterAudioQuery().getArtwork()].
Documentation
Use ResourceType.ALBUM to get album image and ResourceType.SONG to song image.
Example:
// check if artistArtPath isn't available.
(song.artwork == null)
? FutureBuilder<Uint8List>(
future: audioQuery.getArtwork(
type: ResourceType.SONG, id: song.id),
builder: (_, snapshot) {
if (snapshot.data == null)
return Container(
height: 250.0,
child: Center(
child: CircularProgressIndicator(),
),
);
return CardItemWidget(
height: 250.0,
title: artist.name,
// The image bytes
// You can use Image.memory widget constructor
// or MemoryImage image provider class to load image from bytes
// or a different approach.
rawImage: snapshot.data,
);
}) :
// or you can load image from File path if available.
Image.file( File( artist.artistArtPath ) )

Flutter app crashes on firebase phone number authentication in Android platform

I have implemented Firebase Phone authentication in my Flutter project. The process crashes after I clicked "login", the app crashes and lost connection.
Below are the codes (get from the internet):
main.dart
import 'package:flutter/material.dart';
import 'loginpage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginPage(),
);
}
}
loginpage.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'dart:async';
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
String phoneNo, smssent, verificationId;
Future<void> verifyPhone() async {
final PhoneCodeAutoRetrievalTimeout autoRetrieve = (String verID) {
this.verificationId = verID;
};
final PhoneCodeSent smsCodeSent = (String verId, [int forceCodeResent]) {
this.verificationId = verId;
smsCodeDialogue(context).then((value) {
print("Code Sent");
});
};
final PhoneVerificationCompleted verifiedSuccess = (AuthCredential auth) {};
final PhoneVerificationFailed verifyFailed = (AuthException e) {
print('${e.message}');
};
await FirebaseAuth.instance.verifyPhoneNumber(
phoneNumber: phoneNo,
timeout: const Duration(seconds: 5),
verificationCompleted: verifiedSuccess,
verificationFailed: verifyFailed,
codeSent: smsCodeSent,
codeAutoRetrievalTimeout: autoRetrieve,
);
}
Future<bool> smsCodeDialogue(BuildContext context) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return new AlertDialog(
title: Text('Enter OTP'),
content: TextField(
onChanged: (value) {
this.smssent = value;
},
),
contentPadding: EdgeInsets.all(10.0),
actions: <Widget>[
FlatButton(
onPressed: () {
FirebaseAuth.instance.currentUser().then((user) {
if (user != null) {
Navigator.of(context).pop();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
} else {
Navigator.of(context).pop();
signIn(smssent);
}
});
},
child: Text(
"done",
style: TextStyle(color: Colors.white),
),
),
],
);
});
}
Future<bool> signIn(String smsCode) async {
final AuthCredential credential = PhoneAuthProvider.getCredential(
verificationId: verificationId,
smsCode: smsCode,
);
await FirebaseAuth.instance.signInWithCredential(credential).then((user) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LoginPage(),
),
);
}).catchError((e) {
print(e);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(
child: Text('PhoneNumber Login'),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
hintText: "Enter your phone number",
),
onChanged: (value) {
this.phoneNo = value;
}),
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: verifyPhone,
child: Text(
"verify",
style: TextStyle(color: Colors.white),
),
elevation: 7.0,
color: Colors.blue,
)
],
),
);
}
}
this is the error
Lost connection to device.
Exited (sigterm)
May I know what is the problem? Anyone would like to help me to solve this...

I solved the problem by simply adding below line into app/build.gradle dependencies.
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.google.firebase:firebase-auth'
implementation "androidx.browser:browser:1.2.0"
}

I want Flat button text to update with the text entered by user on alert message Text field

I have added a flat button to my project which pops alert message with a text field in it. I want That Flat button text to update with the text entered by user on alert message.
This is my function to create alert dialog box.
Future<String> createAlertDialog(BuildContext context) {
TextEditingController customController = TextEditingController();
return showDialog(context: context, builder: (context){
return AlertDialog(
title: Text("Your Name"),
content: TextField(
controller: customController,
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("Submit"),
onPressed: () {
Navigator.of(context).pop(customController.text.toString());
},
)
],
);
});
}
This is the function where i want to receive it and update the button text which currently says "Enter Your Name".
List<Widget> codeField() {
return [
Container(
child: Center(
child: new FlatButton(
child: new Text('Enter Your Name',
style: new TextStyle(fontSize: 10.0)),
onPressed: () {
createAlertDialog(context).then((onValue) {
SnackBar mySnackbar = SnackBar(content: Text("$onValue"));
Scaffold.of(context).showSnackBar(mySnackbar);
});
}
),
),
)
];
}

You can copy paste run full code below
You can wrap FlatButton with StatefulBuilder
code snippet
String name = 'Enter Your Name';
List<Widget> codeField() {
return [
Container(
child: Center(child: new StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return FlatButton(
child: new Text('$name', style: new TextStyle(fontSize: 10.0)),
onPressed: () {
createAlertDialog(context).then((onValue) {
name = onValue;
print(onValue);
SnackBar mySnackbar = SnackBar(content: Text("$onValue"));
_scaffoldKey.currentState.showSnackBar(mySnackbar);
setState(() {});
});
});
})),
)
];
}
working demo
full code
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,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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;
final _scaffoldKey = GlobalKey<ScaffoldState>();
Future<String> createAlertDialog(BuildContext context) {
TextEditingController customController = TextEditingController();
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Your Name"),
content: TextField(
controller: customController,
),
actions: <Widget>[
MaterialButton(
elevation: 5.0,
child: Text("Submit"),
onPressed: () {
Navigator.of(context).pop(customController.text.toString());
},
)
],
);
});
}
String name = 'Enter Your Name';
List<Widget> codeField() {
return [
Container(
child: Center(child: new StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return FlatButton(
child: new Text('$name', style: new TextStyle(fontSize: 10.0)),
onPressed: () {
createAlertDialog(context).then((onValue) {
name = onValue;
print(onValue);
SnackBar mySnackbar = SnackBar(content: Text("$onValue"));
_scaffoldKey.currentState.showSnackBar(mySnackbar);
setState(() {});
});
});
})),
)
];
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: codeField()),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

How to close the SimpleDialog in flutter after choosing an option

I added a SimpleDialog with 2 options: lost and found. Whenever I make my selection and get redirected to where I want, the SimpleDialog doesn't close and stays on my screen.
The switch:
switch (
await showDialog(
context: context,
child: new SimpleDialog(
title: new Text("Which category?"),
children: <Widget>[
new SimpleDialogOption(child: new Text("Found"),
onPressed: () {
goToCreate();
},
),
new SimpleDialogOption(child: new Text("Lost"),
onPressed: () {
//Whatever
},
),
],
)
)
)
And the cases:
{
case "Found":
goToCreate();
break;
case "Lost":
//Whatever
break;
}

You can do this from the dialog when you press Accept (or whatever):
Navigator.pop(context, true); // You could return any Dart type, like an enum
From the caller:
bool dialogReturnValue = await showDialog(...);
if (dialogReturnValue == true){
// do something
}

From official docs: https://docs.flutter.io/flutter/material/SimpleDialog-class.html
You need to execute inside options' onPressed method this:
Navigator.pop(context, ===arguments===);
Full example:
SimpleDialog(
title: const Text('Select assignment'),
children: <Widget>[
SimpleDialogOption(
onPressed: () { Navigator.pop(context, Department.treasury); },
child: const Text('Treasury department'),
),
SimpleDialogOption(
onPressed: () { Navigator.pop(context, Department.state); },
child: const Text('State department'),
),
],
);
EDIT:
switch (
await showDialog(
context: context,
child: new SimpleDialog(
title: new Text("Which category?"),
children: <Widget>[
new SimpleDialogOption(child: new Text("Found"),
onPressed: () {
Navigator.pop(context, 'Found'); //Close the SimpleDialog then=>
goToCreate();
},
),
new SimpleDialogOption(child: new Text("Lost"),
onPressed: () {
Navigator.pop(context, 'Lost'); //For closing the SimpleDialog
//After that do whatever you want
},
),
],
)
)
)
)
EDIT 2 (Demo Application):
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Test(),
);
}
}
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(onPressed: () {
_askedToLead(context);
}),
),
);
}
Future<void> _askedToLead(BuildContext context) async {
switch (await showDialog<String>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('Select assignment'),
children: <Widget>[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, 'Found');
},
child: const Text('FOUND'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, 'Lost');
},
child: const Text('LOST'),
),
],
);
})) {
case 'Found':
print('FOUND!');
break;
case 'Lost':
print('LOST!');
break;
}
}
}