flutter_tutorial

Description:

flutter tutorial

flutter_tutorial #
Provides a Tutorial API to display tutorial overlay and highlights certain items.
Counter example #
https://player.vimeo.com/video/560306626

Create global keys and pass them to widgets you want to highlight.

static final _buttonKey = GlobalKey();
static final _textKey = GlobalKey();

...
Column(
key: _textKey,
...
FloatingActionButton(
key: _buttonKey,
...
copied to clipboard

Create tutorial entries

Use getBasicRect or getBasicRRect methods to get the area to highlight from the key.
final tutorialEntries = [
ExampleTutorialEntry(
[
RRect.fromRectAndRadius(
getBasicRect(_buttonKey),
const Radius.circular(28),
)
],
'Press the button to increase the counter',
Alignment.center,
),
ExampleTutorialEntry(
[getBasicRRect(_textKey)],
'Counter will be increased here',
Alignment.bottomCenter,
),
];
copied to clipboard

Create tutorial dialog

class TutorialEntryWidget extends StatelessWidget {
const TutorialEntryWidget({Key? key, required this.entry}) : super(key: key);

final ExampleTutorialEntry entry;

@override
Widget build(BuildContext context) {
return Align(
alignment: entry.alignment,
child: SafeArea(
child: Material(
color: Colors.transparent,
child: Text(
entry.text,
style: const TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
),
);
}
}
copied to clipboard

Start the tutorial.

Tutorial().show<ExampleTutorialEntry>(
context,
children: tutorialEntries,
onPressedBehavior: OnPressedBehavior.next,
dialogBuilder: (context, index, next, previous) {
final entry = tutorialEntries[index];
return TutorialEntryWidget(entry: entry);
},
);
copied to clipboard
Other info #
Providing more than 1 widget to highlight #
You can provide more than 1 widget to highlight and it'll still animate without any issues.
OnPressedBehavior #
OnPressedBehavior specifies what action should be taken when pressed outside of the dialog:

close
next
none

next, previous methods in dialogBuilder #
You can use next and previous methods in dialogBuilder to add cutom buttons that skip forward or backwards.
prepareNext #
Place to define any animations before moving to next slide. (useful when using OnPressedBehavior.next).
Creating bigger highlights than widgets #
You can inflate Rect or RRect class to make the highlight area bigger, or deflate them to be smaller if needed without changing the layout of your widgets.
RRect.fromRectAndCorners(
getBasicRect(_text2Key).inflate(10),
);
copied to clipboard

Changing overlay background color and opacity #
Background color and it's opacity can be easily adjusted to your needs.
backgroundColor: Colors.blue,
backgroundMaxOpacity: 0.8,
copied to clipboard