ayalma / feature_discovery Goto Github PK

Hi,

Great job providing this package !

I have had some problem with EnsureVisible, my initial implementation used a ListView, and the EnsureVisible widget will not auto-scroll and show.

After comparing my code to the example, I found out that I need to use a SingleChildScrollView+Column instead of a ListView to make it work: X-Wei/flutter_catalog@ee8b980

If it's the intended behavior(seems so: https://stackoverflow.com/a/49154882/12421326), would be much nicer if we can highlight this in the documentation.

I have a DescribedFeatureOverlay on a center-docked FAB, and only on iOS the overlay appears panned to the left side:

(In the screenshot, the FAB's icon is pulsating, that's why it looks so big).

As mentioned, it is only happening on iOS (on Android it looks fine).

This is my code in case it helps:

DescribedFeatureOverlay(
  featureId: featureId,
  targetColor: localTheme.accentColor,
  tapTarget: Icon(CupertinoIcons.person_add_solid),
  contentLocation: ContentLocation.above,
  title: const Text('More fun with Friends'),
  child: FloatingActionButton(
    child: const Icon(CupertinoIcons.person_add_solid),
    onPressed: ...
  )
  description: Column(
    children: [
      const Text('Add your Friends [...]'),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: RaisedButton(child: const Text('GOT IT!'), onPressed: () { FeatureDiscovery.completeCurrentStep(context); }),
      )
    ],
  )
)

Also as mentioned, FAB's floatingActionButtonLocation is FloatingActionButtonLocation.centerDocked.

Why is that overlay panned? What can I do? Is that a bug?

Using Flutter 1.22, macOS 10.15.7, Xcode 12.0.1, feature_discovery: ^0.12.0+2

I want to show Design Container as a tapTarget but unable to do it. Tell me a workaround or introduce this feature, as it is not necessary that one will always shows the icons or what is mentioned into the tapTarget.

In the Overlay, the comments read:

 /// Controls whether the overlay should be dismissed on touching the background or not.
  ///
  /// The default value for [backgroundDismissible] is `true`.

However, the default value for backgroundDismissible is false.

The callbacks onOpen, onDismiss and onComplete are of type Future<bool>. This leads to the problem that you always have to make the callback an async function even if the callback doesn't await something. This can be easily fixed by changing the callback type to FutureOr<bool>. With this type, the function can be a Future but doesn't have to.

Hello, when i dismiss a discovery on a page and i return to that page later, nothing shows but the tap is being capture by the package and the overlay dismissed. This is troublesome and degrades the user performance. Any idea what i can do in this case?

Hi @ayalma

flutter_bloc v3.0.0 is out and uses provider ^4.0.0 and apparently feature_discovery ^0.6.0 is not compatible with the new version.

I've currently rolled back to flutter_bloc v2 as a workaround for now.

Running "flutter pub get" in my_app...
Because flutter_bloc >=3.0.0 depends on provider ^4.0.0 and feature_discovery 0.6.0 depends on provider ^3.1.0, flutter_bloc >=3.0.0 is incompatible with feature_discovery 0.6.0.
And because no versions of feature_discovery match >0.6.0 <0.7.0, flutter_bloc >=3.0.0 is incompatible with feature_discovery ^0.6.0.
So, because my_app depends on both feature_discovery ^0.6.0 and flutter_bloc ^3.0.0, version solving failed.
pub get failed (1; So, because my_app depends on both feature_discovery ^0.6.0 and flutter_bloc ^3.0.0, version solving failed.)
Exited (1)

Thank you.

Hello, why do we need the context to clear the settings?

i really need to be able to run this without the context and it's quite impossible.

any workaround?

                  FeatureDiscovery.clearPreferences(context, <String>{
			'feature_page_accountview_001',
			'feature_page_accountview_002',
			'feature_page_accountview_003',
			'feature_page_menuview_001',
			'feature_page_menuview_002',
			'feature_page_menuview_003',
			'feature_page_menuview_004',
			'feature_page_appbar_001',
			'feature_page_appbar_002',
			'feature_page_appbar_003',
			'feature_page_searchwidget_001',
			'feature_page_mainsearchbar_001',
		});

I took code from example and the teal background is hidden above. I tried conetntLocation property but it goes down but never to the right.

Demo

Steps to reproduce

1. Use Example
2. Run on a big screen, like PC with Flutter web

when I have multiple features to show up at my ap startup the first one's background disappears randomly, even if I restart the app, it works perfectly when I activate it with a button.

As you can see the feature's background disappears, I put a dark background to show you that the description text is there.

