我想动画边界为我的容器与发光的影响,在Flutter,你有什么想法?
fdbelqdn1#
下面的代码将动画的宽度的边界
class Test extends StatefulWidget { @override _TestState createState() => _TestState(); } class _TestState extends State<Test> with TickerProviderStateMixin { AnimationController _resizableController; AnimatedBuilder getContainer() { return new AnimatedBuilder( animation: _resizableController, builder: (context, child) { return Container( padding: EdgeInsets.all(24), child: Text("SAMPLE"), decoration: BoxDecoration( shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(12)), border: Border.all( color: Colors.blue, width: _resizableController.value * 10), ), ); }); } @override void initState() { _resizableController = new AnimationController( vsync: this, duration: new Duration( milliseconds: 1000, ), ); _resizableController.addStatusListener((animationStatus) { switch (animationStatus) { case AnimationStatus.completed: _resizableController.reverse(); break; case AnimationStatus.dismissed: _resizableController.forward(); break; case AnimationStatus.forward: break; case AnimationStatus.reverse: break; } }); _resizableController.forward(); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text("Test"), centerTitle: true, ), body: Center(child: getContainer())); } }
字符串
的数据
olhwl3o22#
感谢Lakhwinder Singh,我做了这个代码,它做了我要求的发光效果:
import 'package:flutter/material.dart'; void main() { runApp(new Test()); } class Test extends StatefulWidget { @override _TestState createState() => _TestState(); } class _TestState extends State<Test> with TickerProviderStateMixin { AnimationController _resizableController; static Color colorVariation(int note){ if(note <= 1){ return Colors.blue[50]; }else if(note>1 && note<=2){ return Colors.blue[100]; }else if(note>2 && note<=3){ return Colors.blue[200]; }else if(note>3 && note<=4){ return Colors.blue[300]; }else if(note>4 && note<=5){ return Colors.blue[400]; }else if(note>5 && note<=6){ return Colors.blue; }else if(note>6 && note<=7){ return Colors.blue[600]; }else if(note>7 && note<=8){ return Colors.blue[700]; }else if(note>8 && note<=9){ return Colors.blue[800]; }else if(note>9 && note<=10){ return Colors.blue[900]; } } AnimatedBuilder getContainer() { return new AnimatedBuilder( animation: _resizableController, builder: (context, child) { return Container( //color: colorVariation((_resizableController.value *100).round()), padding: EdgeInsets.all(24), child: Text("SAMPLE"), decoration: BoxDecoration( shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(12)), border: Border.all( color: colorVariation((_resizableController.value *10).round()), width:10), ), ); }); } @override void initState() { _resizableController = new AnimationController( vsync: this, duration: new Duration( milliseconds: 500, ), ); _resizableController.addStatusListener((animationStatus) { switch (animationStatus) { case AnimationStatus.completed: _resizableController.reverse(); break; case AnimationStatus.dismissed: _resizableController.forward(); break; case AnimationStatus.forward: break; case AnimationStatus.reverse: break; } }); _resizableController.forward(); super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( home:Scaffold( backgroundColor: Colors.white, body: Center(child: getContainer()))); } }
sdnqo3pr3#
如果您在应用中使用状态管理包,例如Get、Provider等,则可以使用您可以提供的bool侦听AnimationContiner。假设您有一个名为isEmptyError的bool变量,如下所示
Get
Provider
bool
AnimationContiner
isEmptyError
final isEmptyError = false.obs; Obx( () => AnimatedContainer( duration: const Duration(seconds: 1), curve: Curves.fastOutSlowIn, decoration: BoxDecoration( border: Border.all( color: Get.theme.primaryColor, width: 6, style: isEmptyError() ? BorderStyle.solid : BorderStyle.none, ), ), child: TextButton( style: ButtonStyle(overlayColor: MaterialStateColor.resolveWith((_) => Colors.transparent)), child: const Text('Press To Flash'), onPressed: () { isEmptyError(true); Future.delayed(const Duration(milliseconds: 300), () => isEmptyError(false)); Future.delayed(const Duration(milliseconds: 600), () => isEmptyError(true)); Future.delayed(const Duration(milliseconds: 900), () => isEmptyError(false)); }, ), ), ),
ct3nt3jp4#
我发现将AnimatedContainer与Timer一起使用最简单。下面是一个完整的工作示例:https://dartpad.dev/010e8a96bae7cd84375c087cc06c11d3
AnimatedContainer
Timer
import 'dart:async'; import 'package:flutter/material.dart'; class AnimatedBorderComponent extends StatefulWidget { const AnimatedBorderComponent({ super.key }); @override State<AnimatedBorderComponent> createState() { return _AnimatedBorderComponentState(); } } class _AnimatedBorderComponentState extends State<AnimatedBorderComponent> { int index = 0; List<Color> colors = [Colors.red, Colors.orange, Colors.yellow, Colors.green, Colors.blue, Colors.purple]; Duration duration = const Duration(milliseconds: 250); Timer? _timer; @override void initState() { super.initState(); // set up a timer, make state changes, and redraw. _timer = Timer.periodic(duration, (timer) { index = (index + 1) % colors.length; if (mounted) { setState(() {}); } }); } @override void dispose() { super.dispose(); // make sure to dispose of the timer when you're done. _timer?.cancel(); } @override Widget build(BuildContext context) { return AnimatedContainer( duration: duration, curve: Curves.easeInOut, // change whatever properties you want, and the // AnimatedContainer takes care of the heavy lifting. decoration: BoxDecoration( border: Border.all(color: colors[index], style: BorderStyle.solid, width: 4), ), ); } }
3htmauhk5#
根据AaronScherbing的回答,总是在处理小部件之前取消东西
5条答案
按热度按时间fdbelqdn1#
下面的代码将动画的宽度的边界
字符串
的数据
olhwl3o22#
感谢Lakhwinder Singh,我做了这个代码,它做了我要求的发光效果:
字符串
sdnqo3pr3#
如果您在应用中使用状态管理包,例如
Get
、Provider
等,则可以使用您可以提供的bool
侦听AnimationContiner
。假设您有一个名为
isEmptyError
的bool
变量,如下所示字符串
ct3nt3jp4#
我发现将
AnimatedContainer
与Timer
一起使用最简单。下面是一个完整的工作示例:https://dartpad.dev/010e8a96bae7cd84375c087cc06c11d3
字符串
3htmauhk5#
根据AaronScherbing的回答,总是在处理小部件之前取消东西