Vista de página es una lista que funciona página por página. En este artículo, haremos Cómo animar la página al deslizar. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.
Usaremos el widget Transformar para animar la página.
Sintaxis
Creación de un controlador de página que se utiliza para controlar páginas y escuchar deslizamientos.
Dart
// page controller instance PageController controller = PageController();
Creación de una variable currentPageValue utilizada para establecer el número de páginas seleccionadas.
Dart
// variable to store // current value of page var currentPageValue = 0.0;
Agregar Listener al controlador para cambiar el índice de la página seleccionada cuando se cambia la página.
Dart
controller.addListener(() {
// setState method to
// rebuild the widget
setState(() {
currentPageValue = controller.page;
});
});
Crear contenido de lista de páginas en una variable de lista.
Dart
List PageViewItem = [ // item1,item2,item3 ]
Cree una página de muestra, pageno y color como parámetros para que podamos cambiar el texto y el color de cada página.
Dart
Widget page(var pageno, Color color) {
return Container(
width: double.infinity,
height: double.infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text("${pageno}, Swipe Right or left"),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
}
Creación de la vista de página
Dart
PageView.builder(
itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {
return Transform(
transform: Matrix4.identity()
..rotateX(currentPageValue - position),
child: pageViewItem[position],
);
}),
Nota:
Los valores de posición van entre 0 1 2, el valor de currentPageValue va entre 0 y 1 decimales.
Ejemplos 0.255,1.897,2.232
Valor de la posición actual: la posición devolverá números decimales Entre 0 y 1 rotación negativa a la izquierda, rotación positiva a la derecha.
Ejemplos de código
Animación usando RotateX
Dart
import 'package:flutter/material.dart';
void main() {
runApp(PageviewAnimation());
}
class PageviewAnimation extends StatefulWidget {
PageviewAnimation({Key? key}) : super(key: key);
@override
State<PageviewAnimation> createState() => _PageviewAnimationState();
}
class _PageviewAnimationState extends State<PageviewAnimation> {
PageController controller = PageController();
static dynamic currentPageValue = 0.0;
List pageViewItem = [
page(currentPageValue, Colors.tealAccent),
page(2, Colors.amber),
page(3, Colors.cyan)
];
@override
void initState() {
super.initState();
controller.addListener(() {
setState(() {
currentPageValue = controller.page;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Page View Animation 1"),
),
body: PageView.builder(
itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {
return Transform(
transform: Matrix4.identity()
..rotateX(currentPageValue - position),
child: pageViewItem[position],
);
}),
),
);
}
}
Widget page(var pageno, Color color) {
return Container(
width: double.infinity,
height: double.infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text("${pageno}, Swipe Right or left"),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
}
Producción
Animación usando RotateZ
Dart
import 'package:flutter/material.dart';
void main() {
runApp(PageviewAnimation());
class PageviewAnimation extends StatefulWidget {
PageviewAnimation({Key? key}) : super(key: key);
@override
State<PageviewAnimation> createState() => _PageviewAnimationState();
}
class _PageviewAnimationState extends State<PageviewAnimation> {
PageController controller = PageController();
static dynamic currentPageValue = 0.0;
// list of pages
List pageViewItem = [
page(currentPageValue, Colors.tealAccent),
page(currentPageValue, Colors.amber),
page(currentPageValue, Colors.cyan)
];
@override
void initState() {
super.initState();
controller.addListener(() {
setState(() {
currentPageValue = controller.page;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Page View Animation 1"),
),
// PageView builder builds the page.
body: PageView.builder(
itemCount: pageViewItem.length,
scrollDirection: Axis.horizontal,
controller: controller,
itemBuilder: (context, position) {\
// Transform using for animation
return Transform(
transform: Matrix4.identity()
..rotateZ(currentPageValue - position),
child: pageViewItem[position],
);
}),
),
);
}
}
// this widget makes the page
Widget page(var pageno, Color color) {
return Container(
width: double.infinity,
height: double.infinity,
color: color,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.pages,
color: Colors.white,
),
Text("${pageno}, Swipe Right or left"),
Icon(Icons.arrow_right, color: Colors.white),
],
),
);
}