Overlapped CoverFlow in Flutter
157
It is not overlapped coverflow what you want exactly.
Here is my package. https://pub.dev/packages/coverflow
I tried to implement overlapped widget... failed...
import 'package:coverflow/coverflow.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> titles = [
"Title1",
"Title2",
"Title3",
"Title4",
"Title5",
"Title6",
"Title7",
"Title8",
];
final List<Widget> images = [
Container(
color: Colors.red,
),
Container(
color: Colors.yellow,
),
Container(
color: Colors.black,
),
Container(
color: Colors.cyan,
),
Container(
color: Colors.blue,
),
Container(
color: Colors.grey,
),
Container(
color: Colors.green,
),
Container(
color: Colors.amber,
),
];
List<Widget> images2 = [
Image.asset('assets/1.jpg'),
Image.asset('assets/2.jpg'),
Image.asset('assets/3.jpg'),
Image.asset('assets/4.jpg'),
Image.asset('assets/5.jpg'),
Image.asset('assets/6.jpg'),
Image.asset('assets/7.jpg'),
Image.asset('assets/8.jpg'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 200,
child: CoverFlow(
images: images2,
titles: titles,
textStyle: TextStyle(color: Colors.red),
),
),
),
);
}
}
Author by
Md Delwar Hossain
Updated on January 02, 2023Comments
-
Md Delwar Hossain over 1 year
I was trying to create the old Iphone Coverflow design using flutter. I have tried listview with align widthfactor. But it overlaps only one way.
Container( height: 300, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: 25, itemBuilder: (BuildContext context, int position) => Align( widthFactor: 0.8, child: Container( height: 200, width: 120, color: Colors.green.withOpacity(0.4), child: Center(child: Text(position.toString())), ), ), ), ),
I need to achieve the design on the picture. How can I achieve this? I have tried all available packages I think like PreloadPageview, finite coverflow, simple coverflow, perspective pageview and so on. I can achieve the transformation but not the overlapping both side and horizontal scroll at a time
-
G H Prakash over 2 yearsDid you use any packages?
-
Md Delwar Hossain over 2 yearsI have tried all available packages like PreloadPageview, finte coverflow, simple coverflow and so on. I can achieve the transformation but not the overlapping both side and horizontal scroll at a time
-
G H Prakash over 2 yearstry this . this was awsome. pub.dev/packages/carousel_slider
-
Md Delwar Hossain over 2 years@GHPrakash I tried this one too. All these packages are created mainly using pageview. And flutter pageview doesn't overlap.
-
-
Md Delwar Hossain over 2 yearsI tried this one too. But in pageview pages don't overlap. If the viewFraction is reduced the card size reduces while I need overlapping the reduced size
-
Md Delwar Hossain over 2 yearsI highly appreciate your hardwork. You've done really nice job. Though this is not the exact solution but the closest one. I am accepting this. Thank you
-
Md Delwar Hossain over 2 yearsI have successfully done the overlapping. If you agree I can contribute to your pub package
-
KuKu over 2 yearsSure. No problem. Please contribute this package.