Cool Vertical and Horizontal List View Page Views in Flutter. Page View with Card and Container List View in Flutter, Horizontal List View in Flutter. Create a Cool and Beautiful Horizontal List Display in Flutter. Example of Horizontal List News Flutter Display. Creating Card and Horizontal List Views in Flutter. Fluttering UI Card. Creating Views Quickly and Easily in Flutter. Script to Create a Horizontal List in Flutter Quickly. Combining Vertical List View and Horizontal List View, Creating a Professional Android Appearance, Flutter Template Design. Flutter List View Simple Design, Fresh & Modern Flutter Login Design, Flutter News Grid Design, Grid Page View View Flutter Product List
1. Create a new flutter project with the name you want. Then open lib/main.dart and replace it with the script below.
import 'package:flutter/material.dart';
void main() => runApp(ListViewApp());
class ListViewApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'List View App',
theme: ThemeData(primarySwatch: Colors.blue),
home: ListViewPage(),
);
}
}
class ListViewPage extends StatefulWidget {
@override
_ListViewPageState createState() => _ListViewPageState();
}
class _ListViewPageState extends State<ListViewPage> {
@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(16, 60, 16, 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
' SahreApp',
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.w500),
),
],
),
SizedBox(
height: 16,
),
Container(
height: 45,
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: 16),
Container(
height:
45,
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: 37,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Container(
// width: 100,
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: Text(
'All News',
style: TextStyle(fontSize: 12),
),
),
),
),
SizedBox(
width: 5,
),
Container(
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: Text(
'Tecnology',
style: TextStyle(fontSize: 12),
),
),
),
SizedBox(
width: 5,
),
Container(
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: Text(
'Travel',
style: TextStyle(fontSize: 12),
),
),
),
SizedBox(
width: 5,
),
Container(
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: Text(
'Financial',
style: TextStyle(fontSize: 12),
),
),
),
SizedBox(
width: 5,
),
Container(
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: Text(
'Sport',
style: TextStyle(fontSize: 12),
),
),
),
],
),
),
SizedBox(
height: 16,
),
SizedBox(
height: 170,
child: ListView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
itemBuilder: (_, int index) {
return Container(
padding: index == 0
? EdgeInsets.only(left: 12)
: EdgeInsets.all(0),
width: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10), // Adjust the border radius as needed
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 100,
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: 15,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.only(left: 16),
child: Text(
'Popular Posts',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
),
),
SizedBox(
height: 5,
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Text('See More'),
),
Icon(
Icons.arrow_right_alt_outlined,
size: 22,
)
],
),
SizedBox(
height: 170,
child: ListView.builder(
itemCount: 4,
scrollDirection: Axis.horizontal,
itemBuilder: (_, int index) {
return Container(
padding: index == 0
? EdgeInsets.only(left: 12)
: EdgeInsets.all(0),
width: 200,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10), // Adjust the border radius as needed
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 100,
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/2020/01/13/12/06/illustration-4762247_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(
'Explain quantum computing in simple terms',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
);
},
),
),
SizedBox(
height: 16,
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.only(left: 16),
child: Text(
'Recent Posts',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w500),
),
),
SizedBox(
height: 5,
),
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: Text('See More'),
),
Icon(
Icons.arrow_right_alt_outlined,
size: 22,
)
],
),
ListView.builder(
padding: EdgeInsets.only(left: 10, right: 10),
itemCount: 5,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (_, item) {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.only(
top: 16, left: 16, right: 16, bottom: 16),
child: Container(
height: 130,
child: Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Remembers what user said earlier in the conversation',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 8,
),
Text(
'Hello everyone, back again at sahretech. On this occasion, we will learn',
style: TextStyle(fontSize: 12),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 8,
),
Row(
children: [
Icon(
Icons.bookmark_outline,
size: 23,
),
Icon(
Icons.share_outlined,
size: 23,
),
],
)
],
),
),
SizedBox(
width: 10,
),
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://cdn.pixabay.com/photo/2023/04/02/23/08/ai-generated-7895586_1280.jpg'),
))),
],
),
),
),
);
},
),
],
),
],
),
);
}
}
2. Display when the script above is executed. We use several widgets such as
textformfield, button, text, horizontal listview, vertical listview, card,
stack.
|
| Tampilan List Horizontal dan List Vertical |
| Read Another Article ✨ |
| 📰 1. How to Create a Select Dropdown with API in Flutter read more |
| 📰 2. How to Create a Select Input Dropdown in Flutter read more |
|
📰 3. How to Make a QR Code Scanner in Flutter ENV read more |
|
📰 4. How to Display Youtube Videos in Flutter read more |
0 Comments
Come on ask us and let's discuss together
Emoji