Flutter引导页插件onboarding_slider_flutter的使用

Flutter引导页插件onboarding_slider_flutter的使用

onboarding_slider_flutter 是一个用于创建引导页的 Flutter 插件。它允许开发者轻松地为应用添加美观且功能丰富的引导页面。

示例代码

以下是一个完整的示例代码，展示了如何使用 onboarding_slider_flutter 插件来创建引导页：

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

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final PageController _pageController = PageController();

  HomeScreen({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: OnBoard(
        pageController: _pageController,
        // 提供跳过回调或跳过按钮来处理跳过状态
        onSkip: () {
          // print('skipped');
        },
        // 提供完成回调或下一步按钮来处理完成状态
        onDone: () {
          // print('done tapped');
        },
        onBoardData: onBoardData,
        titleStyles: const TextStyle(
          color: Color(0xffFDFDFD),
          fontSize: 24,
          fontWeight: FontWeight.w600,
        ),
        descriptionStyles: const TextStyle(
          fontSize: 16,
          color: Color(0xffF0F0F0),
          fontWeight: FontWeight.w400,
        ),
        pageIndicatorStyle: const PageIndicatorStyle(
          width: 50,
          inactiveColor: Color(0xff9CC2E1),
          activeColor: Color(0xff0A74D7),
          inactiveSize: Size(12, 5),
          activeSize: Size(12, 5),
        ),
        startButton: SizedBox(
          width: 358,
          height: 42,
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(
                const Color(0xff0A74D7),
              ),
            ),
            child: const Text(
              "Get Started",
              style: TextStyle(
                  fontWeight: FontWeight.w600,
                  color: Color(
                    0xfffdfdfd,
                  )),
            ),
            onPressed: () {},
          ),
        ),
        showSkip: true,

        imageWidth: 320,
        imageHeight: 320,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xff0a74d7),
              Color(0xff105DA5),
              Color(0xff144A7D),
              Color(0xff173B5D),
              Color(0xff1B2D3D),
              Color(0xff1D252E),
              Color(0xff1E1F1F),
            ],
          ),
        ),
      ),
    );
  }
}

// 引导数据列表
final List<OnBoardModel> onBoardData = [
  const OnBoardModel(
    title: "Flutter基础：入门指南",
    description: "通过此引导屏幕学习 Flutter 的基础知识",
    image: "assets/images/onboarding_carousel_1.png",
  ),
  const OnBoardModel(
    title: "精通 Flutter：高级技术和技巧",
    description: "通过此高级引导屏幕将你的 Flutter 技能提升到新的水平",
    image: 'assets/images/onboarding_carousel_2.png',
  ),
  const OnBoardModel(
    title: "设计师的 Flutter：创建令人惊叹的用户界面",
    description: "通过此面向设计师的引导屏幕释放你的创造力",
    image: 'assets/images/onboarding_carousel_3.png',
  ),
];

说明

1. 导入包：

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

2. 初始化页面控制器：

   final PageController _pageController = PageController();
   

3. 定义引导数据：

   final List<OnBoardModel> onBoardData = [
     const OnBoardModel(
       title: "Flutter基础：入门指南",
       description: "通过此引导屏幕学习 Flutter 的基础知识",
       image: "assets/images/onboarding_carousel_1.png",
     ),
     const OnBoardModel(
       title: "精通 Flutter：高级技术和技巧",
       description: "通过此高级引导屏幕将你的 Flutter 技能提升到新的水平",
       image: 'assets/images/onboarding_carousel_2.png',
     ),
     const OnBoardModel(
       title: "设计师的 Flutter：创建令人惊叹的用户界面",
       description: "通过此面向设计师的引导屏幕释放你的创造力",
       image: 'assets/images/onboarding_carousel_3.png',
     ),
   ];
   

4. 使用 OnBoard 组件：

   return Scaffold(
     body: OnBoard(
       pageController: _pageController,
       onSkip: () {
         // 跳过逻辑
       },
       onDone: () {
         // 完成逻辑
       },
       onBoardData: onBoardData,
       titleStyles: const TextStyle(
         color: Color(0xffFDFDFD),
         fontSize: 24,
         fontWeight: FontWeight.w600,
       ),
       descriptionStyles: const TextStyle(
         fontSize: 16,
         color: Color(0xffF0F0F0),
         fontWeight: FontWeight.w400,
       ),
       pageIndicatorStyle: const PageIndicatorStyle(
         width: 50,
         inactiveColor: Color(0xff9CC2E1),
         activeColor: Color(0xff0A74D7),
         inactiveSize: Size(12, 5),
         activeSize: Size(12, 5),
       ),
       startButton: SizedBox(
         width: 358,
         height: 42,
         child: ElevatedButton(
           style: ButtonStyle(
             backgroundColor: MaterialStateProperty.all<Color>(
               const Color(0xff0A74D7),
             ),
           ),
           child: const Text(
             "Get Started",
             style: TextStyle(
                 fontWeight: FontWeight.w600,
                 color: Color(
                   0xfffdfdfd,
                 )),
           ),
           onPressed: () {},
         ),
       ),
       showSkip: true,
       imageWidth: 320,
       imageHeight: 320,
       decoration: const BoxDecoration(
         gradient: LinearGradient(
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
           colors: [
             Color(0xff0a74d7),
             Color(0xff105DA5),
             Color(0xff144A7D),
             Color(0xff173B5D),
             Color(0xff1B2D3D),
             Color(0xff1D252E),
             Color(0xff1E1F1F),
           ],
         ),
       ),
     ),
   );