Mostrar una hoja de Cupertino

Una hoja de Cupertino (Cupertino sheet) es una hoja modal inferior al estilo de iOS que se utiliza para presentar contenido u opciones. Se desliza hacia arriba desde la parte inferior de la pantalla y se puede arrastrar hacia abajo para cerrarse.

En Flutter, este es el trabajo de showCupertinoSheet. Esta receta implementa una hoja de Cupertino siguiendo los siguientes pasos:

1. Crear una CupertinoApp o una MaterialApp.
2. Mostrar el contenido de la hoja.

Al crear aplicaciones que siguen las directrices de diseño de iOS, puedes utilizar CupertinoApp. El siguiente ejemplo proporciona un botón en el centro de la pantalla que activa el modal.

class CupertinoSheetDemo extends StatelessWidget {
  const CupertinoSheetDemo({super.key});
​
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'CupertinoSheet Demo',
      home: CupertinoSheetPage(),
    );
  }
}

Con la estructura básica de la aplicación lista, muestra la hoja. Para mostrarla, llama a showCupertinoSheet y proporciona un scrollableBuilder que devuelva el contenido de la hoja, como un SingleChildScrollView.

showCupertinoSheet(
  context: context,
  scrollableBuilder: (context, scrollController) {
    return SingleChildScrollView(
      controller: scrollController,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 100),
            const Text('This is a Cupertino sheet'),
            const SizedBox(height: 20),
            CupertinoButton(
              child: const Text('Close'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  },
);