Flutter引导页插件introduction的使用

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

Flutter引导页插件introduction的使用

引言

introduction 插件允许你创建一个包含图片和文本的轮播图,并且可以与对话框结合使用。

截图

截图 截图 截图

完整示例

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Introduction Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Introduction Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    showIntroduction(); // 初始化时显示引导页
  }

  Future<void> showIntroduction() async {
    await Future.delayed(const Duration(milliseconds: 50)); // 延迟一小段时间以确保页面完全加载
    if (!mounted) return;
    showIntroductionCarousel(
      context: context,
      texts: texts, // 引导页的文字内容
      itemCount: 4, // 轮播图的项目数量
      activeDotColor: active, // 活动点的颜色
      inactiveDotColor: inactive, // 非活动点的颜色
      images: images, // 引导页的图片路径
      confirmMessage: '确认', // 确认按钮的文字
      isNetworkImage: false, // 是否从网络加载图片
    );
  }

  final inactive = const Color.fromRGBO(149, 0, 45, 1); // 非活动点的颜色
  final active = const Color.fromRGBO(33, 104, 121, 1); // 活动点的颜色
  final images = [
    'lib/assets/images/buy.png', // 图片路径
    'lib/assets/images/chat.png',
    'lib/assets/images/book.png',
    'lib/assets/images/image.png',
    'lib/assets/images/image.png',
  ];
  final texts = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit', // 文本内容
    'Nam hendrerit nisi sed sollicitudin pellentesque',
    'Nunc posuere purus rhoncus pulvinar aliquam',
    'Ut aliquet tristique nisl vitae volutpat',
    'Nulla aliquet porttitor venenatis'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Introduction Demo'), // 显示的文字
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用introduction_screen插件来创建引导页的示例代码。这个插件允许你轻松创建包含多个页面的引导页,并支持跳过和完成按钮的自定义行为。

首先,确保你的Flutter项目已经添加了introduction_screen依赖。在pubspec.yaml文件中添加以下依赖:

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

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

接下来,在你的主文件(通常是main.dart)中,你可以按照以下示例代码来创建引导页:

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

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

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

class IntroductionScreenPage extends StatefulWidget {
  @override
  _IntroductionScreenPageState createState() => _IntroductionScreenPageState();
}

class _IntroductionScreenPageState extends State<IntroductionScreenPage> {
  final List<PageViewModel> pages = [
    PageViewModel(
      title: "Welcome!",
      body: "This is the first page of the introduction.",
      image: Image.asset(
        'assets/images/page1.png', // 确保你有这个图片资源
        fit: BoxFit.cover,
      ),
      decoration: PageDecoration(
        titleTextStyle: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
        bodyTextStyle: TextStyle(fontSize: 18),
      ),
    ),
    PageViewModel(
      title: "Features",
      body: "Discover the amazing features of our app.",
      image: Image.asset(
        'assets/images/page2.png', // 确保你有这个图片资源
        fit: BoxFit.cover,
      ),
    ),
    PageViewModel(
      title: "Get Started",
      body: "Ready to begin your journey?",
      image: Image.asset(
        'assets/images/page3.png', // 确保你有这个图片资源
        fit: BoxFit.cover,
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return IntroductionScreen(
      pages: pages,
      onDone: () {
        // 用户点击完成按钮后的操作,例如导航到主页面
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomePage()),
        );
      },
      onSkip: () {
        // 用户点击跳过按钮后的操作,例如直接导航到主页面
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomePage()),
        );
      },
      showSkipButton: true,
      skipFlex: 0,
      nextFlex: 0.5,
      doneFlex: 0.5,
      skip: const Text('Skip'),
      next: const Icon(Icons.arrow_forward),
      done: const Text('Done'),
      dotsDecorator: DotsDecorator(
        size: Size(10.0, 10.0),
        activeSize: Size(20.0, 10.0),
        activeColor: Colors.deepOrange,
        color: Colors.grey,
        spacing: 8.0,
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    );
  }
}

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

在这个示例中,我们创建了一个包含三个页面的引导页。每个页面都有一个标题、描述文字和一张图片。当用户点击“完成”或“跳过”按钮时,应用将导航到主页面(HomePage)。

注意:

  • 确保你在assets文件夹中有相应的图片资源,并在pubspec.yaml中声明它们。
  • PageViewModel类用于定义每个引导页的内容。
  • DotsDecorator用于自定义底部圆点的样式。

你可以根据需要进一步自定义这些页面,例如更改按钮样式、添加动画效果等。

回到顶部