Flutter Avengers Endgame Wiki App
Hello everyone 👋
We’re all hyped for the new Avengers movie. Today I am going to tell you about making of Avengers Endgame Wiki app I made with Flutter. 😏
First we’re creating main.dart file. We are creating a initialRoute inside of Material Widget, because we want the app to go to pages with routes. We determine a main route with initialRoute. Just like in the codes below, after “/” we determine routes. After determining the main route we can determine other routes too. This way, navigating through screens becomes easier.
Scaffold Widget in Stateful Widget, is the skeleton of our home.dart page. With this widget, we can use AppBar, Body and many more features. We use AppBar to make top of our app. To make left side of AppBar, we use Actions to show icons or images. We create a assets directory for images we’re going to use and describe them in pubspec.yaml file.
Now we build the home screen. Create a dart file named home.dart in lib directory. In home screen, we want to show chronological order of Marvel movies. To do that, we create a ListView. A ListView simply takes a list of children and makes it scrollable, and this is a feature we want. Because in ListView, we can add colors, text and images to our app and this is ideal for our chronological order.
After a few coding, we have screen like down below. 👇
Then we are adding BottomNavigationBar to create the bottom navigation bar of our app (duh 😋). Sizedbox, which we used in BottomNavigationBar is a simple but very useful widget. Inside this SizedBox widget, we create 2 buttons of our navigation bar with RaisedButton. Here, to lead a screen we use Navigator.pushNamed and that way we can lead to screens with routes we created before.
Our BottomNavigationBar should look like below.👇
To turn back to our home screen, we want to create a new button. Here, I choosed floatingActionButton. To understand what is floatingActionButton, we can give Gmail app as an example. For Gmail app, floating action button is used to create a New Mail. The purpose of FloatingActionButton, is an action that user needs to use it often or wants to use it often. Turning back to home screen is an action we’re going to use very often, so I used this button.
Let’s start to build our heroes and villians screen. I did same steps for both screens, that’s why I am sharing only one of theirs. You can use these steps for both heroes and villians screens. 😬
First we create a new dart file for the heroes screen. In this screen, again we use ListView to make this screen scrollable.
In ListView, we add Containers to list our heroes. With adding ListTile, we can easily add images, text and icons. Again we use Navigation.pushNamed to lead to our button to a page.
At last, we heroes’ profile page. Again we create a dart file for profile screen.
For this page we create a different appBar. In this appBar we have title and an icon to return heroes screen. Then we create the part that contains character’s image and specifications. To do that, we use Column widget. Because we use Column widget to order objects vertical. With Column, we show text bottom of image.
After we done with coding, this is the look of our hero’s profile screen.
For the other character profiles, re-do the steps we did for profile screen.
You can check out the code from GitHub link. You can run the app and see how it works, or change the codes all the way you want 🙂
