How to make a SimpleDialog with scroll in Flutter

Question

I have made a SimpleDialog to give the user the option to modify, but I have noticed that on small screens it doesn't scroll so it is cut off and cannot even be accepted. I have seen in some other questions that they put "scrolling: true" when calling showDialog but it tells me that it doesn't have this attribute. I don't know what to put on it.

child: GestureDetector(
        onDoubleTap: () {
          showDialog(
              context: context,
              builder: (context) {
                return MaterialApp(
                  debugShowCheckedModeBanner: false,
                  title: 'iOrganize',
                  theme: ThemeData.dark().copyWith(
                    scaffoldBackgroundColor: secondBgColor,
                    textTheme: GoogleFonts.poppinsTextTheme(
                            Theme.of(context).textTheme)
                        .apply(bodyColor: primaryColor),
                  ),
                  home: CustomDialogModificarTarea(usuario, tarjeta),
                );
              });
        },

The CustomDialogModificarTarea code is too long to put it here, but if necessary I'll put pictures.

class CustomDialogModificarTarea extends StatelessWidget {
  final Usuario usuario;
  final Tarjeta tarjeta;
  ProyectoService proyectoService = ProyectoServiceFirebase();
  UsuarioService usuarioService = UsuarioServiceFirebase();
  TarjetaService tarjetaService=TarjetaServiceFirebase();
  TextEditingController nombreController = TextEditingController();
  TextEditingController fechaController = TextEditingController();

  CustomDialogModificarTarea(this.usuario,this.tarjeta);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Consts.padding),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );
  }

  dialogContent(BuildContext context) {
    return Stack(
      children: <Widget>[
        buildCard(context),
        buildCircle(),
        //...bottom card part,
        //...top circlular image part,
      ],
    );
  }

  Widget buildCard(BuildContext context) {
    return Positioned(
      top: 50,
      left: Consts.padding,
      right: Consts.padding * 2,
      child: Container(
        decoration: new BoxDecoration(
          color: secondBgColor,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(Consts.padding),
          boxShadow: [
            BoxShadow(
              color: Color.fromARGB(66, 0, 0, 0),
              blurRadius: 10.0,
              offset: const Offset(0.0, 10.0),
            ),
          ],
        ),
        padding: const EdgeInsets.only(
          top: Consts.avatarRadius + Consts.padding,
          bottom: Consts.avatarRadius + Consts.padding,
          left: Consts.avatarRadius + Consts.padding,
          right: Consts.avatarRadius + Consts.padding,
        ),
        margin: const EdgeInsets.only(top: Consts.avatarRadius),
        child: Column(
          mainAxisSize: MainAxisSize.min, // To make the card compact
          children: <Widget>[
            const Text(
              "Modificar tarea",
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.w700,
              ),
            ),
            const SizedBox(height: 16.0),
            TextFormField(
              controller: nombreController,
              decoration: const InputDecoration(
                hintText: 'Cambiar el nombre de la tarea',
              ),
            ),
            TextFormField(
              controller: fechaController,
              decoration: const InputDecoration(
                hintText: 'Cambiar la fecha de la tarea',
              ),
            ),
            const SizedBox(height: 16.0),
            Align(
              alignment: Alignment.bottomLeft,
              child: TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('Cancelar'),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: TextButton(
                onPressed: () {
                  
                  TablaService tablaService=TablaServiceFirebase();
                  int pos;
                  pos=int.tryParse(usuario.idProyectoActual)!;
                  TarjetaService tarjetaService=TarjetaServiceFirebase();
                  print("Borrar Tarjetas");
                  for(int i=0;i<2;i++){
                    List<Tarjeta>? tarjetas=usuario.proyectos![pos].tablas![i].tarjetas;
                    print(tarjetas!.length);
                    bool borrado=false;
                    for(int j=0; tarjetas!=null && j<tarjetas.length && !borrado;j++){
                      print("Segundo for");
                      if(tarjetas[j].id==tarjeta.id){
                        print("La he encontrado $i ${tarjetas[j].id}");
                        tarjetas.removeAt(j);
                         usuario.proyectos![pos].tablas![i].tarjetas=tarjetas;
                         print(usuario.proyectos![pos].tablas![i].tarjetas!.length);
                        borrado=true;
                      }
                    }
                    print("Imprimo el id: ${usuario.proyectos![pos].tablas![i].id!.split("-")[1] }");
                     tablaService.updateTabla(id: usuario.proyectos![pos].tablas![i].id!.split("-")[1], tipo: usuario.proyectos![pos].tablas![i].id!.split("-")[0], t: usuario.proyectos![pos].tablas![i]);
                  }
                  print("Salgo ta");
                  tarjetaService.deleteTarjeta(id: tarjeta.id);
                 

                  Navigator.of(context).pop();
                },
                child: const Text('Borrar tarea'),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: TextButton(
                onPressed: () async {
                  
                  if(nombreController.text!=""){
                    tarjeta.name=nombreController.text;
                  }
                  if(fechaController.text!=""){
                    tarjeta.fecha=fechaController.text;
                  }
                  
                  tarjetaService.updateTarjeta(tarjeta: tarjeta);
                  Navigator.of(context).pop();
                },
                child: const Text('Modificar'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildCircle() {
    return const Positioned(
      right: 16,
      top: 50,
      child: const CircleAvatar(
        backgroundColor: Colors.blueAccent,
        radius: Consts.avatarRadius,
      ),
    );
  }
}

class Consts {
  Consts._();

  static const double padding = 16.0;
  static const double avatarRadius = 16.0;
}

Answer 1

This should work:

Widget buildCard(BuildContext context) {
 return Scrollbar(
  controller: _controllerOne,
  thumbVisibility: true,
  child: GridView.builder(
    controller: _controllerOne,
    itemCount: 1,
    gridDelegate:
        const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
    itemBuilder: (BuildContext context, int index) {
      return buildCard2(context)//Call your buildCard(buildCard2)
    },
  ),
);

}

You should change the name of your build(ex:buildCar2) so that this method is the one that is executed first.