feature_discovery 0.4.1

feature_discovery #

A flutter package that implements material design feature discovery

Installing #

For installing this lib add below line to you'r dependency section in pubspec.yaml

    dependencies:
      feature_discovery: ^0.4.0

Then run flutter pub get to retrieve package

Using #

For using this library first add featureDiscovery to material app builder property like that

return MaterialApp(
      title: 'Feature Discavery',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, child) {
        return FeatureDiscovery( // adding feature discovery at this point make it available to all pages
          child: child,
        );
      },
      home: MyHomePage(title: 'Flutter Feature Discavery'),
    );

Note : #

Adding feature discovery at this point make it available to all pages

Then wrap you'r desired widget with DescribedFeatureOverlay widget like that :

   DescribedFeatureOverlay(
                featureId: 'featureId1',
                icon: Icons.print,
                color: Colors.purple,
                contentLocation: ContentOrientation.below, // look at note 
                title: 'Just how you want it',
                description:
                    'Tap the menu icon to switch account, change setting & more.Tap the menu icon to switch account, change setting & more.',
                child: IconButton(
                  icon: Icon(Icons.print),
                ),
              ),

Then in initState method of you'r widget call

    WidgetsBinding.instance.addPostFrameCallback((_) {
      FeatureDiscovery.discoverFeatures(
        context,
        ['featureId1'],
      );
    });

Note #

contentLocation : #

we use this property for placing the content text in proper position when 
lib can't do it (because of text width and height measurement  issue in flutter )

ContentOrientation.below : move content to  below of target
ContentOrientation.above : move content to above of target
ContentOrientation.trivial : let lib decide

Bonus #

When you'r desired target is in scrollable content and is hidden when the feature discovery runs
you can use ``` EnsureVisible ``` widget like that

```
   var  ensureKey2 = GlobalKey<EnsureVisibleState>();
   DescribedFeatureOverlay(
                featureId: 'id',
                icon: Icons.drive_eta,
                color: Colors.green,
                doAction: (f) {
                  // do what you want ...
                  f();
                },
                prepareAction: (done) {
                  WidgetsBinding.instance.addPostFrameCallback((_) {
                    ensureKey2.currentState.ensureVisible(); // this line scroll to target before feature discovery 
                    done();
                  });
                },
                title: 'Test text',
                description:
                    'This text is just for test and we dont care about it at all.',
                child: EnsureVisible(
                  key: ensureKey2,
                  child: Text(
                    'Custom text',
                  ),
                ),
              ),

```

Thank you mattcarroll for your awesome video about feature discovery

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

[0.0.1]

init release.

[0.1.0]

applied pub Health suggestions

[0.1.1]

applied pub Health suggestions

[0.2.0]

add EnsureVisible widget to scroll to target when we are in scrollable container

[0.3.0]

consider landscape and portrait orientation in DescribedFeatureDiscoveryWidget

[0.4.0]

ContentOrientation added

[0.4.1]

fixed animation bug's

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  feature_discovery: ^0.4.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:feature_discovery/feature_discovery.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jul 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin