Flutter – Tarjeta de expansión

El paquete expansion_card se usa para implementar fácilmente tarjetas expandibles en Flutter. Las imágenes y los GIF también se pueden usar como fondo para realzar la belleza de la tarjeta, que se expandiría cuando se expanda la tarjeta. La tarjeta de expansión tiene una amplia gama de propiedades que se pueden manipular para cambiar los efectos de la tarjeta de expansión. En este artículo, veremos las propiedades y la implementación de la tarjeta de expansión.

Propiedades de la tarjeta de expansión:

• fondo: Se utiliza para establecer el fondo de la tarjeta.
• borderRadius: establece el radio de la tarjeta.
• adelante : establece la acción después del deslizamiento de la tarjeta.
• gif: Ruta a los GIF utilizados en la tarjeta.
• onExpansionChanged: establece las propiedades de la tarjeta expandida.
• trailing: un widget utilizado para reemplazar las flechas giratorias.
• initialExpanded: Establece el estado inicial de la tarjeta.

Ahora, veamos su implementación a través de un ejemplo simple. Para ello, crearemos una aplicación simple e implementaremos la tarjeta de expansión en ella. para hacerlo siga los siguientes pasos:

• Agregue la dependencia expansion_card al archivo pubspec.yaml.
• Importe la dependencia al archivo main.dart.
• Estructurar una aplicación básica para una mayor implementación de la tarjeta de expansión.
• Llame al método ExpansionCard en el cuerpo de la aplicación
• Configure las propiedades mientras la tarjeta se encoge y se expande respectivamente.

Ahora, veamos los pasos en detalle.

Agregar la dependencia:

Para agregar la dependencia expansion_card en la sección de dependencias del archivo pubspec.yaml sigue la siguiente imagen: 

Importación de la dependencia:

Para agregar la dependencia al archivo main.dart, use la siguiente línea de código:

import 'package:expansion_card/expansion_card.dart';

Estructuración de la aplicación:

Cree una clase (por ejemplo, Myapp) y extiéndala a través de un widget sin estado para establecer la raíz de la aplicación. Siga esto extendiendo otra clase (digamos, MainApp) a través de un StatelessWidget para proporcionar una barra de aplicaciones y un cuerpo a la aplicación como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainApp());
  }
}
  
class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
          
          // content of the app goes here
          body: 
    );
  }
}

Llamar a la ExpansionCard:

En el cuerpo de MainApp Class, haga una llamada a ExpansionCard como se muestra a continuación:

Center(
           child: ExpansionCard(
               ),
             ),

Configuración de las propiedades de la tarjeta de expansión:

Ahora diseñe cómo se supone que debe funcionar la tarjeta de expansión en esta etapa dentro del widget ExpansionCard . Aquí usaremos el logotipo de GeeksFoeGeeks como fondo de la tarjeta con el texto principal que se muestra durante la etapa reducida y un texto secundario cuando la tarjeta se expande.

body: Center(
           child: ExpansionCard(
             borderRadius: 20,
             background: Image.asset(
               "assets/gfg.png",
               fit: BoxFit.cover,
             ),
             title: Container(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: <Widget>[
                   Text(
                     "GeeksForGeeks",
                     style: TextStyle(
                       fontSize: 30,
                       color: Colors.black,
                     ),
                   ),
                   Text(
                     "A Computer Science Portal",
                     style: TextStyle(fontSize: 20, color: Colors.black),
                   ),
                 ],
               ),
             ),

Código fuente completo:

import 'package:expansion_card/expansion_card.dart';
import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainApp());
  }
}
  
class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
            child: ExpansionCard(
              borderRadius: 20,
              background: Image.asset(
                "assets/gfg.png",
                fit: BoxFit.cover,
              ),
              title: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "GeeksForGeeks",
                      style: TextStyle(
                        fontSize: 30,
                        color: Colors.black,
                      ),
                    ),
                    Text(
                      "A Computer Science Portal",
                      style: TextStyle(fontSize: 20, color: Colors.black),
                    ),
                  ],
                ),
              ),
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 7),
                  child: Text("Main Content",
                      style: TextStyle(fontSize: 20, color: Colors.black)),
                )
              ],
            )));
  }
}

Producción: