Making Carousels for Games in Flutter
You may have seen that in some games played on the phone, the player selection part is in the form of a carousel. Let’s look at how this kind of selection system can be made as a widget in Flutter.
If you’re new to Flutter like me or just starting out, you can check out Flutter’s documentation for setups and more. There may be deficiencies or erroneous uses in the codes I share. I would be very happy if you forward them to me so that I can edit the article again and improve myself :)
We create a player model for adding and removing players, changing nicknames and photos, etc. that you may want to add to your project. We will use Provider so that other widgets can be aware of the changed information.
Let’s create the player model.
We know that everything in Flutter is a widget. For this, let’s write the widget of the players to be used in our carousel as a start. This widget will change its size, opacity, photo, and name parts according to the given parameters.
We will have a Player Carousel widget where we will display the carousel items according to the parameters we want. We will write the view model of this widget in order to move the carousel to the right and left. We will also rotate the carousel in continuity, and adjust the index of the selected player.
Let’s start with the writing of the widget. By making changes to the carousel items we wrote above, you can arrange them in any size, number, and opacity. For now, we will do it in the view in the screenshot at the beginning of the article.
Let’s write the view model of our widget. Here are the functions we use in our widget. When there is a change, we can notify other widgets with the notifyListener() function and make changes to other widgets if needed.
Our structure is ready. The parts up to this point will be enough for you to add to your own project. One of the points you should pay attention to is the use of the provider. I am also sharing the main.dart file for example usage. The changes you make here are entirely up to you. I made a version where one of the players would be randomly selected at the start and screened. You can find the entire sample project here.
I'll continue to learn Flutter and share this build on pub.dev. I aim to take it as a package and bring it to the version that the developers will use and share it as a blog on Medium. Thank you for reading the first Medium post I shared. If you want to read the articles that I will share in the future, you can follow me.
