1。先创建个StatefulWidgetclassWelcomePageextendsStatefulWidget{staticconstrouteNamewelcome;overrideWelcomePageStatecreateState()WelcomePageState();}classWelcomePageStateextendsStateWelcomePage{默认显示第一张图intcurrentIndex0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Stack(children:〔图片播放容器PageViewbuildPageView(),底部指示器buildIndicator(),立即体验按钮buildEnterButton()〕,),);} 2。创建PageView来存放图片WidgetbuildPageView(){returnPositioned。fill(child:PageView。builder(itemCount:4,取消边缘弹簧效果physics:ClampingScrollPhysics(),解决图片之间切换产生的短暂背景显示出来allowImplicitScrolling:true,itemBuilder:(context,index){returnImage。asset(assetsimagesguideX{index1}。png,fit:BoxFit。cover,);},onPageChanged:(value){setState((){currentIndexvalue;});},),);} 3。底部指示器圆点WidgetbuildIndicator(){returnPositioned(left:15,right:15,bottom:50,child:Row(mainAxisAlignment:MainAxisAlignment。center,children:〔0,1,2,3〕。map((index){returnbuildDotView(currentIndexindex);})。toList()));}isSelected:用于圆点的宽度WidgetbuildDotView(boolisSelected){returnPadding(padding:constEdgeInsets。all(8。0),具有动画效果的Containerchild:AnimatedContainer(width:isSelected?40:12,height:12,duration:Duration(milliseconds:300),decoration:BoxDecoration(color:Color(0xFFf5ca2b),borderRadius:BorderRadius。circular(6)),),);} 4。创建按钮;添加透明度效果WidgetbuildEnterButton(){returnPositioned(left:0,right:0,bottom:45,child:Row(mainAxisAlignment:MainAxisAlignment。center,children:〔AnimatedOpacity(opacity:currentIndex3?1:0,duration:Duration(milliseconds:300),child:Container(width:130,height:40,child:FlatButton(color:Color(0xFFf5ca2b),shape:OutlineInputBorder(borderRadius:BorderRadius。circular(5),borderSide:BorderSide(width:0,color:Color(0xFFf5ca2b))),child:Text(立即体验,style:TextStyle(fontSize:17)),onPressed:(){print(立即体验);},),),)〕,));}