Flutter引导页插件intro_screen_onboarding_flutter的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter引导页插件intro_screen_onboarding_flutter的使用

Flutter Intro Screen Onboarding 是一个帮助你为应用创建引导页的 Flutter 插件。使用这个插件可以让你更快更简单地创建引导页。

动画

动画示例

示例页面 示例页面 示例页面

动画示例

示例项目

在 example 文件夹中有一个示例项目。你可以查看它。否则，继续阅读以快速上手。

使用方法

自定义引导页

import 'package:flutter/material.dart';
import 'package:intro_screen_onboarding/intro_app.dart';

import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatelessWidget {
  final List<Introduction> list = [
    Introduction(
      title: '购买与销售',
      subTitle: '浏览菜单并直接从应用程序下单',
      imageUrl: 'assets/images/onboarding3.png',
    ),
    Introduction(
      title: '配送',
      subTitle: '您的订单将立即被收集',
      imageUrl: 'assets/images/onboarding4.png',
    ),
    Introduction(
      title: '收款',
      subTitle: '在家门口取货并享受美食',
      imageUrl: 'assets/images/onboarding5.png',
    ),
    Introduction(
      title: '完成',
      subTitle: '浏览菜单并直接从应用程序下单',
      imageUrl: 'assets/images/onboarding3.png',
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return IntroScreenOnboarding(
      introductionList: list,
      onTapSkipButton: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          ), // MaterialPageRoute
        );
      },
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter应用中使用intro_screen_onboarding_flutter插件来创建引导页的示例代码。这个插件允许你轻松地为你的应用添加漂亮的引导页。

首先，你需要在你的pubspec.yaml文件中添加这个依赖：

dependencies:
  flutter:
    sdk: flutter
  intro_screen_onboarding_flutter: ^^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的应用中实现引导页。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:intro_screen_onboarding_flutter/intro_screen_page.dart';
import 'package:intro_screen_onboarding_flutter/intro_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: IntroScreenExample(),
    );
  }
}

class IntroScreenExample extends StatefulWidget {
  @override
  _IntroScreenExampleState createState() => _IntroScreenExampleState();
}

class _IntroScreenExampleState extends State<IntroScreenExample> {
  final List<IntroScreenPage> pages = [
    IntroScreenPage(
      title: "Welcome!",
      description: "This is the first page of the intro screen.",
      image: Image.asset('assets/images/image1.png'),  // 请确保你的assets文件夹中有这张图片
      backgroundColor: Colors.blue,
    ),
    IntroScreenPage(
      title: "Features",
      description: "Discover our amazing features!",
      image: Image.asset('assets/images/image2.png'),  // 请确保你的assets文件夹中有这张图片
      backgroundColor: Colors.green,
    ),
    IntroScreenPage(
      title: "Get Started",
      description: "Start using our app today!",
      image: Image.asset('assets/images/image3.png'),  // 请确保你的assets文件夹中有这张图片
      backgroundColor: Colors.orange,
      showSkipButton: false,  // 在最后一页不显示跳过按钮
    ),
  ];

  void onDonePressed() {
    // 当用户完成引导页后，你可以导航到主屏幕
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => HomeScreen()),
    );
  }

  void onSkipPressed() {
    // 当用户点击跳过按钮时，你也可以导航到主屏幕
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => HomeScreen()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntroScreen(
        pages: pages,
        onDone: onDonePressed,
        onSkip: onSkipPressed,
        showSkipButton: true,  // 在前两页显示跳过按钮
        skipFlex: 0,
        nextFlex: 5,
        doneText: "Done",
        skipText: "Skip",
        dotShape: DotShape.circle, // 你可以选择其他形状，比如 DotShape.square
        dotSize: 10.0,
        dotSpacing: 25.0,
        activeDotColor: Colors.white,
        dotColor: Colors.grey,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Screen"),
      ),
      body: Center(
        child: Text("Welcome to the Home Screen!"),
      ),
    );
  }
}

在这个示例中，我们创建了三个引导页，每个页面都有一个标题、描述、图片和背景颜色。当用户完成引导页时，点击“Done”按钮会导航到主屏幕（HomeScreen）。如果用户点击“Skip”按钮，也会导航到主屏幕。

请确保你的assets文件夹中有image1.png, image2.png, 和 image3.png这三张图片，或者在Image.asset中替换为你自己的图片路径。

这个示例展示了如何使用intro_screen_onboarding_flutter插件来创建一个基本的引导页流程。你可以根据需要进一步自定义和扩展这个示例。

回到顶部