Flutter – Vista de cuadrícula escalonada

La vista de cuadrícula escalonada es un tipo de diseño que se utiliza para mostrar imágenes y publicaciones. Como ves en varias plataformas sociales como Pinterest y muchas más. La característica principal de la vista de cuadrícula escalonada es que hace que el diseño sea hermoso y desarrolla una excelente experiencia de usuario. La vista de cuadrícula escalonada consta de contenedores presentes en filas y columnas de diferentes tamaños. Que muestra imágenes y publicaciones de varios tamaños.

Características:

• Establezca crossAxiscount y minAxiscount en la vista de cuadrícula
• La extensión del eje principal de las teselas puede ser fija o múltiplo de la longitud de la celda.
• Márgenes configurables del eje principal y del eje transversal entre mosaicos.
• SliverStaggeredGrid para usar en CustomScrollView .
• Diseños de cuadrícula escalonados y expandibles .

Uso de la vista de cuadrícula escalonada:

En este artículo, vamos a ver cómo implementar la vista de cuadrícula escalonada en nuestra aplicación Flutter. Para construir esto, siga los pasos a continuación.

• Agregue la dependencia al archivo pubspec.yaml .

dependencies:
    flutter_staggered_grid_view: ^0.3.2

• Importe la dependencia al archivo main.dart

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Ahora, echemos un vistazo a la implementación de la vista de cuadrícula escalonada. Para hacerlo, siga los siguientes pasos:

Paso 1: para implementar la vista de cuadrícula escalonada en su proyecto, primero debe agregar la dependencia en su archivo pubspec.yaml en la carpeta lib . Ahora haga clic en pub.get y espere a configurarlo.

Paso 2: Aplicación de devolución de material en el archivo main.dart(). Primero, cree MyApp() en StatelessWidget y en él devuelva MaterialApp(). Ahora en MaterialApp() proporcione el título de la aplicación y agregue debugShowCheckModeBanner como falso , lo que eliminará el banner de depuración en la aplicación. Ahora agregue el tema como tema oscuro y luego represente la primera pantalla de inicio: página de inicio()

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        
      //Title of an App
      title: 'GFG APP',
        
      //Theme of an App
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
        
     // First Screen of App
      home: HomePage(),
    );
  }
}

Paso 3: ahora importe las dependencias para la vista de cuadrícula escalonada en la página de inicio(). Después de importar la dependencia, cree la barra de la aplicación dentro de Scaffold. Ahora cree un nuevo Container() en el cuerpo. En ese Contenedor ahora implemente Vista de cuadrícula escalonada como se muestra en el código a continuación. Dentro de la vista de cuadrícula escalonada , hay StaggeredTiles . Para lo cual hemos declarado una Lista de 10 _cardTile que especifican el tamaño de tus cartas. Después de eso, hemos creado una clase BackGroundTile en StatelessWidget . En el que hemos declarado dos variables finales backgroundColor y icon data. Hemos creado un constructor para estas variables. Y tarjeta devuelta que consiste en backgroundColory datos de iconos . En la vista de cuadrícula escalonada, hemos declarado a los niños como _listTile . Para lo cual hemos creado una Lista que hereda propiedades de la clase BackGroundTile . Que consisten en backgroundColor e icondata .

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
  
//List of Cards with size
List<StaggeredTile>  _cardTile = <StaggeredTile> [
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
];
  
//List of Cards with color and icon
List<Widget>_listTile = <Widget>[
  BackGroundTile(backgroundColor: Colors.red, icondata: Icons.home),
  BackGroundTile(backgroundColor: Colors.orange, icondata: Icons.ac_unit),
  BackGroundTile(backgroundColor: Colors.pink, icondata: Icons.landscape),
  BackGroundTile(backgroundColor: Colors.green, icondata: Icons.portrait),
  BackGroundTile(backgroundColor: Colors.deepPurpleAccent, icondata: Icons.music_note),
  BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.access_alarms),
  BackGroundTile(backgroundColor: Colors.indigo, icondata: Icons.satellite_outlined),
  BackGroundTile(backgroundColor: Colors.cyan, icondata: Icons.search_sharp),
  BackGroundTile(backgroundColor: Colors.yellowAccent, icondata: Icons.adjust_rounded),
  BackGroundTile(backgroundColor: Colors.deepOrange, icondata: Icons.attach_money),
];
  
class  HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GFG App"),
      ),
      body: Container(
  
        // Staggered Grid View starts here
        child: StaggeredGridView.count(
            crossAxisCount: 4,
          staggeredTiles: _cardTile,
          children: _listTile,
           mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
  
      ),
      ),
    );
  }
}
class BackGroundTile extends StatelessWidget {
  final Color backgroundColor;
  final IconData icondata;
  
  BackGroundTile({this.backgroundColor, this.icondata});
  
  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: Icon(icondata, color: Colors.white),
    );
  }
}

Producción: