How to create a Side Menu in Kodular

Intro

So, today I will show you how can you create a side menu in your app to look your apps more professional. You don’t need any external extension for this. Just drag and drop Side Menu Layout from Layout. Here in this tutorial I created a men bar for an example. The menu bar has a Back button, which is a Clickable Label and whose Text is menu and Font is MaterialIcons.
So, here if you are creating an app and there is a Login system with Firebase Authentication or Firebase Database, then you can easily show the data to the Side Menu. Like if your user logged in with his/her email id and he/she entered a name then by coding you can store that data to Firebase DB and then Get that data and show that to the Side Menu’s Header Title and Header Sub Title. Also your user can see their custom Profile Picture at the top of the Side Menu. Which is explained in the Video Tutorial.
Here you have to design the Side Menu system properly, otherwise it will not look that much good. In my video tutorial I have created a very simple type Side Menu. In the video Tutorial I told you that in the Side Menu’s Background Colour you have to insert a deep colour (i.e. Grey or other) but you can use White colour as Background to look your Menu good. Just upload a deep colour image (like grey colour image) and set it to the Background of the SideMenu’s Header Background and see that how beautiful it looks. I will give you the aia with the Grey colour image in the background so you can get it soon.
Upload some images of your icons like Home, Account, Profile, Logout etc. which you will get it easily from internet and set it to the Blocks, now see the Blocks.

Blocks

that’s how you can add so many items, also in the image you can see how you have to enter you image

also in the Screen Initialize block, you can see for an example I set the Header Title as TechStudy and Subtitle as thetechstudy.in, you can use Firebase DB here, and also I set Bacckground Image as lightgrey image

when a item selected this function will happen

also add this to open the side menu when menu button click

Download

Video Tutorial

 

Leave a Reply

Your email address will not be published. Required fields are marked *