Hace un par de meses el Equipo de Flutter lanzó un reto, que era crear una aplicación, funcional lo más hermosa e impresionable posible con menos de 5KB de código, puedes verlo aquí: Flutter/Create.

Anoche me puse a pensar. ¿Será posible hacer algo con menos de 1kb de código? Increíblemente la respuesta es sí, he hice algo que me parece genial, una marimba visualmente atractiva y funcional, sin necesidad de manejar estado con puro Stateless y en menos de 31 líneas de código.

Pues lo único que tuve que usar es una librería que me ayuda reproducir música tanto de manera local como remota, es una librería llamada: audioplayers.

así que te mostraré cómo hacerla paso por paso:

Creamos un nuevo proyecto con Flutter:

flutter create marimba

Importamos la librería en el pubspec.yaml incluyendo los assets:

name: Marimba
description: A new Flutter application.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  audioplayers:

dev_dependencies:
  flutter_test:
    sdk: flutter


flutter:

  uses-material-design: true

  assets:
    - assets/

Luego de hacer eso escribirmos:

flutter pub get

Así instalamos la librería.

Creamos una carpeta assets que tiene cada uno de los sonidos que necesitamos y la imágen de la tecla de marimba:

los archivos musicales puedes encontralos en freesounds y la imagen de la tecla aquí.

En el main.dart importamos la librería de flutter material y la de audio, pero usamos la parte de caché para poder reproducir archivos locales.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

En la función principal retornamos una nueva aplicación de Material que en el home contiene un SafeArea (Para que no se vea mal en los dispositivos full screen).

El hijo de ese Widget es una Columna que usa un crossAxisAligment stretch para avarcar todo el ancho de la pantalla, la columna devuelve la llamada a una función _buildKey que recibe como argumento el color de la techa y el numero de la pista a sonar.

void main() => runApp(
      MaterialApp(
        home: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _buildKey(color: Colors.red, number: 1),
              _buildKey(color: Colors.redAccent, number: 2),
              _buildKey(color: Colors.orange, number: 3),
              _buildKey(color: Colors.orangeAccent, number: 4),
              _buildKey(color: Colors.amber, number: 5),
              _buildKey(color: Colors.amberAccent, number: 6),
              _buildKey(color: Colors.yellow, number: 7),
            ],
          ),
        ),
      ),
    );

La función _buildKey retorna un Expanded y recibe dos parámetros uno de typo color y el otro un entero.

El Expanded se usa para que ocupe el mayor largo posible que esté disponible en la columna, así no quedará ningún espacio vacío.

El hijo del Expanded es un FlatButton que tiene un color que es el que recibe por parámetro, el hijo de este botón es una imagén que hace referencia a la imágen de la tecla que pusimos en los assets.

en la Función onPressed que es requerida en el FlatButton usamos una función de flecha para hacer una Instancia de AudioCache() y ejecutar la función play que trae esa clase, pero la función play recibe un String concatenado que hace alución a la nota que se va a reproducir.

Esto sucederá cada que se presione la tecla.

Expanded _buildKey({Color color, int number}) {
  return Expanded(
    child: FlatButton(
      child: Image.asset('assets/marimba.jpg'),
      color: color,
      onPressed: () => AudioCache().play('note$number.wav'),
    ),
  );
}

El resultado final es esto:

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

Expanded _buildKey({Color color, int number}) {
  return Expanded(
    child: FlatButton(
      child: Image.asset('assets/marimba.jpg'),
      color: color,
      onPressed: () => AudioCache().play('note$number.wav'),
    ),
  );
}

void main() => runApp(
      MaterialApp(
        home: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _buildKey(color: Colors.red, number: 1),
              _buildKey(color: Colors.redAccent, number: 2),
              _buildKey(color: Colors.orange, number: 3),
              _buildKey(color: Colors.orangeAccent, number: 4),
              _buildKey(color: Colors.amber, number: 5),
              _buildKey(color: Colors.amberAccent, number: 6),
              _buildKey(color: Colors.yellow, number: 7),
            ],
          ),
        ),
      ),
    );

¡Super fácil! Ya tenemos una aplicación que pesa menos de 1kb.

Repositorio del app: Marimba