Flutter UI | NFT collection Application
Flutter is a nice tool for developing apps on multiple platforms from one codebase. Now, everyone knows NFTs are too much in hype and so I decided to make a basic NFT collection app using Flutter.
For those who want to just watch a video, please follow this recorded video on Youtube.
Flutter App Setup
Before we start our coding, we need to set up an initial sample app. The first thing you will want to do is ensure that you have the development environment set up. To keep things simple, I will be using Android Studio for coding and iOS simulators. If you haven’t setup up Flutter for Android Studio before, you can see the instructions here. Once you are done, you should be able to see a basic Counter app which is the default app provided to you.
Screen Setup
To keep things easy, we will put all of our code for registering a user and signing in existing users in one place:- main.dart. You can replace the context of that file with the following code:-
Let’s try to understand what’s happening at each step:-
- We have List data structure -_listItem , which basically stores the images that we will be displaying in our body section.
- appBar field takes in AppBar component which is going to be our header section.
- body field contains all the sections and Containers to list the collection images in the form of a grid.
- The last field is bottomNavigationBar which takes in the bottomAppBar component using to display the bottom tabs icons.
Conclusion
This was a small UI based article on Flutter. Please feel free to leave comments and also leave suggestions if anything new you want to see and learn.
About Me
Hi Folks! I am Kavit, a software engineer with a passion for teaching.
📹 YouTube: https://www.youtube.com/channel/UCV-_hzlbVSlobkekurpLOZw/featured
📸 Instagram: https://www.instagram.com/code_with_kavit/
📂 Github: https://github.com/Kavit900
💻 Discord: https://discord.gg/V3rhXEPe
