Flutter引导页插件hp_intro_screen的使用
Flutter引导页插件hp_intro_screen的使用
hp_intro_screen 是一个用于 Flutter 应用的自定义引导页插件，适用于 Android 和 iOS 平台。
特性
展示 hp_intro_screen 引导页。
开始使用
要使用此包，在你的 pubspec.yaml 文件中添加 hp_intro_screen 作为依赖项。
dependencies:
hp_intro_screen: ^版本号
然后运行 flutter pub get 来获取依赖项。
基本用法
以下是一个基本的使用示例：
import 'package:flutter/material.dart';
import 'package:hp_intro_screen/hp_intro_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: '引导页屏幕',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final PageController _pageController = PageController();
int currentIndex = 0;
[@override](/user/override)
Widget build(BuildContext context) {
skip() {
/// 你的跳过代码在这里
}
var items = [
{
'image':
'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
'title': '标题悬挂熊猫',
'description1': '有许多变化',
'description2': 'Lorem Ipsum 的段落可用 aaa',
'description3': '但大多数都遭受了 iiii',
},
{
'image':
'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
'title': '标题2悬挂熊猫',
'description1': '238427834696123867521',
'description2': 'Lorem Ipsum 的段落可用 aaa',
'description3': '但大多数都遭受了 iiii',
},
{
'image':
'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
'title': '标题 Lorem Ipsum',
'description1': '有许多变化',
'description2': 'Lorem Ipsum 的段落可用 aaa',
'description3': '但大多数都遭受了 iiii',
},
{
'image':
'https://media.istockphoto.com/id/1165405371/vector/classic-summer-ice-cream-van.jpg?s=612x612&w=0&k=20&c=t_M5Nq9S7bRKe-lnB0YiCxybHJshFom7vupoT2HL7Lg=',
'title': '标题2 Lorem Ipsum',
'description1': '有许多变化',
'description2': 'Lorem Ipsum 的段落可用 aaa',
'description3': '但大多数都遭受了 iiii',
},
];
void onPressed() {
if (currentIndex < items.length) {
_pageController.animateToPage(currentIndex + 1,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
} else {
// 这里在完成时导航到其他屏幕
}
}
Container buildDots(int index, BuildContext context) {
return Container(
height: 8,
width: 8,
margin: const EdgeInsets.only(right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: currentIndex == index
? const Color(0XFFFC4442)
: const Color(0XFFFC4442).withOpacity(0.3),
),
);
}
return Scaffold(
body: HangingPandaIntro(
pageController: _pageController,
onChange: (int value) {
currentIndex = value;
setState(() {});
},
itemCount: items,
buildOnBoardingPage: (index, slides) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 3,
child: Container(
color: Colors.white,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(100.0)),
color: Color.fromARGB(255, 244, 193, 192),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: AlignmentDirectional.bottomCenter,
width: MediaQuery.of(context).size.width * 0.85,
height: MediaQuery.of(context).size.height * 0.35,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
slides[index].getImage(),
),
fit: BoxFit.cover,
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.025,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(items.length,
(index) => buildDots(index, context)),
),
Container(
height: MediaQuery.of(context).size.height * 0.025,
),
],
),
),
),
),
Expanded(
flex: 2,
child: Container(
width: MediaQuery.of(context).size.width,
color: const Color.fromARGB(255, 244, 193, 192),
child: Container(
decoration: const BoxDecoration(
borderRadius:
BorderRadius.only(topLeft: Radius.circular(100.0)),
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.05,
),
Text(
slides[index].getTitle(),
style: TextStyle(
fontSize:
MediaQuery.of(context).size.height * 0.030,
fontFamily: "Montserrat",
fontWeight: FontWeight.w700,
),
),
Container(
height: MediaQuery.of(context).size.height * 0.01,
),
Padding(
padding: const EdgeInsets.all(20),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: Text(
'${slides[index].getDescriptionOne()}'
'${slides[index].getDescriptionTwo()}'
'${slides[index].getDescriptionThree()}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: MediaQuery.of(context).size.height *
0.017,
fontWeight: FontWeight.w600,
),
)),
),
Container(
height: MediaQuery.of(context).size.height * 0.03,
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.30,
height: MediaQuery.of(context).size.width * 0.1,
child: TextButton(
onPressed: () {
onPressed();
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
const Color(0XFFFC4442)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0),
side: const BorderSide(
color: Color(0XFFFC4442))))),
child: Text(
currentIndex == items.length - 1
? "开始"
: '下一步',
style: TextStyle(
fontSize: MediaQuery.of(context).size.height * 0.018,
color: Colors.white)))),
currentIndex != items.length - 1
? TextButton(
onPressed: skip,
child: Text('跳过',
style: TextStyle(
fontSize:
MediaQuery.of(context).size.height *
0.024,
fontWeight: FontWeight.w700,
color: Colors.black)))
: const SizedBox(),
],
),
),
),
),
],
);
},
),
);
}
}
更多关于Flutter引导页插件hp_intro_screen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter引导页插件hp_intro_screen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
hp_intro_screen 是一个用于在 Flutter 应用中创建引导页的插件。它允许你轻松地创建多页的引导界面，通常用于应用首次启动时向用户展示功能介绍或应用使用方法。
以下是如何在 Flutter 项目中使用 hp_intro_screen 插件的基本步骤：
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 hp_intro_screen 插件的依赖：
dependencies:
flutter:
sdk: flutter
hp_intro_screen: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入包
在 Dart 文件中导入 hp_intro_screen 包：
import 'package:hp_intro_screen/hp_intro_screen.dart';
3. 创建引导页
使用 HpIntroScreen 组件来创建引导页。你可以自定义每一页的内容，包括图片、标题、描述等。
class IntroScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return HpIntroScreen(
pages: [
IntroPage(
title: 'Welcome to My App',
description: 'This is the first page of the intro screen.',
imageUrl: 'https://example.com/image1.png',
),
IntroPage(
title: 'Feature 1',
description: 'Here is a description of the first feature.',
imageUrl: 'https://example.com/image2.png',
),
IntroPage(
title: 'Feature 2',
description: 'Here is a description of the second feature.',
imageUrl: 'https://example.com/image3.png',
),
],
onDone: () {
// 引导页完成后执行的操作，例如跳转到主页面
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
showSkipButton: true,
skipText: 'Skip',
nextText: 'Next',
doneText: 'Get Started',
dotColor: Colors.grey,
activeDotColor: Colors.blue,
);
}
}
4. 导航到引导页
在你的应用启动时，导航到引导页。例如，在 main.dart 中：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Intro Screen',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: IntroScreen(),
);
}
}
5. 自定义引导页
你可以根据需求自定义引导页的样式、颜色、按钮文本等。HpIntroScreen 提供了多种可配置的选项，例如 dotColor、activeDotColor、skipText、nextText、doneText 等。
6. 处理引导页完成事件
在 onDone 回调中，你可以执行引导页完成后的操作，例如跳转到应用的主页面。
7. 运行应用
现在，你可以运行你的 Flutter 应用，查看引导页的效果。
flutter run