Inicio » Cursos » Flutter y Laravel App de Turismo

Curso Flutter y Laravel App de Turismo

Capitulo 29 ➜ Pantalla Foto360

Pantalla Foto360

Implementación de la Pantalla Foto para mostrar Foto 360 y planas

Importaremos un paquete para tratar la imagen en 360 o plana mediante un operador ternario donde evaluaremos un nuevo campo tipo,

En este punto vamos a crear una pantalla para mostrar las imágenes que corresponden al lugar turístico elegido. Para lograr ello tendremos que aumentar un campo nuevo campo llamado "tipo" a la tabla foto y realizar los correspondientes cambios que esta modificación generará como efecto dominó;

  • Actualizar el sql de la tabla foto
  • Actualizar el método de inserción foto
  • Actualizar los atributos del modelo Foto
  • Finalmente actualizar la función que importa los datos Json en la sección foto, claro esta que se encuentra en la pantalla lista de rutas.

Ahora veamos el código de pantallaFoto

import 'package:app/basededatos/Foto.dart';
import 'package:flutter/material.dart';
import 'package:panorama/panorama.dart';

class pantallaFoto extends StatefulWidget {
  Foto foto;
  pantallaFoto(this.foto);
  @override
  _pantallaFotoState createState() => _pantallaFotoState(this.foto);
}

class _pantallaFotoState extends State<pantallaFoto> {
  Foto _foto;
  _pantallaFotoState(this._foto);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_foto.nombre),
      ),
      body: Container(
        child: Center(
          child: _foto.tipo == 0
              ? Image.network("http://..../appturismo/public/img/foto/" +
                  _foto.urlfoto)
              : Panorama(
                  child: Image.network(
                      "http://.../appturismo/public/img/foto/" +
                          _foto.urlfoto),
                ),
        ),
      ),
    );
  }
}

 


1106 visitas

Sigue con el curso: Capítulo 30 – Proceso de Registro

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023