1.导入flutter_intro:
效果图
2.极简封装 直接代码搞里头
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter_intro/flutter_intro.dart';
class VipIntro {
final List<String> tips_ary;
VipIntro({this.tips_ary});
Intro intro;
List setps = [];
void starIntro(BuildContext context){
intro = Intro(
/// 总共的引导页数量，必传
stepCount: tips_ary.length,
/// 高亮区域与 widget 的内边距
padding: EdgeInsets.all(1),
/// 高亮区域的圆角半径
borderRadius: BorderRadius.all(Radius.circular(4)),
/// 使用库默认提供的 useDefaultTheme 可以快速构建引导页
/// 需要自定义引导页样式和内容，需要自己实现 widgetBuilder 方法
widgetBuilder: StepWidgetBuilder.useDefaultTheme(
/// 提示文本
texts: tips_ary,
/// 按钮文字
btnLabel: '下一步',
/// 是否在按钮后显示当前步骤
showStepLabel: true,
),
);
this.setps = intro.keys;
Timer(Duration(microseconds: 0), () {
/// start the intro
intro.start(context);
});
}
}
3.简单使用 代码搞里头
class _DDHomePageState extends State<DDHomePage> {
List<String> tip_arys = ['发布商品入口。','个人中心入口' ];
VipIntro _vipIntro;
@override
void initState() {
// TODO: implement initState
_vipIntro = VipIntro(tips_ary: tip_arys);
_vipIntro.starIntro(context);
}
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("哈哈买菜",
style: TextStyle(color: Colors.black),
),
centerTitle: true,
leading: IconButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return DDMinePage("");
}));},
icon: Icon(Icons.person, size: 30, color: Colors.redAccent,),
**//在这里加一个引导步骤2**
key: _vipIntro.setps[1],
),
actions: <Widget>[
],
),
backgroundColor: Color.fromRGBO(245, 245, 245, 1),
body: Stack(
children: <Widget>[
Positioned(child: ListView.builder(
itemBuilder: (context, index) {
if (index == 0){
return DDBannerWidget();
}else if (index == 1) {
return DDHomeCategoryCell() ;
}else {
return DDPCouponGussLikeCell();
}
},
itemCount: 3,
),
left: 0,
right: 0,
top: 0,
bottom: 0,
),
Positioned(
child: DDCreateProductButton(),
**//在这里加一个引导步揍1**
key: _vipIntro.setps[0],
right: 10,
bottom: 60,
width: 60,
height: 60,
)
],
)
);
}
}
