Como usar el SingleChildScrollView en Flutter

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.

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.

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.