➜ 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

Recibimos la variable con la información del Producto
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.

2248 visitas

Capítulo 46 – Logout de la App Delivery »

{ Curso Flutter y Laravel Tienda Delivery }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

➜ Implementación Pantalla Producto

Descarga el código del proyecto

¡Qué aprenderás?