El Widget SingleChildScrollView es un tipo de ScrollView que sirve para agregar un Scroll a nuestra aplicacion en Flutter ya que por defecto cuando agregamos mas y mas elementos en una pagina no se puede hacer Scroll.
Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →
En el ejemplo anterior donde agregamos una imagen a la aplicacion en Flutter pero si la imagen es muy grande no podemos hacer scroll.
Lo mismo pasa si usamos un elemento Column para agregar muchos elementos llega el momento que se saura la pagina y no vamos a poder hacer scroll es decir bajar o subir / desplazar la pantalla.
Usar el SingleChildScrollView
La solucion es usar el elemento SingleChildScrollView al cual si le podemos poner dentro como unico hijo (SingleChild) el elemento Column y de esta manera si vamos a poder hacer Scroll es decir desplazar la pantalla hacia arriba o hacia abajo.
Función: Proporciona un scrollbox a un único widget hijo.
Problema que resuelve: Soluciona el error de desbordamiento visual cuando los elementos exceden los límites de la pantalla.
Uso común: Envolver un Column o un Form para asegurar que el teclado o el contenido adicional no bloqueen la vista del usuario.
Codigo container
El codigo base es es el siguiente.
Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
// Elementos AQUI
]
)
),
)Como pueden ver la estructura es
Container
--- SigleChildScrollView
--- --- Column
--- --- --- Elementos (texto, Botones, Imagenes)Es mas o menos la estructura que tenemos que hacer para implementar el Scroll View.
Codigo
Ahora les muestro el codigo completo de la App que estoy usando como ejemplo.
En esta App ya le agregue varios elementos de texto y 2 imagenes.
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HelloWorld(),
);
}
}
class HelloWorld extends StatelessWidget {
const HelloWorld({super.key});
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar (title: Text("Prueba Scroll View")),
body: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Text("APP DE ANIMALES"),
Text("GORILA"),
Image.asset("assets/images/gorilla.jpg"),
Text("GALLINA"),
Image.asset("assets/images/gallina.jpg")
]
)
),
)
);
}
}Resultado
El resultado es el siguiente.
A simple vista no se puede notar pero el scroll esta en la derecha.
