Inicio » Cursos » Flutter y Laravel Tienda Delivery

Implementación Pantalla Producto | Curso Flutter y Laravel Tienda Delivery

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

Lección 45: Implementación Pantalla Producto

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.

 


966 visitas

Curso Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Descarga el código fuente del proyecto

USD 37.00 67.00


COMPRAR CURSO

Codea App
Codea App FullStack

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022