我想实现一个自定义的瓷砖这个动画。那么,我们如何才能实现这个幻灯片动画,以突出一个小部件。enter image description here所以给予你的建议,使之成为可能
c2e8gylq1#
使用此包动画:^2.0.8
kb5ga3dv2#
使用此软件包“marquee 2.2.3”。
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, ], ) ], ),
型
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 )
字符串
4条答案
按热度按时间c2e8gylq1#
使用此包动画:^2.0.8
kb5ga3dv2#
使用此软件包“marquee 2.2.3”。
yh2wf1be3#
我通过编写自定义代码解决了这个问题。
字符串
我们可以用它来...
型
9wbgstp74#
我有另一个最好的和简短的解决方案。首先将这些包添加到pubspec.yml- flutter_animate:^4.2.0+1 shimmer:^3.0.0
字符串