XEM BÀI VIẾT THEO TỪ KHÓA
ai angular aspnetcore backend chat ckeditor cqrs csharp dart eclipse erd flutter frontend giai-thuat hibernate java javaweb jsp jwt laravel md5 mongodb nosql oop opencv oracle pattern project python restful security servlet spring sql typescript webapi webservice website
CÔNG NGHỆ THÔNG TIN >> BÀI VIẾT CHỌN LỌC

Flutter căn bản-Thiết kế màn hình hiển thị danh sách sản phẩm và Navigator tới màn hình chi tiết

Đăng lúc: 09:44 AM - 17/07/2024 bởi Charles Chung - 441

Trong bài viết này tôi sẽ hướng dẫn các bạn thiết kế màn hình hiển thị danh sách sản phẩm và sử dung Navigator để chuyển tới màn hình chi tiết.

Các bước thực hiện

- Chuẩn bị ảnh sản phẩm tải tại đây

- Tạo mới Flutter Project với tên "ex05", cấu trúc như hình dưới

- Tạo thư mục assets/phones và copy các ảnh sản phẩm vào đó

- Cấu hình thư mục ảnh trong tệp pubspec.yaml (hình trên)

- Tạo các thư mục models, screens, services (hình trên)

- Tạo tệp tin product.dart (khai báo lớp Product biểu diễn thông tin sản phẩm)

class Product{
  String _productId;
  String _productName;
  double _price;
  String _picture;
  String _description;
  Product(this._productId, this._productName, this._price, this._picture,this._description);

  String get description => _description;

  set description(String value) {
    _description = value;
  }

  String get productId => _productId;

  set productId(String value) {
    _productId = value;
  }

  String get picture => _picture;

  set picture(String value) {
    _picture = value;
  }

  double get price => _price;

  set price(double value) {
    _price = value;
  }

  String get productName => _productName;

  set productName(String value) {
    _productName = value;
  }
}

- Tạo tệp tin productservice.dart (khai báo lớp ProductService chứa nghiệp vụ cung cấp dữ liệu về danh sách sản phẩm-thực tế sau này gọi API để lấy sản phẩm về)

import 'package:ex05/models/product.dart';

class ProductService
{
  final List<Product> _products=[
    Product('M001', 'iPhone 15 pro Max',18000000,'iphone-15-pro.jpg','Phone 15 Pro Max là một chiếc điện thoại thông minh cao cấp được mong đợi nhất năm 2023. Với nhiều tính năng mới và cải tiến, iPhone 15 Pro Max chắc chắn sẽ là một lựa chọn tuyệt vời cho những người dùng đang tìm kiếm một chiếc điện thoại có hiệu năng mạnh mẽ, camera chất lượng và thiết kế sang trọng.'
'• Sản phẩm chính hãng, đảm bảo chất lượng: Thế Giới Di Động là nhà bán lẻ điện thoại di động lớn nhất Việt Nam, cam kết cung cấp sản phẩm chính hãng, đảm bảo chất lượng. Bạn có thể yên tâm về xuất xứ sản phẩm và có thể tận hưởng trải nghiệm sử dụng tốt nhất.'),
    Product('M002', 'iPhone 15',14000000,'iphone-15.jpg','Hàng chính hãng'),
    Product('M003', 'Oppo Reno 10 Pro+',13000000,'oppo-reno10-pro-plus.jpg','Hàng chính hãng'),
    Product('M004', 'Oppo Reno 11F',10000000,'oppo-reno11-f.jpg','Hàng chính hãng'),
    Product('M005', 'Galaxy 24 Plus',16500000,'samsung-galaxy-s24-plus.jpg','Hàng chính hãng'),
    Product('M006', 'Xiaomi 14',12000000,'xiaomi-14-green.jpg','Hàng chính hãng'),
    Product('M007', 'Xiaomi-Redmi A3',5000000,'xiaomi-redmi-a3.jpg','Hàng chính hãng'),
  ];
  List<Product> get products=>_products;
}

- Tệp product_home_screen.dart (Chứa code xây dựng màn hình hiển thị sản phẩm)

import 'package:ex05/models/product.dart';
import 'package:ex05/screens/product_detail_screen.dart';
import 'package:ex05/services/productservice.dart';
import 'package:flutter/material.dart';
//Lớp hiển thị cấu trúc màn hình hiển thị danh sách sản phẩm
class ProductHomeScreen extends StatelessWidget {
  var products = ProductService().products;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: const Text('DANH MỤC SẢN PHẨM'),
          ),
          body: ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) {
              return GestureDetector(
                child: ProductWidget(products[index]),
                onTap:  (){
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              ProductDetailScreen(products[index])));
                },
              );
            },
          )),
    );
  }
}
//Widget hiển thị thông tin của 1 sản phẩm
class ProductWidget extends StatelessWidget {
  final Product product;
  ProductWidget(this.product);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      padding: EdgeInsets.all(5),
      child: Card(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Image.asset('assets/phones/${product.picture}'),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '${product.productName}',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                  ),
                  Text('${product.description}',
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Text(
                    'Giá: ${product.price.round()} đ',style: TextStyle(color: Colors.red),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

- Tệp product_detail_screen.dart (Chứa cdoe xây dựng màn hình hiển thị chi tiêt sản phẩm)

import 'package:ex05/models/product.dart';
import 'package:flutter/material.dart';

class ProductDetailScreen extends StatelessWidget {
  Product _product;
  ProductDetailScreen(this._product);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('THÔNG TIN SẢN PHẨM'),
        ),
        body: Container(
          padding: const EdgeInsets.all(10),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Tên: ${_product.productName}',style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
                const SizedBox(height: 10,),
                Image.asset('assets/phones/${_product.picture}'),
                const SizedBox(height: 10,),
                Text('Giá: ${_product.price.round()} đ',style: const TextStyle(fontSize: 20),),
                const SizedBox(height: 10,),
                const Text('Mô tả',style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),),
                const SizedBox( height: 10,),
                Text(_product.description,style: const TextStyle(fontSize: 16),),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          elevation: 10,
          onPressed: (){
            Navigator.pop(context);
          },
          child: const Icon(Icons.arrow_back),
        ),
      ),
    );
  }
}

- Tệp main.dart (Chứa code khởi động ứng dụng flutter)

import 'package:ex05/screens/product_home_screen.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example05',
      home: ProductHomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

- Chạy ứng dụng và xem kết quả

 

thay lời cảm ơn!

QUẢNG CÁO - TIẾP THỊ