Gumao-Flutter: Developing beautiful UIs in Flutter
Flutter is a new trend in the world of mobile developers to write beautiful and expressive UIs for Android and iOS.
Since I started developing apps with flutter, I love picking up random designs from Dribbble, Behance, etc. and develop them using flutter. I spent so many days with flutter and dart coding user interfaces mostly.
I came across a beautiful design on dribbble designed by Vijay Verma. You can check it out his work on dribbble, he’s genius!
This is the design we are going to create in flutter throughout this article. The design has two screens, in this article, I will build HomeScreen, and the DetailsScreen will be built in the next part of this article.
First of all, the important thing while creating this app is the assets. I searched on the internet for similar PNGs and luckily got them. So, If you are following this article, here you can download them.
Initial Steps
Here is the basic main.dart file we are going to start with.
Also, I have created a separate file constants.dart for some constant styles like gradients, colors, fonts, etc.
Now, it’s time to jump on the homepage and start developing it. I have used SingleChildScrollView , a widget for the homepage for more flexibility. Using Container as a child of SingleChildScrollView. Now, for the gradient background color scheme, I used homebody , a widget from constants.dart(line 54 -67) as a BoxDecoration for Container.
For arranging the homebody layout, we will need to use a column widget, and nesting widgets inside the column will get us expected results. The top transparent appbar section is just a row with two widgets Text & CircleAvatar.
Here is the code for that,
Now, it’s time to introduce a new package that will help us creating swiper cards. The name of the package is flutter_swiper. You can head over to pub.dev and install the package into your pubspec.yaml file dependencies.
For the swiper-card section, we’ll use a container (of height 550 with padding from the left side only to create a stacked card effect) as a parent of the widget Swiper.
There are many things you can do with the flutter-swiper package, like multiple types of layouts, scrolling directions, pagination indicators, autoplay pagination, etc.
The prerequisite for building swiper cards is one more file named swiper_data.dart, in this file, we will make a model for all the data we want to show in the card. Below is the example of one character info. For full file, head over to this link.
Now, heading over to the swiper widget in the container below is the code for the same.
Line-wise Explanation:
line 5: If you want to make cards auto-swipe, you can set autoplay:true.
line 6: itemCount property used to define how many item cards you want to display in UI.
line 7–8: itemWidth & layout property is used to set the width of the card, and type of the layout you need to show in the UI, I used swiperLayout.STACK to create a stacked card like effect.
line 9–15: pagination is used to build the little page-indicator below the cards, which takes DotSwiperPaginationBuilder as a constructor. ActiveSize, color, activeColor are self-explainable.
line 16–23: itemBuilder is the property which builds the actual content. Inkwell is to create a nice splash effect onTap. We want to get routed to the details page by tapping on the card that’s why you see DetailPage as an attribute of the pageBuilder.
Now, we have just created a bare architecture for swiper cards, we didn’t do anything related actual UI of the card. We will start with the Stack widget as a child of swiper for stacking character image, name, rating, game name, etc.
I will not explain the alignment, color, spacing between the widgets as it’s not that confusing. You can visit the home_page.dart, line 81–135 for the whole reference. For the rating-box, Game-name, and character-name refer below snippet.
For the position of the character, I have used positioned widget with a little opacity in the styling. The image of the character is also easy to place in the last of the stack so that it stays on the very top.
For the bottomNavigation part I didn’t use inbuilt widget rather I used simple Row and placed iconButton into it. Below is the gist for that:
Here is a demo of the final achieved screen(HomeScreen). If you want to see the full code for this article, head over to the repository, I created for this project, don’t forget to ⭐️ the repo when you’re there!
For the detail, screen development stay tuned for the next part of the blog!
Don’t forget to share this article, you know the drill😉!
Thanks for reading and following along, Peace ☮✌️.
Feel free to reach out to me:
GitHub — https://github.com/iabhishek07
Twitter — https://twitter.com/I_AM_Abhishek07
LinkedIn — https://www.linkedin.com/in/abhishek-wagh-674283141/
EMail — waghabhi21@gmail.com
