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;
}
CodePudding user response：
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
);
});
CodePudding user response：
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),
)
);
});
},