[英]How to animate border for a container in flutter
我想用顫動的發光效果為我的容器的邊框設置動畫,你知道嗎?
下面的代碼將動畫邊框的寬度
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()));
}
}
感謝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())));
}
}
如果您在應用程序中使用狀態管理包,例如 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));
},
),
),
),
我希望你設法解決這個問題,我希望這個可以幫助其他人。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.