how to create ListView like given image - flutter

Question

Blockquote
how to create list view like this how to create this type layout in flutter

Answer 1

you can copy the whole code in below
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PageController controller;
double page = 0.0;
#override
void initState() {
super.initState();
controller = PageController(viewportFraction: 0.5)
..addListener(() {
setState(() {
page = controller.page!;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey.shade100,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(26),
color: Colors.white,
),
child: Column(children: [
Text(
'head widgets',
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade500,
),
),
Expanded(
child: PageView.builder(
controller: controller,
itemCount: pages.length,
itemBuilder: (context, index) {
if (index == page) {
return Transform.scale(
scale: 1,
child: pages[index],
);
} else if (index < page) {
return Transform.scale(
scale: max(1 - (page - index), 0.75),
child: pages[index],
);
} else {
return Transform.scale(
scale: max(1 - (index - page), 0.75),
child: pages[index],
);
}
},
),
),
Text(
'indicator',
style: TextStyle(fontSize: 12),
)
]),
),
),
);
}
List<Widget> pages = [
FlutterLogo(
size: 100,
),
FlutterLogo(
size: 100,
),
FlutterLogo(
size: 100,
),
];
}
and the result