Tampilan Halaman Grid View Product Keren di Flutter. Tampilan Halaman dengan Card dan Grid View Product di Flutter, Tampilan Grid View Product di Flutter. Membuat Tampilan Grid Product Keren dan Cantik di Flutter. Contoh Tampilan Grid View Product Flutter. Membuat Tampilan Grid Card di Flutter. Flutter UI Card. Membuat Tampilan Cepat dan Mudah di Flutter. Script Membuat Grid di Flutter Secara Cepat. Flutter Template Design. Flutter List View Simple Design, Flutter Login Design Fresh & Modern, Flutter News Grid Design
import 'package:flutter/material.dart';
void main() => runApp(GridViewApp());
class GridViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Grid View App',
theme: ThemeData(primarySwatch: Colors.blue),
home: GridViewPage(),
);
}
}
class GridViewPage extends StatefulWidget {
@override
_GridViewPageState createState() => _GridViewPageState();
}
class _GridViewPageState extends State<GridViewPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.33,
color: Colors.grey[400],
),
ListView(
padding: EdgeInsets.zero,
children: [
Padding(
padding: EdgeInsets.fromLTRB(10, 50, 10, 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
' Sahre Store',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
Stack(
children: [
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
// Implement your cart icon action here
},
),
Positioned(
top: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: Text(
'2',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
),
)
],
),
],
),
SizedBox(
height: 16,
),
Container(
height: 50, // Atur tinggi Container sesuai kebutuhan Anda
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
),
child: TextFormField(
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.top,
decoration: InputDecoration(
hintText: ' Type to search .....',
hintStyle: TextStyle(fontSize: 15),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(
vertical: 8,
horizontal: 10,
),
),
),
),
),
SizedBox(width: 10),
Container(
height:
50, // Atur tinggi Container sesuai kebutuhan Anda
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(25),
),
child: ElevatedButton(
onPressed: () {
// Implement your button action here
},
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
child: Icon(Icons.search),
),
),
],
),
),
SizedBox(height: 10),
GridView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
childAspectRatio: 0.61,
),
itemBuilder: (context, index) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2016/10/10/16/01/computer-1728921_1280.jpg', // Ganti dengan URL gambar Anda
),
),
),
width: MediaQuery.of(context).size.width,
),
Padding(
padding: const EdgeInsets.only(
top: 8, left: 8, right: 8),
child: Expanded(
child: Text(
'Apple MacBook Air 13.3 inch 8GB, 256GB, 8 Core CPU Apple M1 Chip, Space Gray',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 5, left: 8, right: 8),
child: Wrap(
children: [
Container(
padding: EdgeInsets.symmetric(
horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Laptop',
style: TextStyle(
fontSize: 8,
color: Colors.white,
),
),
),
SizedBox(
width: 2,
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Electronic',
style: TextStyle(
fontSize: 8,
color: Colors.white,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(
Icons.star,
color: Colors.yellow,
size: 14,
),
Icon(
Icons.star,
color: Colors.yellow,
size: 14,
),
Icon(
Icons.star,
color: Colors.yellow,
size: 14,
),
Icon(
Icons.star_half,
color: Colors.yellow,
size: 14,
),
Icon(
Icons.star_border,
color: Colors.yellow,
size: 12,
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment
.spaceBetween, // Menampilkan tombol di sebelah kanan
children: [
Text(
'\$ 1.400',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
child: InkWell(
onTap: () {
// Implement your button action here
},
child: Ink(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.transparent,
),
child: Icon(
Icons.add,
color: Colors.white,
size: 25,
),
),
),
)
],
),
),
],
),
);
},
),
],
),
),
],
),
],
),
);
}
} |
| Grid View Product |
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi