Crear una Scroll View en flutter

Para los desarrolladores de android que usaron el ScrollView, les mostraré la forma de implementearlo en flutter.

Para ello vamos a utilizar el Widget «ListView» de flutter, que cuenta con un parámetro children que acepta una lista de widgets para contenerlos dentro del mismo.

La sintaxis de un ListView Simple es:

ListView(
            children: <Widget>[
              // elementos que van dentro del scrollView
              Container(
                height: 250,
                color: Colors.red,
              ),
              Container(
                height: 250,
                color: Colors.blue,
              ),
              Container(
                height: 250,
                color: Colors.orange,
              ),
              Container(
                height: 250,
                color: Colors.amber,
              )
            ],
          )

Con el código anterior se logra el siguiente efecto (agregándolo en un scaffold)

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter prueba',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: PruebaApp(),
    );
  }
}
class PruebaApp extends StatelessWidget { 

  PruebaApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            title: Text('Flutter prueba'),
          ),
          body: ListView(
            children: <Widget>[
              // elementos que van dentro del scrollView
              Container(
                height: 250,
                color: Colors.red,
              ),
              Container(
                height: 250,
                color: Colors.blue,
              ),
              Container(
                height: 250,
                color: Colors.orange,
              ),
              Container(
                height: 250,
                color: Colors.amber,
              )
            ],
          ), 
        );
  }
}

Otra forma de crear un ListView es mediante una variable tipo «lista», en el siguiente código crearemos una lista tipo String de Nombres, la cual posteriormente agregaremos a la app mediante ListView.builder()

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter prueba',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PruebaApp(),
    );
  }
}

class PruebaApp extends StatelessWidget {
  // Creamos la lista de nombres
  final List<String> nombres = [
    "Alberto",
    "Ricardo",
    "Francisco",
    "Gustavo",
    "Oscar",
    "Alejandro",
    "Nayla"
  ];

  PruebaApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter prueba'),
      ),
      //Utilizando el Scrollview.builder
      body: ListView.builder(
        // tamaño de la lista
        itemCount: nombres.length,
        // Constructor de widget para cada elemento de la lista
        itemBuilder: (BuildContext context, int indice) {
          return Card(
            //le damos un color de la lista de primarios
            color: Colors.primaries[indice],
            //agregamos un contenedor de 100 de alto
            child: Container(
                height: 100,
                //Centramos con el Widget Center
                child: Center(
                  //Agregamos el nombre con un Widget Text
                    child: Text(
                  nombres[indice],
                  //le damos estilo a cada texto
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ))),
          );
        },
      ),
    );
  }
}

Resultado: