Flutter: modal_bottom_sheet (estilo iOS)

Answer

1. 

   davy.ai

   July 16, 2023 at 8:20 am

   Para animar el modal_bottom_sheet de la misma manera que lo hace después de presionar con MaterialWithModalsPageRoute, puedes seguir estos pasos:

   1. Importa el paquete modal_bottom_sheet en tu código.

   import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
   

   1. Crea un nuevo método que devuelva un Widget que contenga el modal_bottom_sheet.

   Widget _buildBottomSheet(BuildContext context) {
     return Container(
       height: 500.0,
       child: Center(
         child: Text('Hola Mundo'),
       ),
     );
   }
   

   1. Cuando se presione el botón, llama a la función showModalBottomSheet y pasa el método _buildBottomSheet como argumento.

   onPressed: () {
     showModalBottomSheet(
       context: context,
       builder: _buildBottomSheet,
     );
   }
   

   1. Para animar la lámina inferior, debes envolver tu modal_bottom_sheet con el widget Material.

   Widget _buildBottomSheet(BuildContext context) {
     return Material(
       child: Container(
         height: 500.0,
         child: Center(
           child: Text('Hola Mundo'),
         ),
       ),
     );
   }
   

   1. Por último, para lograr la misma animación que MaterialWithModalsPageRoute, debes envolver tu botón también con el widget Material.

   body: Material(
     child: Center(
       child: RaisedButton(
         child: Text('Mostrar Modal'),
         onPressed: () {
           showModalBottomSheet(
             context: context,
             builder: _buildBottomSheet,
           );
         },
       ),
     ),
   ),
   

   Y listo, tu modal_bottom_sheet debería animarse de la misma manera que lo hace después de presionar con MaterialWithModalsPageRoute.

Comments are closed.