Onboarding Screen 是您在加载启动画面后可以在大多数应用程序中看到的最流行的界面之一。 Onboarding Screen 提供了应用程序的简短概述。 Onboarding Screen 主要由三到四个布局组成,当我们单击 Next 时,这些布局会滑动。在本文中,我们将看到如何在Flutter App 中实现 Onboarding Screen。
首先,在pubspec.yaml 文件的资产部分添加您将使用的图像。
Dart
assets:
- images/slider1.jpg
- images/slider2.png
- images/slider3.jpeg
Dart
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold();
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
// Column created
body: Column(
children: [
Expanded(
// PageView Builder
child: PageView.builder(
scrollDirection: Axis.horizontal,
onPageChanged: (value){
setState(() {
currentIndex = value;
});
},
itemCount: slides.length,
itemBuilder: (context, index){
// Contents of Slider that we
// created in Modal Class
return Slider(
image: slides[index].getImage(),
title: slides[index].getTitle(),
description: slides[index].getDescription(),
);
}
),
),
// Container created for dots
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(slides.length, (index) => buildDot(index, context),
),
),
),
Dart
Container buildDot(int index, BuildContext context){
// Another Container returned
return Container(
height: 10,
width: currentIndex == index ? 25 : 10,
margin: EdgeInsets.only(right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.green,
),
);
}
}
Dart
Container(
height: 60,
margin: EdgeInsets.all(40),
width: double.infinity,
color: Colors.green,
// Button
child: FlatButton(
child: Text(
currentIndex == slides.length - 1 ? "Continue": "Next"),
onPressed: (){
if(currentIndex == slides.length - 1){
// Navigate to next screen
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
);
}
_controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
textColor: Colors.white,
// Border radius to button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
Dart
class Slider extends StatelessWidget {
String image,title,description;
//Constructor created
Slider({this.image, this.title, this.description});
@override
Widget build(BuildContext context) {
return Container(
// column containing image
// title and description
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: AssetImage(image)),
SizedBox(height: 20),
Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),),
SizedBox(height: 12),
Text(description),
SizedBox(height: 25),
],
),
);
}
}
Dart
class SliderModel{
String image;
String title;
String description;
// Constructor for variables
SliderModel({this.title, this.description, this.image});
void setImage(String getImage){
image = getImage;
}
void setTitle(String getTitle){
title = getTitle;
}
void setDescription(String getDescription){
description = getDescription;
}
String getImage(){
return image;
}
String getTitle(){
return title;
}
String getDescription(){
return description;
}
}
// List created
List getSlides(){
List slides = new List();
SliderModel sliderModel = new SliderModel();
// Item 1
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
// Item 2
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
// Item 3
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
return slides;
}
Dart
class SliderModel{
String image;
// images given
SliderModel({this.image});
// setter for image
void setImage(String getImage){
image = getImage;
}
// getter for image
String getImage(){
return image;
}
}
List getSlides(){
List slides = new List();
SliderModel sliderModel = new SliderModel();
// 1
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
// 2
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
// 3
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
return slides;
}
Dart
import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/Screen1.dart';
import 'package:kc0035a_flutter_customer_app/data/SliderModel.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
List slides = new List();
int currentIndex = 0;
PageController _controller;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = PageController(initialPage: 0);
slides = getSlides();
}
@override
void dispose(){
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Geeks for Geeks"),
),
body: Column(
children: [
Expanded(
child: PageView.builder(
scrollDirection: Axis.horizontal,
onPageChanged: (value){
setState(() {
currentIndex = value;
});
},
itemCount: slides.length,
itemBuilder: (context, index){
// contents of slider
return Slider(
image: slides[index].getImage(),
);
}
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(slides.length, (index) => buildDot(index, context),
),
),
),
Container(
height: 60,
margin: EdgeInsets.all(40),
width: double.infinity,
color: Colors.green,
child: FlatButton(
child: Text(
currentIndex == slides.length - 1 ? "Continue": "Next"),
onPressed: (){
if(currentIndex == slides.length - 1){
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
);
}
_controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
],
),
backgroundColor: Colors.white,
);
}
// container created for dots
Container buildDot(int index, BuildContext context){
return Container(
height: 10,
width: currentIndex == index ? 25 : 10,
margin: EdgeInsets.only(right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.green,
),
);
}
}
// ignore: must_be_immutable
// slider declared
class Slider extends StatelessWidget {
String image;
Slider({this.image});
@override
Widget build(BuildContext context) {
return Expanded(
// contains container
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// image given in slider
Image(image: AssetImage(image)),
SizedBox(height: 25),
],
),
),
);
}
}
Dart
import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/SplashScreen.dart';
void main() {
runApp(MyApp());
}
// stateless widget created
class MyApp extends StatelessWidget {
// This widget is the root
// of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
// first screen of app
home: HomeScreen(),
);
}
}
现在,按照以下步骤在我们的Flutter应用程序中实现 On Boarding Screen:
第 1 步:导航到 main。 dart() 文件并返回 Material App()
首先,我们在 main函数中的 runApp 中声明了MyApp() 。然后我们为 MyApp 创建了StatefulWidget ,其中我们返回了MaterialApp()。在这个 MaterialApp() 中,我们给了我们的应用程序的标题,然后将我们的应用程序的主题声明为棕色。然后我们给出了首页的第一个屏幕或滑块应用程序: HomePage()。
Dart
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold();
第 2 步:在此 Scaffold() 中创建 PageView
我们在Scaffold()的主体中给出了Column 。在此列中,我们提供了由扩展小部件包装的PageView 构建器组成的子项。 PageView 用于使我们的屏幕水平滚动,这取决于添加到它的项目数量。在此页面视图中,我们将滚动方向指定为水平方向, item Count 表示页面数。因为我们已经为onPageChanged()声明了 vale。我们在其中提供了价值。之后我们返回了由图像、标题和描述组成的 Slider。之后,我们在Expanded()小部件之外创建了Container() ,用于在Row 中构建特定高度和宽度的点。
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
// Column created
body: Column(
children: [
Expanded(
// PageView Builder
child: PageView.builder(
scrollDirection: Axis.horizontal,
onPageChanged: (value){
setState(() {
currentIndex = value;
});
},
itemCount: slides.length,
itemBuilder: (context, index){
// Contents of Slider that we
// created in Modal Class
return Slider(
image: slides[index].getImage(),
title: slides[index].getTitle(),
description: slides[index].getDescription(),
);
}
),
),
// Container created for dots
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(slides.length, (index) => buildDot(index, context),
),
),
),
第 3 步:从那个 Container() 中提取 build Dot()
之后,我们从那个 Container() 中提取了buildDot( ) 并返回了另一个 Container()。在其中我们给定了高度、宽度和boxDecoration() ,其中我们给了我们的点的颜色和边界半径。
Dart
Container buildDot(int index, BuildContext context){
// Another Container returned
return Container(
height: 10,
width: currentIndex == index ? 25 : 10,
margin: EdgeInsets.only(right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.green,
),
);
}
}
第 4 步:创建另一个 Container()
之后,我们给出了另一个 Container(),在其中我们给出了Flat Button(),在其中我们为onPressed()方法声明了条件。单击按钮后,滑块将出现,然后用户将被导航到下一个屏幕。之后,我们为按钮提供了文本颜色和圆形半径。
Dart
Container(
height: 60,
margin: EdgeInsets.all(40),
width: double.infinity,
color: Colors.green,
// Button
child: FlatButton(
child: Text(
currentIndex == slides.length - 1 ? "Continue": "Next"),
onPressed: (){
if(currentIndex == slides.length - 1){
// Navigate to next screen
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
);
}
_controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
textColor: Colors.white,
// Border radius to button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
第 5 步:为 Slider 类创建无状态小部件
之后,我们为在PageView 中返回的 Slider 类创建了Stateless() Widget 。建设者。其中我们返回了Container() ,它由Column()组成, Column()包含我们在Column() 中排列的图像标题和描述。
Dart
class Slider extends StatelessWidget {
String image,title,description;
//Constructor created
Slider({this.image, this.title, this.description});
@override
Widget build(BuildContext context) {
return Container(
// column containing image
// title and description
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(image: AssetImage(image)),
SizedBox(height: 20),
Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),),
SizedBox(height: 12),
Text(description),
SizedBox(height: 25),
],
),
);
}
}
第 6 步:创建SliderModel()类
之后,我们创建了SliderModel()类,其中包含将在页面视图中显示的图像、标题和描述列表。在这个类中,我们为三个变量 image、title 和 description 创建了构造函数。然后我们已经为这个变量声明了 getter 和 setter 方法。
Dart
class SliderModel{
String image;
String title;
String description;
// Constructor for variables
SliderModel({this.title, this.description, this.image});
void setImage(String getImage){
image = getImage;
}
void setTitle(String getTitle){
title = getTitle;
}
void setDescription(String getDescription){
description = getDescription;
}
String getImage(){
return image;
}
String getTitle(){
return title;
}
String getDescription(){
return description;
}
}
// List created
List getSlides(){
List slides = new List();
SliderModel sliderModel = new SliderModel();
// Item 1
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
// Item 2
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
// Item 3
sliderModel.setImage("images/slider2.png");
sliderModel.setTitle("Copper Articles");
sliderModel.setDescription("Interested in buying Copper Handicrafts");
slides.add(sliderModel);
sliderModel = new SliderModel();
return slides;
}
SliderModel() 类定义如下:
Dart
class SliderModel{
String image;
// images given
SliderModel({this.image});
// setter for image
void setImage(String getImage){
image = getImage;
}
// getter for image
String getImage(){
return image;
}
}
List getSlides(){
List slides = new List();
SliderModel sliderModel = new SliderModel();
// 1
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
// 2
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
// 3
sliderModel.setImage("images/slider2.png");
slides.add(sliderModel);
sliderModel = new SliderModel();
return slides;
}
在此阶段,主页如下所示:
Dart
import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/Screen1.dart';
import 'package:kc0035a_flutter_customer_app/data/SliderModel.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
List slides = new List();
int currentIndex = 0;
PageController _controller;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = PageController(initialPage: 0);
slides = getSlides();
}
@override
void dispose(){
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Geeks for Geeks"),
),
body: Column(
children: [
Expanded(
child: PageView.builder(
scrollDirection: Axis.horizontal,
onPageChanged: (value){
setState(() {
currentIndex = value;
});
},
itemCount: slides.length,
itemBuilder: (context, index){
// contents of slider
return Slider(
image: slides[index].getImage(),
);
}
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(slides.length, (index) => buildDot(index, context),
),
),
),
Container(
height: 60,
margin: EdgeInsets.all(40),
width: double.infinity,
color: Colors.green,
child: FlatButton(
child: Text(
currentIndex == slides.length - 1 ? "Continue": "Next"),
onPressed: (){
if(currentIndex == slides.length - 1){
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
);
}
_controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
],
),
backgroundColor: Colors.white,
);
}
// container created for dots
Container buildDot(int index, BuildContext context){
return Container(
height: 10,
width: currentIndex == index ? 25 : 10,
margin: EdgeInsets.only(right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.green,
),
);
}
}
// ignore: must_be_immutable
// slider declared
class Slider extends StatelessWidget {
String image;
Slider({this.image});
@override
Widget build(BuildContext context) {
return Expanded(
// contains container
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// image given in slider
Image(image: AssetImage(image)),
SizedBox(height: 25),
],
),
),
);
}
}
主要的。dart文件:
Dart
import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/SplashScreen.dart';
void main() {
runApp(MyApp());
}
// stateless widget created
class MyApp extends StatelessWidget {
// This widget is the root
// of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
// first screen of app
home: HomeScreen(),
);
}
}
输出: