Flutter Sounds Demo

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

//IGNORAR ESTE CODIGO. IR A CODIGO DE EJEMPLO ABAJO.
class AudioPlayer {
   bool isLocal = false;
  
  Future<int> play(String url, {bool isLocal}) {
      this.isLocal = isLocal;
    
     return Future.delayed(Duration(milliseconds: 500), () {
       print('AudioPlayer Reproduciendo "$url"...');
       return 1;
     });
  }
}
//IGNORAR ESTE CODIGO. IR A CODIGO DE EJEMPLO ABAJO.




/*
 AQUI EMPIEZA EL CODIGO DE EJEMPLO. 

LAS CLASES DEFINIDAS ARRIBA
SE DEBE A QUE EN DARTPAD NO SE PUEDEN INSTALAR PAQUETES NI UTILIZAR MULTIPLES ARCHIVOS TODAVIA.
ASI QUE CONSTRUI UN ESQUELETO DE ELLAS.


  Cambios:
  
  - Ahora los sonidos tienen un botón para reproducirlos antes de seleccionarlos
    en la página de Configuración.
  - Cambio del color de foreground de la clase AppColors.
  - Cambio del color del botón de reproducir de la página de Inicio.
  - Cambio del texto del AppBar de la página de Inicio de 'Lista de Sonidos App' a 'Inicio'.
*/

void main() => runApp(App());

//BloC
class Colores {
  final Color fondo = Colors.black;
  final Color principal = Color(0xFF00CCFF);
}

class Rutas {
  final inicio = '/';
  final configuracion = '/configuracion';
}

class AppBloc {
  
   final Rutas rutas = Rutas();
   final Colores colores = Colores();
  
   Sonido _sonidoActual;
  final List<Sonido> sonidos = [
   Sonido('Una Gran Aventura', 'assets/sonidos/sonido_una_gran_aventura.wav'),
   Sonido('Crujido', 'assets/sonidos/sonido_crujido.wav'),
   Sonido('Saltos', 'assets/sonidos/sonido_saltos.wav')
];
  
  void addSound(Sonido sound) {
    sonidos.add(sound);
  }
  
  Sonido get sonidoActual {
    return this._sonidoActual;
  }
  
  set sonidoActual(Sonido value) {
    this._sonidoActual = value;
  }
  
  AppBloc() {
    _sonidoActual = sonidos[0];
  }
}

class AppProvider extends InheritedWidget {
  final appBloc = AppBloc();
  
  AppProvider({Key key, Widget child}) : super(child: child, key: key);
  
  @override
  bool updateShouldNotify(InheritedWidget old) => true;
 
  static AppBloc of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<AppProvider>().appBloc;
}
//Termina BloC

class Sonido {
  final String nombre;
  final String ruta;
  
  Sonido(this.nombre, this.ruta);
}


class App extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    final appProvider = AppProvider.of(context);

    return AppProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
        primarySwatch: Colors.blue,
        unselectedWidgetColor: Colors.grey
        ),
        initialRoute: appProvider.rutas.inicio,
        routes: {
          appProvider.rutas.inicio    : (BuildContext context) => Inicio(titulo: 'Inicio'),       
          appProvider.rutas.configuracion : (BuildContext context) => Configuracion(titulo: 'Configuración')
        },
    )
     );

  }
}

class Frame extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final appProvider = AppProvider.of(context);
    
    return Container(
            height: 120.0,
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                Colors.white, appProvider.colores.principal], 
                begin: Alignment.topCenter, 
                end: Alignment.bottomCenter)
              ),
            );
  }
}

class Inicio extends StatefulWidget {
   final String titulo;
  
  Inicio({Key key, this.titulo}) : super(key: key);
  
  _InicioState createState() => _InicioState();
}


class _InicioState extends State<Inicio> {
  BuildContext _snackbarContext;
  
