如何在Flutter中的小部件上实现此动画

eoxn13cs  于 2023-11-21  发布在  Flutter
关注(0)|答案(4)|浏览(168)

我想实现一个自定义的瓷砖这个动画。那么,我们如何才能实现这个幻灯片动画,以突出一个小部件。enter image description here
所以给予你的建议,使之成为可能

c2e8gylq

c2e8gylq1#

使用此包动画:^2.0.8

kb5ga3dv

kb5ga3dv2#

使用此软件包“marquee 2.2.3”。

yh2wf1be

yh2wf1be3#

我通过编写自定义代码解决了这个问题。

import 'package:flutter/material.dart';

class LinearWidgetHighlighter extends StatefulWidget {
   const LinearWidgetHighlighter({
     Key? key,
     required this.childWidget,
     required this.gradientColors
   }) : super(key: key);

  final Widget childWidget;
  final List<Color> gradientColors;

  @override
  State<LinearWidgetHighlighter> createState() => _LinearHighlighterState();
}

class _LinearHighlighterState extends State<LinearWidgetHighlighter> with SingleTickerProviderStateMixin {

  late final AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController.unbounded(vsync: this)
      ..repeat(min: -1,max: 1.5,period: Duration(milliseconds: 2500));
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (_,child) {
        return ShaderMask(
          shaderCallback: (rect) {
            return LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                transform: _SlideGradientTransform(parent: _animationController.value),
                colors: widget.gradientColors
            ).createShader(rect);
          },
          child: child,
        );
      },
      child: widget.childWidget,
    );
  }
}
class _SlideGradientTransform extends GradientTransform{
  final double parent;

  const _SlideGradientTransform({required this.parent});
  @override
  Matrix4? transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.translationValues(bounds.width*parent, 0, 0);
  }
}

字符串
我们可以用它来...

Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              LinearWidgetHighlighter(
                  childWidget: CustomSettingListTile(
                    prefixIcon: Icons.currency_rupee,
                    labelText: "Subscription Plus",
                    trailingWidget: const Icon(
                      Icons.arrow_forward_ios,
                      size: 20,
                      color: Colors.white,
                    ),
                    onTap: () {
                      // Get.to(() => const FeedbackScreen());
                    },
                  ),
                gradientColors: [
                  Colors.white,
                  Colors.orange.shade600,
                  Colors.white,
                ],
              ),
              LinearWidgetHighlighter(
                childWidget: const Divider(),
                gradientColors: [
                  Colors.transparent,
                  Colors.orange.shade50,
                  Colors.orange.shade300,
                  Colors.orange.shade600,
                  Colors.orange.shade300,
                  Colors.orange.shade50,
                  Colors.transparent,
                ],
              )
            ],
          ),

9wbgstp7

9wbgstp74#

我有另一个最好的和简短的解决方案。首先将这些包添加到pubspec.yml- flutter_animate:^4.2.0+1 shimmer:^3.0.0

Container(
                decoration: const BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.black,
                      width: 2,),
                  ),
                ),
                child: CustomSettingListTile(
                  prefixIcon: Icons.currency_rupee,
                  labelText: "Subscription Plus",
                  trailingWidget: const Icon(
                    Icons.arrow_forward_ios,
                    size: 20,
                    color: Colors.white,
                  ),
                  onTap: () {
                    // Get.to(() => const FeedbackScreen());
                  },
                ),
              )
            .animate(
                onPlay:(controller) => controller.repeat(),
              )
              .shimmer(
                angle: 0,
                duration: const Duration(seconds: 2),
                color: Colors.orange.shade600
              )

字符串

相关问题