La pantalla de incorporación es una de las más populares que puede ver en la mayoría de las aplicaciones después de cargar la pantalla de bienvenida. La pantalla de incorporación ofrece una breve descripción general de una aplicación. Principalmente, la pantalla de incorporación consta de tres o cuatro diseños que se deslizan cuando hacemos clic en Siguiente. En este artículo, veremos cómo implementar una pantalla de incorporación en la aplicación Flutter.
Primero, agregue la imagen que usará en la sección de activos del archivo pubspec.yaml.
Dart
assets: - images/slider1.jpg - images/slider2.png - images/slider3.jpeg
Ahora, sigue los pasos para implementar On Boarding Screen en nuestra app Flutter:
Paso 1: navegue hasta el archivo main.dart() y devuelva Material App()
Primero hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatefulWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título a nuestra aplicación y luego declarado el tema de nuestra aplicación como marrón. Luego le hemos dado nuestra primera pantalla o aplicación deslizante en casa: HomePage().
Dart
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold();
Paso 2: Crear PageView en este Scaffold()
Le hemos dado a Column en el cuerpo de nuestro Scaffold(). En esta columna, hemos proporcionado elementos secundarios que consisten en el generador PageView que está envuelto por el widget Expandido . PageView se usa para hacer que nuestra pantalla se pueda desplazar horizontalmente, lo que depende de la cantidad de elementos que se le agreguen. En esta vista de página, hemos dado la dirección de desplazamiento como horizontal, elemento Contar, lo que significa que no hay páginas. En eso hemos declarado valor para onPageChanged() . En los que hemos aportado valor. Después de eso, hemos devuelto el control deslizante que consta de imagen, título y descripción. Después de eso, creamos Container() fuera del widget Expanded() para construir puntos de altura y ancho específicos enfila _
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),
),
),
),
Paso 3: extraiga el punto de compilación() de ese contenedor()
Después de eso, extrajimos buildDot() de ese Container() y devolvimos otro Container(). En el que hemos dado altura, ancho, boxDecoration() en el que hemos dado color y radio de borde a nuestros puntos.
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,
),
);
}
}
Paso 4: Crea otro Contenedor()
Después de eso, hemos dado otro Container() en el que hemos dado Flat Button() en el que hemos declarado la condición para los métodos onPressed() . En el cual, después de hacer clic en el botón, aparecerá el control deslizante y luego el usuario será navegado a la siguiente pantalla. Y después de eso, le hemos dado color al texto y le hemos dado un radio circular al botón.
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),
),
),
),
Paso 5: cree un widget sin estado para la clase Slider
Después de eso, hemos creado el widget Stateless() para la clase Slider que hemos devuelto en PageView. constructor. En el que hemos devuelto Container() que consiste en Column() que contiene el título y la descripción de nuestra imagen organizados en 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),
],
),
);
}
}
Paso 6: Crea la clase SliderModel()
Después de eso, creamos la clase SliderModel() que consiste en una lista de imágenes, título y descripción que se mostrará en la vista de página. En esta clase hemos creado un constructor para tres variables imagen, título y descripción. Luego hemos declarado el método getter y setter a esta variable.
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<SliderModel> getSlides(){
List<SliderModel> slides = new List<SliderModel>();
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;
}
La clase SliderModel() se define como se muestra a continuación:
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<SliderModel> getSlides(){
List<SliderModel> slides = new List<SliderModel>();
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;
}
En esta etapa, la página de inicio se ve a continuación:
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<HomeScreen> {
List<SliderModel> slides = new List<SliderModel>();
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),
],
),
),
);
}
}
El archivo main.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(),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chinmaymunje96 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA