Melanjutkan membuat aplikasi android toko-online dengan flutter dari artikel Cara Menghubungkan Backend dengan Android, kali ini kita akan belajar membuat halaman detail produk dari halaman produk.
Langsung saja buka project flutter toko-online.
Untuk format currency harga produk,
tambahkan dependancies flutter_localizations seperti berikut :
Masuk folder lib -> buat file produk_detail.dart
Ketikkan code seperti berikut :
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; class ProdukDetail extends StatelessWidget { ProdukDetail({ this.imageUrl, this.title, this.price, }); final String imageUrl; final String title; final String price; @override Widget build(BuildContext context) { final double headerTop = MediaQuery.of(context).size.height * 0.45; return Scaffold( body: SafeArea( top: false, child: Stack( children: <Widget>[ SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( width: double.infinity, height: headerTop, child: Image.network('$imageUrl', fit: BoxFit.cover), ), Container( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: EdgeInsets.only(top: 10, left: 10, right: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ _buildHeaderProduk(), SizedBox(height: 12), Divider(height: 1), SizedBox(height: 6), _buildUlasanProduk(), ], ), ), SizedBox(height: 12), Container( height: 16, color: Colors.grey[200], ), SizedBox(height: 12), _buildInformasiProduk(), SizedBox(height: 12), Container( height: 8, color: Colors.grey[200], ), SizedBox(height: 12), _buildDeskripsiProduk(), SizedBox(height: 12), Container( height: 8, color: Colors.grey[200], ), SizedBox(height: 40), ], ), ), ], ), ), Positioned( top: 0.0, left: 0.0, right: 0.0, child: AppBar( backgroundColor: Colors.transparent, elevation: 0, leading: IconButton( onPressed: () => Navigator.of(context).pop(), icon: Icon(Icons.keyboard_arrow_left), ), flexibleSpace: Container( height: AppBar().preferredSize.height + MediaQuery.of(context).padding.top, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: <Color>[ Colors.black.withOpacity(0.4), Colors.transparent ], ), ), ), ), ), Positioned( bottom: 0.0, left: 0.0, right: 0.0, child: Container( padding: const EdgeInsets.all(4), height: 44, decoration: BoxDecoration( color: Colors.white, border: Border.all( color: Colors.red, ), ), child: Row( children: <Widget>[ Container( width: MediaQuery.of(context).size.width - 10, padding: const EdgeInsets.only(top: 5, bottom: 5), decoration: BoxDecoration( color: Colors.red, border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(4)), child: Center( child: Text( 'Beli Sekarang', style: TextStyle(fontSize: 14, color: Colors.white), ), ), ), ], ), ), ), ], ), ), ); } Padding _buildDeskripsiProduk() { return Padding( padding: const EdgeInsets.symmetric(horizontal: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Deskripsi Produk', style: TextStyle(fontWeight: FontWeight.bold)), SizedBox(height: 8), Text( 'Terobosan baru untuk smartphone berbasis android dengan spesifikasi yang sangar luar biasa diera 2020. Wow briliant ide untuk membuat smartphone se power full ini. Sehingga...', style: TextStyle(fontSize: 12)), SizedBox(height: 12), Text('Baca Selengkapnya', style: TextStyle(fontSize: 12, color: Colors.green)), ], ), ); } Padding _buildInformasiProduk() { return Padding( padding: const EdgeInsets.symmetric(horizontal: 10), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Informasi Produk', style: TextStyle(fontWeight: FontWeight.bold)), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Berat', style: TextStyle(fontSize: 12)), Text('100 Gram', style: TextStyle(fontSize: 12)), ], ), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Kondisi', style: TextStyle(fontSize: 12)), Text('Baru', style: TextStyle(fontSize: 12)), ], ), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Asuransi', style: TextStyle(fontSize: 12)), Text('Ya', style: TextStyle(fontSize: 12)), ], ), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Pemesanan Min', style: TextStyle(fontSize: 12)), Text('1 Buah', style: TextStyle(fontSize: 12)), ], ), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Kategori', style: TextStyle(fontSize: 12)), Text('Smartphone Handphone', style: TextStyle(fontSize: 12, color: Colors.green)), ], ), SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('Etalase', style: TextStyle(fontSize: 12)), Text('Hydrogel', style: TextStyle(fontSize: 12, color: Colors.green)), ], ), ], ), ); } Column _buildUlasanProduk() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Stok tersedia', style: TextStyle(fontSize: 11)), SizedBox(height: 24), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Column( children: <Widget>[ Row( children: <Widget>[ Text( '4.7', style: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, ), ), Icon(Icons.star, color: Colors.yellow, size: 14), Text('/5', style: TextStyle(fontSize: 10)), ], ), SizedBox(height: 6), Text( '375 Ulasan', style: TextStyle( fontSize: 10, color: Colors.green, ), ), ], ), Column( children: <Widget>[ Text( 'Q&A', style: TextStyle( fontSize: 14, color: Colors.green, fontWeight: FontWeight.bold, ), ), SizedBox(height: 6), Text( '210 Diskusi', style: TextStyle( fontSize: 10, color: Colors.green, ), ), ], ), Column( children: <Widget>[ Icon(Icons.train, color: Colors.green, size: 18), SizedBox(height: 6), Text( 'Pengiriman', style: TextStyle( fontSize: 10, color: Colors.green, ), ), ], ), ], ), SizedBox(height: 10), Container( decoration: BoxDecoration( color: Colors.grey[200], borderRadius: BorderRadius.circular(8), ), child: Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Column( children: <Widget>[ Text( 'Dilihat', style: TextStyle( fontSize: 10, color: Colors.grey[500], ), ), SizedBox(height: 6), Text( '30,7rb', style: TextStyle( fontSize: 10, fontWeight: FontWeight.bold, color: Colors.black, ), ), ], ), Column( children: <Widget>[ Text( 'Transaksi Berhasil', style: TextStyle( fontSize: 10, color: Colors.grey[500], ), ), SizedBox(height: 6), Text( '99,2% (1.246)', style: TextStyle( fontSize: 10, fontWeight: FontWeight.bold, color: Colors.black, ), ), ], ), Column( children: <Widget>[ Text( 'Wishlist', style: TextStyle( fontSize: 10, color: Colors.grey[500], ), ), SizedBox(height: 6), Text( '827', style: TextStyle( fontSize: 10, fontWeight: FontWeight.bold, color: Colors.black, ), ), ], ), ], ), ), ), ], ); } Column _buildHeaderProduk() { final formater = NumberFormat('#,##0.00', 'id'); return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('$title', style: TextStyle(fontWeight: FontWeight.bold)), SizedBox(height: 8), Text( 'Rp ' + formater.format(int.parse(price)), style: TextStyle( color: Colors.red, fontWeight: FontWeight.bold, ), ), SizedBox(height: 4), Row( children: <Widget>[ Text('Produk dari', style: TextStyle(fontSize: 11)), Padding( padding: const EdgeInsets.symmetric(horizontal: 4), child: Icon( Icons.tonality, color: Colors.green, size: 14, ), ), Text( 'Power Merchant', style: TextStyle( fontSize: 11, color: Colors.green, fontWeight: FontWeight.bold, ), ), ], ), ], ); } }
Build / Run project toko-online seperti berikut :
Source code lengkap digithub toko-online
Terima kasih sekian.
Happy Coding 🙂
I’m a result mobile engineer, as well as deep understanding of digital systems.