Getx could be powerful for simple 2D animation in Flutter. Getx is state management library which helps seamlessly manage your state.
Since, with Getx, you don't need to manage your context, it takes away passing context headache you might have BLoC or Riverpod.
With Getx, you don't need to use AnimationController and SingleTickerProviderStateMixin which saves a lot of headache and memory. Because with them, you need to do extra set.
With Getx we just a controller with GetxController and GetBuilder() and inject the controller using Get.put().
In general making 2D movable object you need to move x and y position. We will do both in this tut. We will be moving a bird on the UI. Let's take a look at our controller.
class MoveController extends GetxController{
double _move = 10;
double _startPos = 0;
double get startPos => _startPos;
double get move => _move;
@override
void onInit() {
_startPos = 500;
// TODO: implement onInit
super.onInit();
}
void setPos(double valueStart){
_startPos = valueStart;
_move = move +10;
update();
}
void setMove(){
_move = 10;
update();
}
}here, _startPos would be responsible for start position of the bird Y position (like y coordinate). And for X position (like x coordinate) we have _move variable.
We have initialized the both variables in onInit() method and initial position is 500 for _startPos.
setPos() and setMove() they are responsible for update _startPos and _move variable.
Let's see our UI.
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var images = [
"img/anim/anim1.jpeg",
"img/anim/anim2.jpeg",
"img/anim/anim3.jpeg",
];
int index=0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: GetBuilder<MoveController>(builder: (controller) {
return Stack(
children: [
Positioned(
bottom: controller.startPos,
left: controller.move,
child: Image.asset(
images[index]
),
width: 50,
height: 50,
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 100, vertical: 10),
child: ElevatedButton(
onPressed: () {
if(controller.startPos>Get.height-70){
controller.setPos(400);
controller.setMove();
}
if(index>=2){
index = 0;
}else{
index++;
}
var h = controller.startPos;
h = h + controller.move;
controller.setPos(h);
},
child: Text("Fly"),
),
))
],
);
}),
),
);
}
}Here we have Stack widget to show images and button on the top of each other. Since we are going to play with position and change position of the bird, Stack and Positioned widgets come into rescue.
