完成此功能,需要三个步骤
- 创建一个StatefulWidget
- 创建一个AnimatedContainer
- 触发动画重新构建新的属性
对以上步骤做详细说明
1,创建一个StatefulWidget,新建一个类继承StatefulWidget,要实现抽象方法createState(),
createState要返回一个State对象,然后创建一个类继承自State对象,类名为MyAnimatedContainerState
2,创建一个AnimatedContainer,定义变量width, height,background color , border radius变量,赋值给AnimatedContainer的属性
3, 触发动画重新构建新的属性, 创建一个Scaffold对象,把创建的AnimatedContainer组件赋值给Scaffold对象的body属性,为了让动画在屏幕中间显示,选择Center组件包裹AnimatedContainer,创建一个FloatingActionBarButton对象,显示文本为Text 更新,实现点击onPress事件,动态的修改宽、高、颜色、以及corner,这些变化都应包含在setState函数当中,才会触发Flutter Engine重新初始化页面
下面是完整的代码
效果图如下