This is the result when I trigger the sequence with a button, everything OK.

Here is my code.

//helper class
class FeatureManager {
  static const keyMenuSearch = 'key_menu_search';
  static const keyButtonSearch = 'key_button_Search';
  static const featuresSearch = {keyMenuSearch, keyButtonSearch};
}

@override
void initState() {
  SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
    showFeatures();
  });
    super.initState();
}

void showFeatures() {
    FeatureDiscovery.clearPreferences(context, FeatureManager.featuresSearch).then((_) {
      FeatureDiscovery.discoverFeatures(context, FeatureManager.featuresSearch);
    });
}

I would like to know if the API enables us to determine whether any DescribedFeatureOverlay is being displayed or not. Or do we have to handle it externally on our own ?

In the documentation I haven't found nothing but the mention we "cannot use this to check if a feature overlay is being displayed."

Thank you :)

How to show multiple in single page

Just got an exception using 0.14.0 in \feature_discovery-0.14.0\lib\src\foundation\bloc.dart:109

E/flutter ( 6953): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: Null check operator used on a null value
E/flutter ( 6953): #0      Bloc.discoverFeatures
E/flutter ( 6953): <asynchronous suspension>

The Package works on desktop browsers but throws an exception on mobile ones.
If needed, I leave here a link to a problematic build:
http://sicuri.redlightstudio.it/web2
As you can see on the Dev console, it throws exceptions and doesn't show the overlays.

Problem

If you use a large screen, the feature discovery is way to big.

Expected behavior

Regarding to material design guidelines the second circle (the blue circle in the problem screenshot) should be much more smaller.

First off let me tell you how much i love your package, it is so beautiful and fun to use.

Ok, so: I discovered a weird bug when i have multiple features i want to show case. In this case 3. When the last one is done, it takes me back to the second one and its lingers on it for about 5 seconds before disappearing.

Any ideas? I will post a video soon.

Hi we have a scenario once the feature_discovery completes the bottom sheet should open, how can we do that? or adding on the model bottom sheet possible?

As soon as I put a bottom nav bar, the position of the overlay changed to a degree hiding part of the text

vs

I'm unclear how it keeps track of what features you've already discovered. I haven't looked at the code yet, but I assumed it was using shared prefs to just mark which feature id's were already shown? So then I assume doing something like this would allow that to be shown again? Say if a user wanted to see all the feature discoveries again.

                                  Container(
                                    //width: double.infinity,
                                    height: 60,
                                    padding: EdgeInsets.symmetric(
                                        vertical: 6.0, horizontal: 20.0),
                                    child: RaisedButton(
                                        shape: RoundedRectangleBorder(
                                            borderRadius:
                                            BorderRadius.circular(8.0)),
                                        elevation: 1.0,
                                        color: lightGreySliderColor,
                                        onPressed: () => () { FeatureDiscovery.clearPreferences(context,
                                          const <String>{ 'favorites', });
                                           },
                                        child: AutoSizeText("Show New Features Again",
                                            maxLines: 1,
                                            style: Theme.of(context)
                                                .textTheme
                                                .subtitle2)),
                                  ),

But it didn't seem to show again. Any idea how to show them again?

Is there a way to add a FlatButton, for example, as the tap target? When I tried using, it gets cut since it seems like this library only supports rounded tap targets. I hope it's possible to use it like this: https://github.com/sjwall/MaterialTapTargetPrompt

Hi,

I've been trying to show display a tooltip, but I haven't been able to show the content of the tooltip. I'm not pretty sure if it's a bug. I followed the example app and I think so, it's ok. Even, I tried changing the type of the widget or assigning null to the title and I did not get any complain.

Can anybody give a hand with this please?

What's the best way to implement a "Skip" button in conjunction with the package?

I don't want to use both backgroundDismissible as well as barrierDismissible and instead have a skip button for the user to dismiss the walkthrough.

Just tried upgrading from 0.10.0 to 0.12.0 and receiving this exception:

[VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The method 'where' was called on null.
Receiver: null                                                          
Tried calling: where(Closure: (String) => bool)                         
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)    
#1      Bloc._alreayCompletedSteps (package:feature_discovery/src/foundation/bloc.dart:159:10)
<asynchronous suspension>                                               
#2      Bloc.discoverFeatures (package:feature_discovery/src/foundation/bloc.dart:111:28)
#3      FeatureDiscovery.discoverFeatures (package:feature_discovery/src/foundation/feature_discovery.dart:32:24)
#4      _HomeScreenState.initState.<anonymous closure> (package:kozzeted/screens/home_screen.dart:65:24)
#5      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
#6      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1060:9)
#7      SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:968:5)
#8      _rootRun (dart:async/zone.dart:1184:13)                         
#9     <…>  

