码迷,mamicode.com
首页 > 其他好文 > 详细

AnimatedContainerWidget(每日Flutter 小部件)

时间:2020-03-24 19:14:54      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:widget   animate   color   form   mamicode   and   center   one   技术   

AnimatedContainerWidget

AnimatedContainer({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
Curve curve = Curves.linear,
@required Duration duration,
})
import ‘package:flutter/material.dart‘;

class AnimatedContainerWidget extends StatefulWidget {
AnimatedContainerWidget({Key key}) : super(key: key);

_AnimatedContainerWidgetState createState() =>
_AnimatedContainerWidgetState();
}

class _AnimatedContainerWidgetState extends State<AnimatedContainerWidget> {
double _opacity = 1.0;
Matrix4 _transform = Matrix4.translationValues(0, 0, 0);

void _onTapHandle() {
setState(() {
_opacity = _opacity == 1.0 ? 0.0 : 1.0;
_transform = _opacity == 0.0
? Matrix4.translationValues(-300, 0, 0)
: Matrix4.translationValues(0, 0, 0);
});
}

@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Center(
child: Column(children: <Widget>[
AnimatedContainer(
alignment: Alignment.center,
padding: EdgeInsets.all(5),
foregroundDecoration: BoxDecoration(
color: Colors.transparent),
width: 200,
height: 200,
constraints: BoxConstraints(minHeight: 200),
curve: Curves.easeInToLinear,
duration: Duration(milliseconds: 500),
transform: _transform,
child: Container(
alignment: Alignment.center,
width: 100,
height: 50,
color: Colors.blue,
))
]),
),
Positioned(
bottom: 1,
right: 1,
child: InkWell(
child: Container(
width: 30,
height: 30,
margin: EdgeInsets.fromLTRB(0, 0, 10, 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.pink,
),
child: Icon(
Icons.play_arrow,
color: Colors.white,
),
),
onTap: _onTapHandle,
),
)
],
);
}
}

 

技术图片

 

AnimatedContainerWidget(每日Flutter 小部件)

标签:widget   animate   color   form   mamicode   and   center   one   技术   

原文地址:https://www.cnblogs.com/wjw334/p/12560508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!