  @override
  Widget build(BuildContext context) {
    final appProvider = AppProvider.of(context);

    return  Scaffold(
      backgroundColor: appProvider.colores.fondo,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: appProvider.colores.fondo,
        centerTitle: true, 
        title: Text(widget.titulo, style: TextStyle(color: appProvider.colores.principal)),
        actions: [
            IconButton(icon: Icon(Icons.menu), 
              onPressed: () async {           
                await Navigator.of(context).pushNamed(appProvider.rutas.configuracion);        
                     this.setState((){
                          if (_snackbarContext != null) {
                            Scaffold.of(_snackbarContext)
                              ..removeCurrentSnackBar();
                          }
                     });
              }
           )
        ],
      ),
      body: Center(
        child: Column(
          children: <Widget> [
            Frame(),
            Divider(height: 40.0,),
            Text(appProvider.sonidoActual.nombre, 
                 style: TextStyle(color: Colors.white)
              )
          ]
        )
      
      ),
      floatingActionButton: Builder(
        builder: (context) {
          _snackbarContext = context;
          
         return FloatingActionButton(
           backgroundColor: appProvider.colores.principal,
        child: Icon(Icons.play_arrow),
        onPressed: () {
          String msj = 'Escoje un Sonido.';
          if (appProvider.sonidoActual != null) {
            msj = 'Reproduciendo "${appProvider.sonidoActual.nombre}..."';
          } 
          Scaffold.of(context)
            ..hideCurrentSnackBar()
            ..showSnackBar(SnackBar(content: Text(msj)));        
        },
        ) ;
        },  
      ),
   
    );
  }
}

class Configuracion extends StatefulWidget {
  final String titulo;
  
  Configuracion({Key key, this.titulo}) : super(key: key);  

  @override
  _ConfiguracionState createState() => _ConfiguracionState();
}

class _ConfiguracionState extends State<Configuracion> {
  AudioPlayer _reproductor = new AudioPlayer();
  
  Future<int> reproducir(String archivo) async {
      return await _reproductor.play(archivo);
   }
  
  @override 
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final appProvider = AppProvider.of(context);

    return  Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        
        backgroundColor: appProvider.colores.fondo,
        leading: Navigator.canPop(context) 
        ? IconButton(
          icon: Icon(Icons.arrow_back, color: appProvider.colores.principal),
          onPressed: () {
            Navigator.of(context).pop();
          }
        )
        : null,
        centerTitle: true,
        title: Text(widget.titulo, style: TextStyle(color: appProvider.colores.fondo)),
      ),
      body: ListaSonidos.builder(
        sonidos: appProvider.sonidos, 
        alSeleccionarSonido: (Sonido sonido) {
          setState((){
            appProvider.sonidoActual = sonido;
          });
        },
      
      )  
    );
  }
  
  
}

class ListaSonidos extends StatefulWidget {
  
  final Function alSeleccionarSonido;
  final List<Sonido> sonidos;
  
 ListaSonidos.builder({this.sonidos, this.alSeleccionarSonido});
  
  _ListaSonidosState createState() => _ListaSonidosState();
}

class _ListaSonidosState extends State<ListaSonidos> {
  int _seleccion;

  @override
  Widget build(BuildContext context) {
    final appProvider = AppProvider.of(context);
    _seleccion = appProvider.sonidos.indexOf(appProvider.sonidoActual) ?? 0;
    
    return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Frame(),
              Divider(),
               Expanded(
                child: ListView.builder(
                  itemCount: widget.sonidos.length,
                  itemBuilder: (context, index) {
                    Sonido sonido = widget.sonidos[index];
                    return  ListTile(
                      leading: Radio(
                        
                        activeColor: appProvider.colores.principal,
                        groupValue: _seleccion,
                        value: index, 
                        onChanged: (value){
                          setState(() {
                            _seleccion = value;
                            widget.alSeleccionarSonido(widget.sonidos[value]);
                        });
                      }),
                      title: Row(children: <Widget> [
                        Text(sonido.nombre, style: TextStyle(color: Colors.white)), 
                       
                         IconButton(       
                          color: Colors.white,
                          icon: Icon(Icons.play_circle_filled),                          
                          onPressed: (){
                            String msg = 'Reproduciendo "${sonido.nombre}..."';
         
          Scaffold.of(context)
            ..hideCurrentSnackBar()
            ..showSnackBar(SnackBar(content: Text(msg))); 
                          }
                        )  
                      
                      ]
                     ) 
                   );
                }
               )
                  
             )
          ],
        ),
    );
  }
}