It appears that _alreayCompletedSteps is trying to reference _steps before it has been initialized.

Oh, and I presume _alreayCompletedSteps should be _alreadyCompletedSteps .

See the gif. On the first load the step gets instantly dismissed after that it works like advertised.

What could be the issue?
Edit: After adding a delay of 300ms it renders correctly but this cant be right.

I added two feature and also my DescribedFeatureOverlays have allowShowingDuplicate: true but only first feature is shown, next feature doesn't show.

It seems that dismissing the step by tapping the barrier rather than the tap target does not complete the step.

In my case we want the step to be completed regardless of where the user taps. Could this be added?

Hi,

I have set onDismiss: () async => false, to disable dismissing the feature discovery.

Problem is that if I first tap outside the feature overlay area first it works as expected and the feature overlay is not dismissed but later when I tap on the main icon button to complete the feature overlay it does not respond.

If I first tap on the icon button to complete the feature it moves forward to the next step. But in the next step if I again perform the above steps on the second step the same problem appears.

I am using Feature Discovery version 0.6.1 on Android.

Steps:

1. Create a DescribedFeatureOverlay with onDismiss: () async => false
2. When the app is running and feature discovery is displayed, Tap outside the overlay area to dismiss the overlay (Overlay will not dismiss)
3. Now tap on the icon button to complete the discovery. This time the discovery will not complete.

It runs only when app start for the first time after that i have to clear the cache to run it again

Hello, i LOVE your package but i need your help because it's not ready for production.

On dismiss the package is ready to display the overlay but never does, when i stack another page on top of the navigation stack it bugs, it's quite problematic.

Please tell me how we can get rid of some of these bugs.

I have this code

 var isLastStepCompleted =
          await FeatureDiscovery.hasPreviouslyCompleted(context, 'some_key');

but debugger never goes through I mean value is never returned.

Hello,
Is it possible to disable the ability to dismiss the discovery?

So first off, thank you! Love the package.

As I was starting to use it, I applied it to a flat button with text. My first issue was changing the text color, easy. Then I noticed that with the pulsating, the text that I had put in the flat button tapTarget grew and shrink too! Definitely not what I wanted. ;)

So then I thought "ugh" this seems to work well with icons, but not text. So I made an empty container and the pulsating tapTarget was looking good, but you couldn't see the text behind it now. So then I figured why not use an opacity of say 0x44 on the background color. PERFECT!

              DescribedFeatureOverlay(
                featureId: 'error_report', 
                tapTarget: Container(width: 50),
                title: Text('Error Report'),
                description: Text('This tab will show all device communication errors for your site.'),
                backgroundColor: Theme.of(context).primaryColor,
                targetColor: colorizedMenuColorTransparent,
                textColor: Colors.transparent,
                child: FlatButton(
                  onPressed: () => _swapTab('device_errors'),
                  child: Text(
                    "ERRORS",
                    style: Theme.of(context).textTheme.headline6,
                  ),
                ),
              ),

Now I get my pulsing target, but it shows the white text flat button that's below it. Not sure but I think it would help others to mention this somehow in the README. You don't need the target to be the same as the true child, and you can lower opacity to show what's behind the pulsing target.

I guess one thing I still have to figure out, can I make the tap target and the instructions always non overlapping?

Thanks,
Justin

Description

All dependencies are migrated to null safety. So we should migrate this package to null safety.

Resources

• How to migrate Dart packages to null safety
• Announcing Dart null safety beta

Feature request - Full screen background.

At present the background is circle in share and it is limited to an area. I am trying to add a full screen overlay but there is no option for that.
Could you look into this ?

When onComplete returns false, the overlay stays on screen, but the bloc doesn't know that and opens the following ones.

Hi, I'm currently working with version 0.10.0. I'm implementing a button to dismiss all the next steps, when the function is executed dismiss all the steps as expected. But after that, when discoverFeatures is called again, run these steps again.

Maybe is the behavior expected, but this can be a new feature for a button to complete all the steps and not showing again.

Regards.

display location tag needed like top left, top right, bottom left, in my scenario Tap and swipe right-left is at the same place discovery doesn't change the location while displaying

we need a property to force display at one position or preferred posisition

My app has an AdMob at the bottom, a native component that's always on top. Because of that, I wrap everything else inside Padding:

Padding(
	child: _inside(),
	padding: paddingForAdMob(ctx),
),

