Прокрутите Gridview, как орбиту в флаттере

GridView не может обрабатывать нелинейную анимацию, которую вы ищете.

Возможно, вы можете использовать Stack и GestureController для размещения и анимации элементов на экране.

посмотрите это видео

Попробуйте этот пакет

анимированные_виджеты: ^ 1.1.0

body: Center(
            child: GridView.count(
                crossAxisCount: 2,
                crossAxisSpacing: 70,
                mainAxisSpacing: 70,
                reverse: true,
                controller: scrollController,
                children: string.map((e) {
                  //string.map((e) {
                  return TweenAnimationBuilder(
                    tween: Tween<double>(begin: 0.9, end: 0),
                    curve: Curves.easeIn,
                    duration: const Duration(seconds: 3),
                    builder: ((context, value, child) {
                      return Transform.translate(
                        filterQuality: FilterQuality.high,
                        offset: e.isEven ? Offset(value * e * -100, 100) : Offset(value * e * 100, 0.0),
                        child: Transform.translate(
                          offset: e.isEven
                              ? Offset(0.0, value * e * -100)
                              : Offset(0.0, value * e * -100),
                          child: child,
                        ),
                      );
                    }),
                    child: TranslationAnimatedWidget(//will forward/reverse the animation
                      curve: Curves.bounceOut,
                      duration: Duration(seconds: 3),
                      values: [
                        Offset(0, 300),
                        Offset(0, -20),
                        Offset(0, 0),
                      ],
                      child: Container(
                        child: Text(e.toString()),
                        color: Colors.red,
                        height: 50,
                      ),
                    ),
                  );
                }).toList()),[][1]

моя попытка реализовать этот эффект

функции:

• начальная анимация
• эффект вращения
• эффект непрозрачности
• бесконечная прокрутка

ограничения:

• если количество элементов нечетное, бесконечная прокрутка не будет вести себя так, как ожидалось
• если количество просмотров четное, вертикальные элементы не будут в центре

демо: https://imgur.com/a/Bf05349

код:

orbit_page.dart

class OrbitPage extends StatelessWidget {
  const OrbitPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      body: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 30,
        ),
        child: OrbitView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Placeholder(
              child: CircleAvatar(
                child: Center(
                  child: Text('$index'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

orbit_view.dart

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class OrbitView extends StatefulWidget {
  /// number of items
  final int itemCount;

  /// number of vertical pairs
  final int viewCount;

  /// aspect ratio of the child widget
  final double aspectRatio;

  /// margin from the edge of screen
  final double edgeMargin;

  /// vertical margin
  final double verticalMargin;

  /// this distance affect rotation angle
  final double shiftDistance;

  final Duration animationDuration;
  final Duration animationDelay;

  final Curve opacityCurve, rotationCurve, animationCurve;
  final Widget Function(BuildContext, int) itemBuilder;

  const OrbitView.builder({
    super.key,
    this.viewCount = 5,
    this.aspectRatio = 1,
    this.edgeMargin = 20.0,
    this.verticalMargin = 35.0,
    this.shiftDistance = 100.0,
    this.opacityCurve = Curves.easeIn,
    this.rotationCurve = Curves.linear,
    this.animationCurve = Curves.easeInOutQuad,
    this.animationDuration = const Duration(seconds: 2),
    this.animationDelay = const Duration(seconds: 1),
    required this.itemCount,
    required this.itemBuilder,
  });

  @override
  State<OrbitView> createState() => _OrbitViewState();
}

class _OrbitViewState extends State<OrbitView> {
  /// to simulate infinite backwords scroll
  final _initialPage = 10000;
  double _currentPage = 10000.0;
  bool _duringInitialAnimation = true;
  late final PageController _controller;

  @override
  void initState() {
    _controller = PageController(
      initialPage: _initialPage,
      viewportFraction: math.min(.25, 1 / widget.viewCount),
    );
    _controller.addListener(updateCurrentPage);

    SchedulerBinding.instance.addPostFrameCallback((_) async {
      await Future.delayed(widget.animationDelay);
      await _controller.animateToPage(
        _initialPage - widget.viewCount,
        duration: widget.animationDuration,
        curve: widget.animationCurve,
      );
      _duringInitialAnimation = false;
    });

    super.initState();
  }

  @override
  void dispose() {
    _controller.removeListener(updateCurrentPage);
    _controller.dispose();
    super.dispose();
  }

  void updateCurrentPage() {
    _currentPage = _controller.page!;
  }

  /// for each index (page), contains the left and the right widget
  Widget left(BuildContext context, int index) {
    final realIndex = (2 * index) % widget.itemCount;
    return widget.itemBuilder(context, realIndex);
  }

  /// for each index (page), contains the left and the right widget
  Widget right(BuildContext context, int index) {
    final realIndex = (2 * index + 1) % widget.itemCount;
    return widget.itemBuilder(context, realIndex);
  }

  /// build the left and the right widget
  Widget buildNode(int i, Widget node, bool isLeft) {
    return AnimatedBuilder(
      animation: _controller,
      child: AspectRatio(
        aspectRatio: widget.aspectRatio,
        child: node,
      ),
      builder: (context, child) {
        final dist = widget.shiftDistance + widget.edgeMargin;
        final diff = _calc(i, _currentPage, widget.viewCount);

        /// apply the curve to the position
        final transDist = dist * widget.rotationCurve.transform(diff);

        /// apply the curve to the opacity
        double transOpactiy = widget.opacityCurve.transform(diff);

        /// for initial animation
        final offset = _initialPage - widget.viewCount ~/ 2;

        /// initially hide some items for the scroll animation effect
        if (_duringInitialAnimation && i > offset) transOpactiy = 0;

        return Positioned(
          top: isLeft ? 0 : widget.verticalMargin,
          left: isLeft ? -widget.shiftDistance + transDist : null,
          right: isLeft ? null : -widget.shiftDistance + transDist,
          bottom: isLeft ? widget.verticalMargin : 0,
          child: Opacity(opacity: transOpactiy, child: child!),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _controller,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, index) {
        return Stack(
          children: [
            buildNode(index, left(context, index), true),
            buildNode(index, right(context, index), false),
          ],
        );
      },
    );
  }
}

/// this function transforms the distance between
/// the index of the current page and the other nearby pages
///
/// e.g: initially for viewCount of 3 (only display 3 pages) we have
/// i = 9998, 9999, 10000, 10000, 10001, and p is 10000
/// the first and the last should not be displayed, we can do this like this:
///
/// this function maps the i values to 2, 1, 0, 1, 2    (abs)
/// then returns                       0, 1, 1, 1, 0
double _calc(int i, double p, int viewCount) {
  final dist = (i - p).abs();

  /// index is inside view range
  if (dist <= viewCount ~/ 2) return 1;

  /// index is not inside view range
  /// e.g in opacity this means not visible
  if (dist >= viewCount ~/ 2 + 1) return 0;

  /// index is partially inside view range
  /// we can use this as opacity and rotation fraction
  return viewCount ~/ 2 + 1 - dist;
}