Flutter引导页插件flutter_sliding_tutorial的使用

Cleveroad引入了适用于Flutter的滑动教程库

嘿，大家好！希望你们还没有开始为Flutter应用开发教程，因为我们已经完成了你的一部分工作。别担心，我们这样做都是出于良好的动机。我们的目标是帮助你快速而简单地创建一个滑动教程。经过一些努力，成果终于来了！一个简单的Flutter Sliding Tutorial库现在可以为你所用。

你还可以观看我们在YouTube上的滑动教程演示视频（高清质量）：

滑动教程演示视频

这项发明旨在简化结构设计，但不会限制你的想象力。我们考虑到了适用性方面，所以你的应用在其他Flutter元素中不会显得格格不入。

应用的视差效果将使你的产品展示看起来像Google应用教程一样。

你需要做的就是：

1. 为教程的每个屏幕创建背景设计（移动设计协助）
2. 为教程的每个屏幕创建图标
3. 按照以下说明操作

全面文档

设置

在你的Flutter项目的pubspec.yaml文件中，添加以下依赖：

dependencies:
  ...
  flutter_sliding_tutorial: "^2.0.0+1"

在你的库中添加以下导入：

import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';

更多信息

查看快速入门指南。

变更日志

查看变更历史记录。

支持

如果你对使用此教程有任何问题，请通过电子邮件联系我们的支持团队：info@cleveroad.com（邮件主题：“滑动教程：Flutter。支持请求。”）

或者

• 访问Cleveroad.com
• 关注我们的Facebook账户
• 关注我们的Twitter账户
• 关注我们的Google+账户

许可证

    The MIT License (MIT)

    Copyright (c) 2021 Cleveroad

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.

完整示例代码

下面是使用flutter_sliding_tutorial插件的一个完整示例代码：

import 'package:example_flutter_sliding_tutorial/sliding_tutorial.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';
import 'package:flutter_svg/flutter_svg.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: AppScrollBehavior(),
      home: const ExamplePage(),
    );
  }
}

class AppScrollBehavior extends MaterialScrollBehavior {
  [@override](/user/override)
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

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

  [@override](/user/override)
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final ValueNotifier<double> notifier = ValueNotifier(0);
  final _pageCtrl = PageController();
  int pageCount = 6;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Stack(
        children: <Widget>[
          /// [StatefulWidget] with [PageView] and [AnimatedBackgroundColor].
          SlidingTutorial(
            controller: _pageCtrl,
            pageCount: pageCount,
            notifier: notifier,
          ),

          /// Separator.
          Align(
            alignment: const Alignment(0, 0.85),
            child: Container(
              width: double.infinity,
              height: 0.5,
              color: Colors.white,
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios_rounded,
                color: Colors.white,
              ),
              onPressed: () {
                _pageCtrl.previousPage(
                  duration: const Duration(milliseconds: 600),
                  curve: Curves.linear,
                );
              },
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: IconButton(
              icon: const Icon(
                Icons.arrow_back_ios_rounded,
                color: Colors.white,
                textDirection: TextDirection.rtl,
              ),
              onPressed: () {
                _pageCtrl.nextPage(
                  duration: const Duration(milliseconds: 600),
                  curve: Curves.linear,
                );
              },
            ),
          ),

          /// [SlidingIndicator] for [PageView] in [SlidingTutorial].
          Align(
            alignment: const Alignment(0, 0.94),
            child: SlidingIndicator(
              indicatorCount: pageCount,
              notifier: notifier,
              activeIndicator: const Icon(
                Icons.check_circle,
                color: Color(0xFF29B6F6),
              ),
              inActiveIndicator: SvgPicture.asset(
                'assets/hollow_circle.svg',
              ),
              inactiveIndicatorSize: 14,
              activeIndicatorSize: 14,
            ),
          )
        ],
      )),
    );
  }
}