Flutter引导页插件introduction的使用
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
用于自定义底部圆点的样式。
你可以根据需要进一步自定义这些页面,例如更改按钮样式、添加动画效果等。