I want to create Horizontal V shaped List View just like in the following image , it will scroll from right to left and top to bottom. The labels are index of each container that will be inside it. List will contain a text widget displaying the index. List will detect users scroll up or down gesture and then move the list accordingly. When scrolled down , Label 1 will move to 2nd index that is in place of Label 2 and label 6 will move to index 0 that is place of Label 1 forming a loop.
I used chat GPT but the best code it has given me is this : –
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('V-Shaped ListView'),
),
body: Center(
child: ClipPath(
clipper: VShapeClipper(),
child: Container(
color: Colors.blueAccent,
width: 300, // Width of the V-shape
height: 500, // Height of the V-shape
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8.0),
child: ListTile(
title: Text('Item $index'),
),
);
},
),
),
),
),
),
);
}
}
class VShapeClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
// Start at the top left
path.moveTo(0, 0);
// Draw the left side of the V
path.lineTo(size.width / 2, size.height);
// Draw the right side of the V
path.lineTo(size.width, 0);
// Close the path (back to the start)
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
but it is not even close to what I want
2