# flutter_intro
**Repository Path**: willow123/flutter_intro
## Basic Information
- **Project Name**: flutter_intro
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-07
- **Last Updated**: 2021-10-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# flutter_intro
[](https://pub.dartlang.org/packages/flutter_intro)
A better way for new feature introduction and step-by-step users guide for your Flutter project.
Automatically adapt when the device screen orientation is switched.
## Usage
To use this package, add `flutter_intro` as a [dependency in your pubspec.yaml file](https://flutter.dev/docs/development/packages-and-plugins/using-packages).
### Init
```dart
import 'package:flutter_intro/flutter_intro.dart';
Intro intro = Intro(
/// You can set it true to disable animation
noAnimation: false,
/// The total number of guide pages, must be passed
stepCount: 4,
/// Click on whether the mask is allowed to be closed.
maskClosable: true,
/// When highlight widget is tapped.
onHighlightWidgetTap: (introStatus) {
print(introStatus);
},
/// The padding of the highlighted area and the widget
padding: EdgeInsets.all(8),
/// Border radius of the highlighted area
borderRadius: BorderRadius.all(Radius.circular(4)),
/// Use the default useDefaultTheme provided by the library to quickly build a guide page
/// Need to customize the style and content of the guide page, implement the widgetBuilder method yourself
/// * Above version 2.3.0, you can use useAdvancedTheme to have more control over the style of the widget
/// * Please see https://github.com/tal-tech/flutter_intro/issues/26
widgetBuilder: StepWidgetBuilder.useDefaultTheme(
/// Guide page text
texts: [
'Hello, I\'m Flutter Intro.',
'I can help you quickly implement the Step By Step guide in the Flutter project.',
'My usage is also very simple, you can quickly learn and use it through example and api documentation.',
'In order to quickly implement the guidance, I also provide a set of out-of-the-box themes, I wish you all a happy use, goodbye!',
],
/// Button text
buttonTextBuilder: (curr, total) {
return curr < total - 1 ? 'Next' : 'Finish';
},
),
);
```
### Bind globalKey to widgets that need to be guided
The `intro` object in the first step contains the `keys` property, and `keys` is a `globalKey` array of length `stepCount`. Just bind the `globalKey` in the array to the corresponding component.
```dart
Placeholder(
/// the first guide page is the first item in the binding keys
key: intro.keys[0]
)
```
### Run
That's it!
```dart
intro.start(context);
```
## Custom widgetBuilder method
If you need to completely customize the style and content of the guide page, you need to implement the `widgetBuilder` method yourself.
```dart
final Widget Function(StepWidgetParams params) widgetBuilder;
```
This method will be called internally by `flutter_intro` when the intro page appears,
and will pass some data on the current page in the form of parameters `StepWidgetParams`,
and finally render the component returned by this method on the screen.
```dart
class StepWidgetParams {
/// Return to the previous guide page method, or null if there is none
final VoidCallback onPrev;
/// Enter the next guide page method, or null if there is no
final VoidCallback onNext;
/// End all guide page methods
final VoidCallback onFinish;
/// Which guide page is currently displayed, starting from 0
final int currentStepIndex;
/// Total number of guide pages
final int stepCount;
/// The width and height of the screen
final Size screenSize;
/// The width and height of the highlighted component
final Size size;
/// The coordinates of the upper left corner of the highlighted component
final Offset offset;
}
```
`StepWidgetParams` provides all the parameters needed to generate the guide page.
The theme provided by default is also based on this parameter to generate the guide page.
## Troubleshoot
Q1. What if the highlighted area is not displayed completely?
A1. That's because Intro provides 8px padding by default.
We can change it by setting the value of padding.
```dart
intro = Intro(
...,
/// Set it to zero
padding: EdgeInsets.zero,
);
```
Q2. Can I set different configurations for each step?
A2. Above version `0.4.x`, you can set single or multiple step settings(padding & borderRadius) through setStepConfig and setStepsConfig.
```dart
intro.setStepConfig(
1,
padding: EdgeInsets.symmetric(
vertical: -5,
horizontal: -8,
),
);
intro.setStepsConfig(
[0, 1],
borderRadius: BorderRadius.all(
Radius.circular(
16,
),
),
);
```
Q3. Can I make the highlight area smaller?
A3. You can do it by setting padding to a negative number.
```dart
intro.setStepConfig(
1,
padding: EdgeInsets.symmetric(
vertical: -10,
horizontal: -8,
),
);
```
Q4. How can I manually destroy the guide page, such as the user pressing the back button?
A4. Above version `0.5.x`, you can call the dispose method of the intro instance.
Notice: You can call the getStatus method only above version `2.1.0`.
```dart
WillPopScope(
child: Scaffold(...),
onWillPop: () async {
// sometimes you need get current status to make some judgements
IntroStatus introStatus = intro.getStatus();
if (introStatus.isOpen) {
// destroy guide page when tap back key
intro.dispose();
return false;
}
return true;
},
)
```
Q5: How to use in the web environment?
A5: Due to [this bug](https://github.com/flutter/flutter/issues/69849) in Flutter, it is temporarily not supported for use on the Web.(Update: It works in Flutter 2.0+)
## Example
Please check the example in `example/lib/main.dart`.