Tampilan Halaman Grid View Keren di Flutter. Tampilan Halaman dengan Card dan Grid View di Flutter, Tampilan Grid View Berita di Flutter. Membuat Tampilan Grid Keren dan Cantik di Flutter. Contoh Tampilan Grid View 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
1. Buatlah sebuah project flutter baru dengan nama yang kalian inginkan. Kemudian buka lib/main.dart kemudian ganti dengan script di bawah ini.
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,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://cdn.pixabay.com/photo/2022/01/11/17/04/city-6931092_1280.jpg'), // Ganti dengan URL gambar Anda
fit: BoxFit.cover,
),
),
),
ListView(
padding: EdgeInsets.zero,
children: [
Padding(
padding: EdgeInsets.fromLTRB(10, 60, 10, 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'SahreApp',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10,
),
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.62,
),
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/2022/09/10/23/28/city-7445873_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(
'Creating a Login in Flutter using Restful Api and Token',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Expanded(
child: Text(
'Hello everyone, back again at sahretech. On this occasion, we will learn how to create a login and process it in Flutter with',
style: TextStyle(fontSize: 12),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(
Icons.bookmark_outline,
size: 20,
),
Icon(
Icons.share_outlined,
size: 20,
),
],
),
),
],
),
);
},
),
],
),
),
],
),
],
),
);
}
}2. Tampilan aplikasi saat dijalankan, disini kita menggunakan beberapa widget flutter seperti text, textformfield, button, icon, listview, card, container, dan grid view.
 |
| Flutter Grid View |
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