flip_card es un componente que proporciona una animación de tarjeta invertida. Podría usarse para ocultar y mostrar detalles de un producto. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.
Instalando
Agregue la dependencia en el archivo pubspec.yaml .
dependencies: flip_card: ^0.6.0
Sintaxis de uso
Crea una FlipCard. La tarjeta se volteará cuando se toque. La propiedad táctil es verdadera de forma predeterminada.
Dart
FlipCard(
fill: Fill.fillBack,
direction: FlipDirection.HORIZONTAL, // default
front: Container( // required
child: Text('Front'),
),
back: Container( // required
child: Text('Back'),
),
);
Propiedades
|
Propiedad |
Descripción |
|---|---|
| frente | Esta es una propiedad requerida que muestra el contenido frontal. |
| espalda | Esta es una propiedad requerida que muestra el contenido posterior. |
| velocidad | Velocidad de giro de la tarjeta. |
| FlipOnTouch | Permita que la tarjeta se voltee cuando se toque. |
| dirección | Habilite la dirección en la que la tarjeta puede girar, horizontal o vertical. |
| alineación | Establezca la alineación del contenido. |
| llenar | Rellene el reverso de la tarjeta para que sea del mismo tamaño que el anverso. |
| ¿Función vacía()? voltear, | Función para implementar tareas durante el volteo. |
| ¿Función vacía (bool)? onFlipDone, | Función para implementar la tarea después de realizar el flip. |
Para usarlo importa el paquete.
import 'package:flip_card/flip_card.dart';
Ejemplo de código
Dart
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
// main function calling
// to the MyFlipCard class.
void main() {
runApp(MyFlipCard());
}
// Class MyFlipCard is stateful class.
class MyFlipCard extends StatefulWidget {
const MyFlipCard({Key? key}) : super(key: key);
@override
State<MyFlipCard> createState() => _MyFlipCardState();
}
class _MyFlipCardState extends State<MyFlipCard> {
@override
Widget build(BuildContext context) {
// returning MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Flip Card"),
),
// body has a center with row child.
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Flipcard with vertical
// direction when flip
FlipCard(
direction: FlipDirection.VERTICAL,
// front of the card
front: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.red,
child: Text("Front"),
),
// back of the card
back: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.teal,
child: Text("Back"),
),
),
SizedBox(width: 30,),
// 2nd card showing Horizontal FlipDirection
FlipCard(
direction: FlipDirection.HORIZONTAL,
// front of the card
front: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.red,
child: Text("Front"),
),
// back of the card
back: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.teal,
child: Text("Back"),
),
),
],
),
),
),
);
}
}
Explicación
- método principal es el método principal llamado una vez que se carga el programa.
- Una vez que se cargue el programa, runApp se ejecutará y llamará a nuestra clase que creamos MyFlipCard para que se ejecute.
- Esta clase es un widget con estado para detectar el estado de FlipCard.
- Creando una MaterialApp que nos permita usar Scaffold.
- Scaffold nos permite usar la barra de aplicaciones y el cuerpo.
- La barra de aplicaciones tiene un título simple.
- El cuerpo contiene una fila centrada.
- Una fila nos permite tener varios hijos que son hijos con mainAxisAlignment al centro.
- Fila tiene tres hijos, Two FlipCard y sizebox.
- La dirección de FlipCard se establece vertical y horizontalmente, respectivamente.
- El frente muestra un contenedor de 200×200 rojo con texto al frente.
- Volver muestra un contenedor de 200×200 verde azulado con texto de vuelta.