Flutter – Hoja desplazable arrastrable

En este tutorial, vamos a aprender qué es el widget DraggableScrollableSheet y cómo implementarlo en Flutter.

Tabla de contenido

• Que es Flutter
• ArrastrableScrollableSheet
• Configuración del proyecto
• Código de proyecto

Aleteo:

Flutter es un kit de desarrollo de software de interfaz de usuario de código abierto creado por Google con el que podemos desarrollar aplicaciones para Android, IOS, Desktop y Web con una sola base de código.

Hoja desplazable arrastrable:

Un DraggableScrollableSheet es un widget en Flutter que responde a los gestos de arrastre cambiando el tamaño del desplazable.

Configuración del proyecto:

En este tutorial, crearemos una aplicación Detalles de animales en la que la pantalla principal será una lista de animales y crearemos un widget DraggableScrollableSheet para mostrar las características de los animales. La aplicación se centrará en el widget DraggableScrollableSheet.

Comencemos creando un nuevo proyecto. Ingrese el siguiente comando en Símbolo del sistema / Terminal en su directorio preferido o también puede usar su proyecto existente.

aleteo crear draggable_scrollable_sheet_tutorial

No necesitamos paquetes adicionales para este tutorial.

Código

El código de inicio está aquí y está en el archivo main.dart .

import 'dart:math';
import 'dart:ui';
  
import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
      ),
      body: Container(),
      ),
    );
  }
}

Vamos a utilizar el widget de pila para mostrar la pantalla principal en segundo plano y el widget de hoja que se puede arrastrar al frente.

Por lo tanto, use Stack como elemento secundario del Container .

Container(
  child: Stack(
    children: [],
  ),
),

Así que vamos a crear un widget ListView separado con algunos nombres de animales. Lo llamaremos listaanimales .

Widget animalsList() {
  return ListView(
    children: [],
  );
}

Ahora vamos a crear unos ListTiles con nombres de animales. Pero aquí vamos a crear un widget ListTile separado y lo llamaremos animalListTile . Vamos a hacer esto para simplificar nuestro código.

Widget animalListTile(int index, String animalName) {
  return ListTile(
    onTap: () {
      print(index);
    },
    title: Text(animalName),
  );
}

Aquí estamos tomando parámetros, el primero es el índice de ListTile y el segundo es animalName . Estamos usando el índice para actualizar DraggableScrollableSheet. El animalName es para el nombre del animal.

Ahora vamos a crear nuestra DraggableScrollableSheet. Cree un widget separado y asígnele el nombre bottomDetailsSheet .

Widget bottomDetailsSheet() {
  return DraggableScrollableSheet(
    initialChildSize: ,
    minChildSize: ,
    maxChildSize: ,
    builder: (BuildContext context, ScrollController scrollController) {
      return Container();
    },
  );
}

Ahora aquí tenemos tantos parámetros nuevos. Aprendamos sobre ellos uno por uno.

• initialChildSize : este campo especifica el tamaño inicial de la hoja arrastrable inferior que desea que aparezca en la fracción de la pantalla y toma un valor doble. Su valor por defecto es 0,5. Su valor oscila entre 0 y 1,0.
• minChildSize: este campo especifica el tamaño mínimo del widget DraggableScrollableSheet, es decir, cuando cualquier usuario se desplazará hacia abajo para cerrar el widget, aparecerá la altura mínima. Su valor predeterminado es 0,25 y oscila entre 0 y 1,0. También especifica la fracción de la pantalla a ocupar.
• maxChildSize : este campo especifica el tamaño máximo del widget DraggableScrollableSheet, es decir, cuando cualquier usuario se desplace hacia arriba para abrir el widget, aparecerá la altura máxima. Su valor predeterminado es 1,0 y oscila entre 0 y 1,0. También especifica la fracción de la pantalla a ocupar.
• constructor: esta función devuelve un widget. Aquí usaremos ListView y mostraremos los detalles del animal tocado. Por defecto, mostraremos los detalles del primer animal.
• expandir: este campo especifica si el widget debe expandirse para llenar el espacio disponible en su padre o no. El valor por defecto es verdadero. No lo hemos especificado porque queremos que sea cierto.

Especifiquemos los tres primeros campos.

initialChildSize: .2,
minChildSize: .1,
maxChildSize: .6,

Vamos a crear variables para nuestra aplicación. Puede copiar desde abajo. Todas las variables se explican por sí mismas. 

List<String> animalNames = ['Elephant', 'Tiger', 'Kangaroo'];
List<String> animalFamily = ['Elephantidae', 'Panthera', 'Macropodidae'];
List<String> animalLifeSpan = ['60-70', '8-10', '15-20'];
List<String> animalWeight = ['2700-6000', '90-310', '47-66'];
int selectedTile = 0;

Ahora diseñemos la función constructora. El diseño es su propia elección, por lo que puede continuar copiando mi diseño o el suyo propio. Aquí está el diseño completo de DraggableScrollableSheet .

