Flutter新用户引导插件onboarding_plus的使用

本包提供了轻松创建引导页面的功能。

特性

您可以编辑颜色和文本样式。

图片1	图片2	GIF

开始使用

在pubspec.yaml文件中添加最新版本的onboarding_plus。

使用方法

在应用主体中调用OnboardingViewer()小部件。

[@override](/user/override)
Widget build(BuildContext context) {
  return OnboardingViewer(
    pageList: onboardingList,
    pageWidth: MediaQuery.of(context).size.width, 
    pageHeight: MediaQuery.of(context).size.height, 
    backgroundColor: Colors.black,
    skipButtonColor: Colors.purple,
    skipButtonTextStyle: const TextStyle(color: Colors.white),
    nextButtonTextStyle: const TextStyle(color: Colors.white),
    doneButtonTextStyle: const TextStyle(color: Colors.white),
    deactiveDotColor: Colors.black,
    activatedDotColor: Colors.purple,
    nextButtonColor: Colors.purple,
    onPressedSkip: onPressedSkip,
    onPressedDone: onPressedDone,
    dotSize: Size(12, 12),
    bottomPadding: 110, 
    topPadding: 0,
    borderColor: Colors.purple,
    borderWidth: 1,
  );
}

完整示例

以下是一个完整的示例，展示了如何使用onboarding_plus插件创建一个引导页面。

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "Title",
      debugShowCheckedModeBanner: false,
      home: OnboardingPage(),
    );
  }
}

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

  [@override](/user/override)
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  List<dynamic> onboardingList = const [
    Onboarding1(),
    Onboarding1(),
  ];

  Future<void> onPressedSkip() async {}

  Future<void> onPressedDone() async {}

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OnboardingViewer(
      isSkipShow: false,
      skipText: "Skip",
      doneText: "Done",
      nextText: "Next",
      nextBorderRadius: BorderRadius.circular(5),
      skipBorderRadius: BorderRadius.circular(5),
      pageList: onboardingList,
      pageWidth: MediaQuery.of(context).size.width, //context.width,
      pageHeight: MediaQuery.of(context).size.height, //context.height,
      backgroundColor: Colors.green,
      skipButtonColor: Colors.purple,
      deactiveDotColor: Colors.black,
      activatedDotColor: Colors.purple,
      nextButtonColor: Colors.purple,
      borderColor: Colors.purple,
      skipButtonTextStyle: const TextStyle(color: Colors.white),
      nextButtonTextStyle: const TextStyle(color: Colors.white),
      doneButtonTextStyle: const TextStyle(color: Colors.white),
      onPressedSkip: onPressedSkip,
      onPressedDone: onPressedDone,
      dotSize: const Size(12, 12),
      bottomPadding: 30,
      topPadding: 0,
      borderWidth: 1,
    );
  }
}

class Onboarding1 extends StatelessWidget {
  const Onboarding1({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: const [
        SizedBox(height: 80),
        Text("Industry. Lorem Ipsum"),
        SizedBox(height: 40),
        Text("unknown printer took a galley of type and scrambled it to make"),
        SizedBox(height: 40),
        FlutterLogo(size: 100),
        SizedBox(height: 40),
      ],
    );
  }
}