Hi there! 🤗 

I am so excited to tell you a short story about a task that was given to me at my workplace, It seemed quite simple but my dear not at all considering the challenges I faced. I was working on an app for connecting caregivers with clients and this was exciting cause I loved what I was doing. I was almost done with the desktop version of the website then my project manager gave me the task of making it responsive on mobile. It seemed like an easy task at first but things got tricky because I had to do some extensive research and learn a lot of new concepts.  

Since the project was built in Flutterflow, I started by looking at the Flutterflow documentation. I tried looking for components that can make it easy for me to make the website responsive but there were no directions for what I could do for my specific use case. And some things were a little bit confusing to me. 

I then headed to YouTube and started my search again. After browsing and watching several videos I landed on a video walkthrough of exactly what I wanted to do. I had to watch it many times to understand the concepts and pausing where necessary to practice what I was learning. And then finally it worked 💖  

Below are some of the steps I took to make the website responsive on mobile in case you also have a similar task; 

• Identify the container you want to make responsive in your Flutter Flow project. 
• Within the container settings, locate and click on the width property 
• Choose the option to set a single condition for the width property. 
• Click on the first value within the condition settings. 
• Within the first value, access the global properties. 
• Select the option for full-screen properties. 
• If your screen is under the desktop size, set the container width using the screen size condition. For example, if it’s less than a specific breakpoint, customize the width accordingly. 
• Copy the set conditions to the “else” part of the width property. 

Problems Faced

I wasn’t so much into coding so it took me time to master the conditions and steps that were used. 

Solution

I had to watch the full video more than two times while am pausing so that i can practice on a different page so that i can catch up. Try it out and thank me later😊.