Widget bottomDetailsSheet() {
  return DraggableScrollableSheet(
    initialChildSize: .2,
    minChildSize: .1,
    maxChildSize: .6,
    builder: (BuildContext context, ScrollController scrollController) {
      return Container(
        color: Colors.lightGreen[100],
        child: ListView(
          controller: scrollController,
          children: [
            ListTile(
              title: Text(
                "NAME",
              ),
              subtitle: Text(
                animalNames[selectedTile],
              ),
            ),
            ListTile(
              title: Text(
                "FAMILY",
              ),
              subtitle: Text(
                animalFamily[selectedTile],
              ),
            ),
            ListTile(
              title: Text(
                "LIFESPAN",
              ),
              subtitle: Text(
                animalLifeSpan[selectedTile],
              ),
            ),
            ListTile(
              title: Text(
                "WEIGHT",
              ),
              subtitle: Text(
                animalWeight[selectedTile],
              ),
            ),
          ],
        ),
      );
    },
  );
}

Aquí usamos ScrollController scrollController para hacer que nuestra lista se pueda desplazar .

Si ejecuta la aplicación, verá lo siguiente. 

ArrastrableScrollableSheet

Y ahora es el momento del widget animalList . Ya hemos creado nuestro widget. Agregue el widget animalListTile como elemento secundario de animalList .

Widget animalsList() {
  return ListView(
    children: [
      animalListTile(0, animalNames[0]),
      animalListTile(1, animalNames[1]),
      animalListTile(2, animalNames[2]),
    ],
  );
}
  
Widget animalListTile(int index, String animalName) {
  return ListTile(
    onTap: () {
      print(index);
    },
    title: Text(animalName),
  );
}

Aquí, en lugar de imprimir el índice, cambiaremos el valor del mosaico seleccionado . Pero también necesitamos diseñar el mosaico de la lista activa para que podamos distinguir cuál está activo. Además, modificaremos el diseño de animalListTile. Así que aquí está el diseño final.

Widget animalListTile(int index, String animalName) {
  return Padding(
    padding: EdgeInsets.all(8.0),
    child: ListTile(
      onTap: () {
        setState(() {
          selectedTile = index;
        });
      },
      title: Text(
        animalName,
        style: TextStyle(
          color: Colors.brown,
          fontSize: 24.0,
          fontWeight: FontWeight.w600,
        ),
      ),
      tileColor: Colors.lightGreen[300],
      selected: index == selectedTile,
      selectedTileColor: Colors.lightGreen[600],
    ),
  );
}

Así que nuestra aplicación está casi lista. Agregue animalList en los elementos secundarios del widget Stack.

Stack(
  children: [
    animalsList(),
    bottomDetailsSheet(),
  ],
),

Ahora ejecuta la aplicación.

Completa la aplicación DraggableScrollableSheet

Hemos creado con éxito nuestra aplicación. Si tuviste algún problema comenta abajo. También aquí está el código completo.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DraggableScrollableSheet GFG',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  List<String> animalNames = ['Elephant', 'Tiger', 'Kangaroo'];
  List<String> animalFamily = ['Elephantidae', 'Panthera', 'Macropodidae'];
  List<String> animalLifeSpan = ['60-70', '8-10', '15-20'];
  List<String> animalWeight = ['2700-6000', '90-310', '47-66'];
  int selectedTile = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksForGeeks'),
      ),
      body: Container(
        child: Stack(
          children: [
            animalsList(),
            bottomDetailsSheet(),
          ],
        ),
      ),
    );
  }
  
  Widget animalsList() {
    return ListView(
      children: [
        animalListTile(0, animalNames[0]),
        animalListTile(1, animalNames[1]),
        animalListTile(2, animalNames[2]),
      ],
    );
  }
  
  Widget animalListTile(int index, String animalName) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: ListTile(
        onTap: () {
          setState(() {
            selectedTile = index;
          });
        },
        title: Text(
          animalName,
          style: TextStyle(
            color: Colors.brown,
            fontSize: 24.0,
            fontWeight: FontWeight.w600,
          ),
        ),
        tileColor: Colors.lightGreen[300],
        selected: index == selectedTile,
        selectedTileColor: Colors.lightGreen[600],
      ),
    );
  }
  
  Widget bottomDetailsSheet() {
    return DraggableScrollableSheet(
      initialChildSize: .2,
      minChildSize: .1,
      maxChildSize: .6,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          color: Colors.lightGreen[100],
          child: ListView(
            controller: scrollController,
            children: [
              ListTile(
                title: Text(
                  "NAME",
                ),
                subtitle: Text(
                  animalNames[selectedTile],
                ),
              ),
              ListTile(
                title: Text(
                  "FAMILY",
                ),
                subtitle: Text(
                  animalFamily[selectedTile],
                ),
              ),
              ListTile(
                title: Text(
                  "LIFESPAN",
                ),
                subtitle: Text(
                  animalLifeSpan[selectedTile],
                ),
              ),
              ListTile(
                title: Text(
                  "WEIGHT",
                ),
                subtitle: Text(
                  animalWeight[selectedTile],
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Espero que les haya gustado el tutorial. Gracias.