Flutter引导页插件feature_intro的使用

Flutter引导页插件feature_intro的使用

特性

一个简单的库,用于创建功能介绍以简化开发工作。

开始使用

首先,创建一个自定义的引导页键列表:

enum AppFeatureIntro {
  firstStep(FeatureIntroStepKey(key: Key("firstStep"))),
  secondStep(FeatureIntroStepKey(key: Key("secondStep"))),
  thirdStep(FeatureIntroStepKey(key: Key("thirdStep")));

  final FeatureIntroStepKey key;

  const AppFeatureIntro(this.key);
}

然后,在MaterialApp中创建一个FeatureIntro小部件:

Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'Flutter Demo',
        theme: ThemeData(
            useMaterial3: true,
        ),
        builder: (context, child) => FeatureIntro(controller: FeatureIntroController(), child: Container(child: child)));
}

使用方法

例如,要开始使用引导页:

FeatureIntro.of(context).start(keys: [
    AppFeatureIntro.firstStep.key,
    AppFeatureIntro.secondStep.key,
    AppFeatureIntro.thirdStep.key
]);

例如,初始化步骤内容:

FeatureIntroStep(
    controller: FeatureIntro.of(context).controller,
    stepKey: AppFeatureIntro.thirdStep.key,
    highlightInnerPadding: 5,
    contentOffset: const Offset(0, 10),
    content: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Center(
            child: TextButton(
                onPressed: () {
                    FeatureIntro.of(context).controller.close();
                },
                child: const Text("Press me close!")),
        ),
    ),
    child: OutlinedButton(
        style: OutlinedButton.styleFrom(backgroundColor: Colors.white),
        onPressed: () {
            FeatureIntro.of(context).start(keys: [
                AppFeatureIntro.firstStep.key,
                AppFeatureIntro.secondStep.key,
                AppFeatureIntro.thirdStep.key
            ]);
        },
        child: const Text("Start intro")),
)

例如,转到下一步:

FeatureIntro.of(context).controller.next();

例如,回到上一步:

FeatureIntro.of(context).controller.previous();

例如,关闭引导页:

FeatureIntro.of(context).controller.close();

完整示例代码

以下是一个完整的示例代码,展示了如何在应用中集成feature_intro插件:

import 'package:feature_intro/feature_intro.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter/material.dart';

part 'page/first_page.dart';
part 'page/second_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

enum AppFeatureIntro {
  firstStep(FeatureIntroStepKey(key: Key("firstStep"))),
  secondStep(FeatureIntroStepKey(key: Key("secondStep"))),
  thirdStep(
      FeatureIntroStepKey(key: Key("thirdStep"), initStepAfterStart: true));

  final FeatureIntroStepKey key;

  const AppFeatureIntro(this.key);
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'Flutter Demo',
        theme: ThemeData(
          useMaterial3: true,
        ),
        routerConfig: GoRouter(
          routes: [
            GoRoute(
              path: "/",
              builder: (context, state) => const FirstPage(title: 'My First Page'),
            ),
            GoRoute(
              path: "/second",
              builder: (context, state) => const SecondPage(title: 'My Second Page'),
            )
          ],
        ),
        builder: (context, child) => FeatureIntro(
              controller: FeatureIntroController(),
              child: Container(
                child: child,
              ),
            ));
  }
}

更多关于Flutter引导页插件feature_intro的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter引导页插件feature_intro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个使用Flutter引导页插件feature_intro的示例代码。这个示例展示了如何在一个Flutter应用中集成并使用feature_intro插件来创建引导页。

首先,确保在你的pubspec.yaml文件中添加feature_intro依赖:

dependencies:
  flutter:
    sdk: flutter
  feature_intro: ^0.2.0  # 请检查最新版本号并替换

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter项目中创建一个引导页。以下是一个完整的示例代码:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Feature Intro Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _hasShownIntro = false;

  @override
  void initState() {
    super.initState();
    // 这里可以根据需要判断是否展示引导页,例如首次启动时展示
    _hasShownIntro = false; // 假设这是首次启动
  }

  @override
  Widget build(BuildContext context) {
    if (!_hasShownIntro) {
      return FeatureIntro(
        steps: [
          FeatureIntroStep(
            title: "Welcome!",
            description: "This is the first slide of the introduction.",
            image: Image.asset('assets/images/slide1.png'), // 使用你的图片资源
            backgroundDecoration: BoxDecoration(color: Colors.white),
            footer: TextButton(
              onPressed: () => Navigator.of(context).pop(), // 跳过按钮
              child: Text('Skip'),
            ),
          ),
          FeatureIntroStep(
            title: "Feature 1",
            description: "Learn about our first feature!",
            image: Image.asset('assets/images/slide2.png'),
            footer: ElevatedButton(
              onPressed: () {
                // 处理点击继续按钮的逻辑
                Navigator.of(context).pop(); // 继续到下一步
              },
              child: Text('Next'),
            ),
          ),
          FeatureIntroStep(
            title: "Feature 2",
            description: "Discover our second feature!",
            image: Image.asset('assets/images/slide3.png'),
            footer: ElevatedButton(
              onPressed: () {
                // 处理点击完成按钮的逻辑
                Navigator.of(context).popAndPushNamedAndRemoveUntil(
                  '/home', // 目标路由
                  (Route<dynamic> route) => false, // 移除所有之前的路由
                );
              },
              child: Text('Done'),
            ),
          ),
        ],
        onDone: () {
          // 完成所有步骤后的回调
          setState(() {
            _hasShownIntro = true;
          });
        },
        onSkip: () {
          // 跳过引导页的回调
          setState(() {
            _hasShownIntro = true;
          });
        },
        showSkipButton: true, // 是否显示跳过按钮
        skipFlex: 0, // 跳过按钮的布局比例(相对于继续按钮)
        nextFlex: 2, // 继续按钮的布局比例
        doneFlex: 2, // 完成按钮的布局比例
        dotSize: 10.0, // 圆点的大小
        activeDotColor: Colors.blue, // 激活状态的圆点颜色
        dotColor: Colors.grey, // 未激活状态的圆点颜色
        dotSpacing: 25.0, // 圆点之间的间距
        showDots: true, // 是否显示圆点指示器
        padding: EdgeInsets.all(16.0), // 引导页内容的内边距
        backgroundColor: Colors.white, // 引导页的背景颜色
        alignment: Alignment.center, // 引导页内容的对齐方式
        imagePadding: EdgeInsets.zero, // 图片的内边距
        shape: RoundedRectangleBorder( // 引导页的形状
          borderRadius: BorderRadius.circular(16),
        ),
      );
    } else {
      return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: Text('Welcome to the Home Page!'),
        ),
      );
    }
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含三个引导页步骤。每个步骤都有一个标题、描述和图片。用户可以通过点击“Next”按钮继续到下一步,点击“Done”按钮完成引导页并进入主页,或者点击“Skip”按钮跳过引导页。

请确保将assets/images/slide1.pngassets/images/slide2.pngassets/images/slide3.png替换为你自己的图片资源,并在pubspec.yaml文件中添加相应的图片资源声明。

这个示例展示了如何使用feature_intro插件来创建和引导用户通过引导页。根据具体需求,你可以进一步自定义引导页的外观和行为。

回到顶部