flutter 实现任意页面局部高亮教程操作和教程

flutter 实现任意页面局部高亮教程操作和教程

添加插件

tutorial_coach_mark: 1.2.11

import 'package:flutter/material.dart';
import 'package:tutorial_coach_mark/tutorial_coach_mark.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(home: const HomePage());
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late TutorialCoachMark tutorial;
  final _keyAdd = GlobalKey(),
      _keySearch = GlobalKey(),
      _keyProfile = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => _showTutorial());
  }

  void _showTutorial() {
    tutorial = TutorialCoachMark(
      targets: _createTargets(),
      colorShadow: Colors.black54,
      opacityShadow: 0.7,
      paddingFocus: 8,
      textSkip: '跳过',
      onFinish: () => print('完成'),
      onSkip: () {
        print('跳过');
        return true;
      },
    )..show(context: context);
  }

  List<TargetFocus> _createTargets() => [
        TargetFocus(
          identify: 'add',
          keyTarget: _keyAdd,
          contents: [
            TargetContent(
              align: ContentAlign.bottom,
              builder: (_, __) =>
                  const Text('点击这里添加任务', style: TextStyle(color: Colors.white)),
            )
          ],
        ),
        TargetFocus(
          identify: 'search',
          keyTarget: _keySearch,
          contents: [
            TargetContent(
              align: ContentAlign.top,
              builder: (_, __) =>
                  const Text('快速搜索内容', style: TextStyle(color: Colors.white)),
            )
          ],
        ),
        TargetFocus(
          identify: 'profile',
          keyTarget: _keyProfile,
          contents: [
            TargetContent(
              align: ContentAlign.left,
              builder: (_, __) =>
                  const Text('进入个人中心', style: TextStyle(color: Colors.white)),
            )
          ],
        ),
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('局部高亮教程')),
      floatingActionButton: FloatingActionButton(
        key: _keyProfile,
        onPressed: () => _showTutorial(),
        child: const Icon(Icons.person),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              key: _keyAdd,
              onPressed: () {},
              child: const Text('添加'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              key: _keySearch,
              onPressed: () {},
              child: const Text('搜索'),
            ),
            const SizedBox(height: 40),
            OutlinedButton(
              onPressed: _showTutorial,
              child: const Text('再看一次'),
            ),
          ],
        ),
      ),
    );
  }
}