Анимация эффекта прокрутки Flutter Row

Aug 26 2020

В моем текущем проекте есть прокручиваемая строка, которая работает нормально, но я не могу найти способ сделать какую-то статическую прокрутку, когда при прокрутке к элементу элемент автоматически центрируется.

Вот что у меня сейчас есть:

Когда карточки прокручиваются, они остаются в том положении, в котором они заканчиваются:

Эффект, которого я хочу достичь, - это выравнивание карты по центру при прокрутке к следующей карте.

Есть ли виджет, который действительно так работает?

Ответы

1 meditat Aug 26 2020 at 14:35

Попробуй это,

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

Решение было простым:

 Padding(
      padding: const EdgeInsets.symmetric(vertical: 80),
      child: Container(
        child: PageView(
          controller: controller,
          scrollDirection: Axis.horizontal,
          pageSnapping: true,
          physics: BouncingScrollPhysics(),
          children: [CardMovie(), CardMovie(), CardMovie()],
        ),
      ),
    )

используя виджет PageView и задавая верхнюю часть заполнения, потому что высота виджета была во весь экран.