How to add first-launch visual help for a Flutter app? - flutter

I don't know what is the name of the interactive visual guide that is displayed usually in first launch of mobile application, and how can I add that to my Flutter application?
Thanks

please use this package https://github.com/pyozer/introduction_screen
code snippet
IntroductionScreen(
pages: listPagesViewModel,
onDone: () {
// When done button is press
},
onSkip: () {
// You can also override onSkip callback
},
showSkipButton: true,
skip: const Icon(Icons.skip_next),
next: const Icon(Icons.next),
done: const Text("Done", style: TextStyle(fontWeight: FontWeight.w600))
);

Related

how can I launch Differernt URL in different elevated button in flutter

want to launch URL in ELEVATEDBUTTON. there are too many button for launch too many URL how can I do this in flutter??
I can't understand how can I do this. can anyone solve this problem
you can map the list while rendering on ui.
...urlList
.map(
(e) => ElevatedButton(
onPressed: () {
launchUrl(Uri.parse(e)); //use .tryParse
},
child: Text("$e"),
),
)
.toList(),
You may create a model class with label and string url.

How to use Navigator.pop() when redirectcheckout sends successurl or cancelUrl in stripe to flutter web view

I am trying to send the page back to my button screen after receiving success url or cancel url being received from stripe payment after the completion of the transaction in flutter web view
Can someone please tell me how do I achieve this, on receiving success url I want to use navigator.pop() and on receiving cancel url I want to use snackbar
Please find below code :
payment.dart
const TextButton(
// textColor: Colors.white,
child: Text(
'PURCHASE',
style: TextStyle(
fontSize: 15.0,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
onPressed: () => redirecToCheckout(plan[i]),
),
void redirectToCheckout(BuildContext _, var plan) async {
final stripe = Stripe(apiKey);
stripe.redirectToCheckout(CheckoutOptions(
lineItems: [
LineItem(price: plan, quantity: 1),
],
clientReferenceId: '1',
mode: 'payment',
successUrl: 'https://localhost:8080/#/success/{CHECKOUT_SESSION_ID}',
cancelUrl: 'https://localhost:8080/#/cancel',
));
}
Create 2 different dart files success.dart and failure.dart.. add these classes on route too. Now on initstate of success you have to use Navigator.pushAndRemoveUntil and move it to the necessary page. On failure.dart again on initState move to the required pageand display a snackbar. Thats the only way for now to handle payment for flutter web using stripe

Flutter - Can only pop AlertDialog OR execute passed function - need to do both

TL;DR: Trying to pass a function call to a custom AlertDialog. AlertDialog needs to be popped after the function -> can't make it work.
I've created a custom AlertDialog to use throughout my app. It looks something like this:
customAlertDialog({required context, buttonAction}){
showDialog(context: context, builder: (context) => AlertDialog(
title: Text("example title", style: TextStyle(color: AppTheme.colors.white),),
content: const Text("some content"),
actions: [
TextButton(onPressed: () {Navigator.of(context).pop();}, child: Text(
"Abbrechen",
style: TextStyle(
color: AppTheme.colors.white),
),),
TextButton(
child: Text("do something",
style: TextStyle(
color: AppTheme.colors.lightRed),
),
onPressed: buttonAction)
],
),);
}
The customAlertDialog takes a function call as an argument (here named buttonAction) for the last TextButtons onPressed action. It works fine when I pass:
buttonAction: () => deleteUser(context)
The problem is that this does not work in combination with a pop method. In the following only deleteUser will be called:
buttonAction: () => [deleteUser(context), Navigator.of(context).pop()]
the same if written like this:
buttonAction: () {deleteUser(context), Navigator.of(context).pop()}
I guess that the context of the customAlertDialog itself needs to be popped. So I've tried the following in the customAlertDialog (buttonAction contains () => deleteUser(context):
onPressed: () => [buttonAction, Navigator.of(context).pop()]
Now it only pops the dialog, probably because dart cannot interpret the buttonAction. So I've searched to find a way to pass only the function that should be called but wasn't successful doing so.
So my question is: How can I pass a function and still pop the dialog?
EDIT:
As #SlowDeepCoder mentioned the problem could have been that the Navigator.pop() method throws the context from the stack before deleteUser() has finished and therefore it doesn't work. It was tried to be fixed with the following but it did not work:
buttonAction: () async{ await deleteUser(context); Navigator.of(context).pop(); }
This is because you call pop() on a Navigator from an incorrect BuildContext. So instead of
buttonAction: () {
deleteUser(context);
Navigator.of(context).pop();
}
you have to do something like this:
buttonAction: (innerContext) {
deleteUser(innerContext); // not sure if you need the innerContext here. Depends on your other app code
// deleteUser(context); // use this line if the above does not work
Navigator.of(innerContext).pop();
}
together with
TextButton(
child: Text("do something"),
onPressed: () => buttonAction(context),
)
I also would recommend you to give bot of your BuildContexts (customAlertDialog and showDialog) different names.
You do not always have to use arrow function to pass a custom function.
You can simply pass the function as
buttonAction: (){
deleteUser(context);
Navigator.of(context).pop();
}

Remove url bar from chromeSafariBrowser in flutter_inappwebview

I am using ChromeSafariBrowser class of flutter_inappwebview to show the webview which contains videos. I am using this class cause it supports pip and also shows media controls on video play which most of dependencies doesnt provide. Now I want to remove the url bar from the top, how can i achieve it?
Any help is appreciated, thanks in advance..
I want to remove the rectangular marked area in this picture
Following is my sample code
RaisedButton(
onPressed: () async {
await widget.browser.open(
url: "https://player.vimeo.com/api/demo",
options: ChromeSafariBrowserClassOptions(
android: AndroidChromeCustomTabsOptions(
addDefaultShareMenuItem: false,
enableUrlBarHiding:true,
toolbarBackgroundColor: "#000000"
),
ios: IOSSafariOptions(
barCollapsingEnabled: true,
preferredBarTintColor: "#000000"
)
),
);
},
child: Text("Open Chrome Safari Browser")
)

how to run code dart on click app icon without launching the app

i am trying to develop an flutter app that when i click on the app icon a task will start without launching the app , i find the package quick action but when i click on the quick action always app is launched
this is my code
import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
final QuickActions quickActions = QuickActions();
quickActions.initialize((shortcutType) {
if (shortcutType == 'action_one') {
print('The user tapped on the "Main view" action.');
}
});
quickActions.setShortcutItems(<ShortcutItem>[
const ShortcutItem(
type: 'action_one',
localizedTitle: 'Action one',
icon: 'AppIcon',
),
const ShortcutItem(
type: 'action_two', localizedTitle: 'Action two', icon: 'ic_launcher'),
]);
//runApp(MyApp());<-- comment
}
thank you for helping me
I think you are doing only one click,
you have to tap long on the app ,
Also check const is missing there.
final QuickActions quickActions = const QuickActions();