Animasi Flutter Row Scroll Effect

Aug 26 2020

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

1 meditat Aug 26 2020 at 14:35

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);
} 
}

JoséLuna Aug 26 2020 at 15:06

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.