Question 79600 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make a SimpleDialog with scroll in Flutter

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;
}
Tags:

3

Answers


  1. 0

    AlertDialog has scrollable property instead of returning MaterialApp return AlertDialog that will solve your problem

    showDialog(
        context: context,
         builder: (context) {
         return AlertDialog(
         scrollable: true,
         title: 'iOrganize',
           content: //write your main content here
           );
     });
    Login or Signup to reply.
  2. 0

    Firstly, instead of returning a MaterialApp, you should return an AlertDialog from the builder of showDialog.
    Secondly, wrap your content inside a SingleChildScrollView widget if you believe that the content is too large to fit into one screen.
    That’s the advisable solution as per the documentation:

    If the content is too large to fit on the screen vertically, the
    dialog will display the title and the actions and let the content
    overflow, which is rarely desired. Consider using a scrolling widget
    for content, such as SingleChildScrollView, to avoid overflow

    Here’s the revised code. Hope it helps!

    child: GestureDetector(
        onDoubleTap: () {
          showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: const Text('iOrganize'),
                  content: SingleChildScrollView(
                    child: CustomDialogModificarTarea(usuario, tarjeta),
                  )
                );
              });
         },
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search