📒
Mobile Development Reference-TCE-C01
  • Welcome
  • Introduction
    • Project Description
  • First Steps
    • Creating Project
    • Setting up Workspace
      • Project structure
      • Setting up the app
  • Routing
    • Setting up auto route
    • Creating the first screen
    • Setting up router
    • Adding router to Material App
  • Products Feature
    • Creating models
      • Introduction to freezed
      • Introduction to JSON annotations
      • Creating products model
    • Creating products cubit
      • Creating Products States
      • Creating Products Cubit
      • Implementing Get Products Functionality
    • Creating products repository
      • Setting up Dio
      • Making your first http request with DIO
    • Implementing Products Screen UI
      • Adding Products Grid
      • Adding Products Tile
      • Add Products Error Widget
    • Consuming the products cubit
      • Setting up Dependency injection
      • Creating Bloc Provider for ProductsCubit
      • Mapping Products Cubit states to UI
  • Testing
    • Widget Testing
    • Unit Testing
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Products Feature
  2. Implementing Products Screen UI

Adding Products Tile

Inside the product_screen.dart file under src/product/view/products/ add the following code:

class _ProductItem extends StatelessWidget {
  final Product product;

  const _ProductItem({Key key, @required this.product})
      : assert(product != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => context.navigator.push(
        Routes.productScreen,
        arguments: ProductScreenArguments(product: product),
      ),
      child: Card(
        margin: EdgeInsets.zero,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Container(
                color: Colors.white,
                padding: const EdgeInsets.all(8),
                child: Image.network(product.image),
              ),
            ),
            Container(
              height: 48,
              color: Colors.grey[200],
              padding: const EdgeInsets.all(4),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            product.title,
                            overflow: TextOverflow.ellipsis,
                            style: const TextStyle(fontWeight: FontWeight.w600),
                          ),
                          const SizedBox(height: 4),
                          Text('${product.price} ETB'),
                        ],
                      ),
                    ),
                  ),
                  IconButton(
                    onPressed: () =>
                        context.read<CartCubit>().addProduct(product),
                    icon: const Icon(Icons.add_shopping_cart_rounded),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

PreviousAdding Products GridNextAdd Products Error Widget

Last updated 4 years ago

Was this helpful?