Capitulo 45 del Módulo 5 Desarrollo del aplicativo

➜ Implementación Pantalla Producto

Mostrar el detalle de un producto App Delivery Flutter | Implementación de la PantallaProducto para mostrar información del producto a pedir, para ello pasamos la información en una variable de PantallaProductos

Implementación de la PantallaProducto para mostrar información del producto a pedir, para ello pasamos la información en una variable de PantallaProductos

DISEÑO

  1. Recibimos la variable con la información del Producto
  2. Mostramos en un Widget Column para distribuir la información forma vertical: Imagen, nombre, descripción, precio, etc

CÓDIGO DART

import 'dart:convert';

import 'package:arequipalocal/api/Api.dart';
import 'package:arequipalocal/carrito/CarritoCompra.dart';
import 'package:provider/provider.dart';
import 'package:arequipalocal/modelo/Producto.dart';
import 'package:arequipalocal/pantalla/PantallaCarrito.dart';
import 'package:arequipalocal/pantalla/PantallaInicio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'package:cached_network_image/cached_network_image.dart';
class PantallaProducto extends StatefulWidget {
  PantallaProducto(this.p);
  Producto p;
  @override
  _PantallaProductoState createState() => _PantallaProductoState(this.p);
}

class _PantallaProductoState extends State<PantallaProducto> {

  _PantallaProductoState(this.p);
  Producto p;
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
            title: Text(p.nombre),
            
             
              
        ),
        backgroundColor: Colors.orangeAccent,
        body: Container(
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.all(20),
          decoration: BoxDecoration(
              color: Colors.white
          ),
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              CachedNetworkImage(
                imageUrl: "http://arequipalocal.com/img/productos/"+p.urlfoto,
              ),
              Text("DESCRIPCIÓN", style: TextStyle(fontSize: 20),),
              Html(data: p.descripcion),
              SizedBox( height: 30,),
              Text("PRECIO USD "+p.precio.toString()),
              SizedBox( height: 30,),
              Text("UNIDAD " +p.unidad),
              
            ],
          ),
        ),
      );
    

  }

}

Posteriormente agregaremos el botón para agregar al carrito.

 


1962 visitas

Descarga el código del proyecto

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

Comprar

¡Qué aprenderás?

tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner

Codea Applications

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