Animasi Flutter Row Scroll Effect
Proyek saya saat ini memiliki baris yang dapat digulir yang berfungsi dengan baik, tetapi saya tidak dapat menemukan cara untuk membuat semacam gulungan statis, di mana ketika Anda menggulir ke suatu item, item tersebut dipusatkan secara otomatis.
Inilah yang saya miliki saat ini:
Saat kartu digulir, mereka tetap pada posisi saat pengguliran selesai:
Efek yang ingin saya capai adalah kartu sejajar di tengah saat menggulir ke kartu berikutnya.
Apakah ada widget yang berfungsi seperti itu?
Jawaban
Coba ini,
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final List<String> images = ["Me", "You", "Foo", "Baa"];
final PageController controller = PageController(viewportFraction:0.8);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: PageView.builder(
controller: controller,
itemCount: images.length,
itemBuilder: (context,index){
return Container(
margin: EdgeInsets.all(16),
child: Center(child:Text(images[index])),
color: Colors.grey.shade200
);
}
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
}
}
Solusinya sederhana:
Padding(
padding: const EdgeInsets.symmetric(vertical: 80),
child: Container(
child: PageView(
controller: controller,
scrollDirection: Axis.horizontal,
pageSnapping: true,
physics: BouncingScrollPhysics(),
children: [CardMovie(), CardMovie(), CardMovie()],
),
),
)
menggunakan widget PageView dan memberikan padding top karena ketinggian widget tersebut adalah layar penuh.