The widget I want to showcase is inside _inside(), but this library seems to ignore the padding:

As you can see, the description is heavily cropped.

How do I make DescribedFeatureOverlay to honor the padding, or at least, shift the text up?

Wonderful package, i love it.

I am using it in a web project, so if it's not under support, i fuly understand.

My issue is aesthetic, in that the tapIcon is being rendered in the middle of the element, while the list tile is left aligned. Looks weird that's all.

I was hoping someone can pitch in if they encountered similar issues.

My problem:
I would like to add a nice "App tour" with feature_discovery in a prod app.
But sometimes a popup (network issue dialog, or permission dialog..) can appear between the page currently displayed and the FeatureDiscovery overlay, so it is impossible to dismiss it until the user skip/finish the FeatureDiscovery tour. Which ruins the user experience..

I've been thinking about a few solutions but I don't which would be the best:

1. Create a dialog service to gather all custom dialogs. The service would be responsible to display the popup or not depending on a Feature overlay visibility.
   cons: this solution does not cover the cases where external package wants to display popup/dialog.

2. Launch the FeatureDiscovery tour on top of a mocked app, with fewer unexpected popups.
   cons: It would require a lot of work.

3. Find a way to override the MaterialApp Navigator overlay in a way that FeatureDiscovery overlay are displayed in it. I don't know yet if it feasible or not.

Is anyone has experienced the same problem ?
Any advice is welcome :)
Thanks

Great work on this package! The only thing I can't seem to get working is to have the bottom navigation bar display the feature discovery overlay since I can't return a Widget type as BottomNavigationBar requires its items to be of type BottomNavigationBarItem, which DescribedFeatureOverlay is not:

Scaffold(
  [...]
  bottomNavigationBar: BottomAppBar(
    [...]
    child: BottomNavigationBar(
      [...]
      items: [
        DescribedFeatureOverlay( // This does not work because items requires type BottomNavigationBarItem
          [...]
          child: BottomNavigationBarItem(
            icon: Icon(item.icon),
            label: item.title,
          ),
        ),
      ],
    ),
  ),
);

The valid code would be like this:

Scaffold(
  [...]
  bottomNavigationBar: BottomAppBar(
    [...]
    child: BottomNavigationBar(
      [...]
      items: [
        BottomNavigationBarItem( // need to wrap this with DescribedFeatureOverlay
          icon: Icon(item.icon),
          label: item.title,
        ),
      ],
    ),
  ),
);

I've been trying for so long now to find a solution to this.
How can I wrap the BottomNavigationBarItem with the DescribedFeatureOverlay?
Is this a limitation of Flutter or is there a way of doing this?

Is there any way, I can interact with the DescribedFeatureOverlay and/ or its contents in an integration test? I try to get Widgets under tapTarget and description using find.byValueKey but I don't get any results.

My feature discovery fires when the user spams a certain button
When he spams that button the feature discovery appears but since he is spamming the button he presses on the feature tap target and the feature disappears.
I want to disable the feature tap target for a small period of time to ensure the user have read the feature discovery

Approach ##1: I set onComplete to return a boolean variable and after 1.5 seconds of the feature firing change the variable's value
Problem: onComplete is called only once so if it was fired first time with return value of false, it won't be fired again no matter what.

Approach ##2: Use AbsorbPointer to absorb all touch events of the Feature overlay
Problem: I don't know why but AbsorbPointer doesn't work with the Feature overlay (my theory is because that the widget is overlayed on top of the MaterialApp and not my current context widget)(placing an AbsorbPointer on top my material app is not an option!)

I am open to any suggestions

Thanks in advance!

I tried to display DescribedFeatureOverlay to the widget locates on the middle left of the screen.

prefixIcon: DescribedFeatureOverlay(
  featureId: 'date',
  tapTarget: Icon(Icons.calendar_today),
  contentLocation: ContentLocation.above,
  overflowMode: OverflowMode.clipContent,
  title: Text('Date'),
  description:
      Text('Choose the date from calendar'),
  child: Icon(Icons.calendar_today),
),

In my scenario after dismissing the 1st one needs to fire 2nd feature. I want to dismiss the need to work the same as onComplete. Total 4 features I have

Added 4 features on the same screen but different position, showing only one rest 3 is not displaying. Is there any way to check why it's not showing?

Upgrade provider to version 4.0.0 to work with Flutter 1.12.1

Hi! Love this plugin. Wanted to see if you'd be willing to add an option for dismissing the overlay by tapping on the color. On smaller screens especially, the colored region often takes up a majority of the screen and make it hard to tap out. Thanks!