Mobile App Development & AI

This is the module where everything comes together. In Module 1 you understood the foundation. In Module 2 you set up your tools. In Module 3 you designed your app. Now in Module 4 — you build it.

Building an app with AI is fundamentally different from traditional development. In traditional development a developer sits down and writes code — line by line, function by function, screen by screen — spending days or weeks before anything visible exists. In AI-powered development you describe what you want, AI builds it, you review it, refine it, and move to the next feature. The entire cycle of describe, build, review, refine can happen in minutes rather than days.

The most important skill in this module is prompting. A prompt is the instruction you give to AI. The quality of what AI builds for you is directly determined by the quality of the prompt you write. A vague prompt produces a vague result. A precise, detailed, well- structured prompt produces a precise, detailed, professional result.

In this module we go deep on prompting — teaching you not just what to type but how to think about prompting, how to structure your instructions, how to refine when the first result is not right, and how to combine prompting across multiple AI tools to get the best possible outcome. By the end of Module 4 you will have a working, multi-screen app built using AI — ready for database connection in Module 6.

By the end of Module 4 your app will have all of the following built, working and connected:

✅ A working Login Screen — with email and password input fields, a Login button, a Sign Up link and a Forgot Password link. The screen uses your confirmed colour palette, fonts and design specification from Module 3.

✅ A working Home Screen — displaying a list of items using the list layout you confirmed in Module 3. The list shows real card components with proper hierarchy — title, subtitle, date and preview text. The screen has your confirmed header and bottom navigation bar.

✅ A working Detail Screen — that opens when a user taps on an item in the home screen list. Shows the full content of the selected item with a back navigation button at the top.

✅ A working Profile Screen — showing user information with a clean layout. Accessible from the bottom navigation bar.

✅ Complete navigation — all screens connected and navigating correctly. Tapping items goes to the right screen. The back button works. The bottom navigation switches between main screens.

✅ Your confirmed design applied — correct colours, correct fonts, correct layouts, your app icon and your splash screen — all consistent across every screen.

✅ Everything backed up to GitHub — committed and pushed after each major section so your progress is always safe.

Section 4.1 — The Art and Science of Prompting AI. Before building a single screen we go deep on prompting — what makes a great prompt, how to structure it, how to add context, how to be specific, and how to refine when the result is not right. This section gives you the prompting skills that will serve you in every project you ever build.

Section 4.2 — Building Your Login Screen with AI. Step by step — building your login screen in FlutterFlow using AI prompts and manual refinement. Every element, every colour, every spacing decision — guided and explained.

Section 4.3 — Building Your Home Screen with AI. The most complex screen in most apps — the home screen with its list of cards, header, search functionality and navigation. Built step by step with AI generating the structure and you refining the details.

Section 4.4 — Building Your Detail and Profile Screens. The detail screen that opens from the home screen list, and the profile screen accessible from navigation. Both built efficiently using AI prompts refined with your design specification.

Section 4.5 — Connecting Your Screens with Navigation. Making all screens work together — setting up navigation actions, testing every path through the app, and ensuring the user flow matches your wireframe exactly.

The build phase is where many students feel the most pressure — because this is where the work becomes real and visible. A design that exists only on paper or in a screenshot has no consequences. An app you are actually building can have errors, unexpected results and moments where nothing seems to work. That is completely normal. That is part of building. Every professional developer — no matter how experienced — encounters unexpected results during the build phase. The difference between a professional and a beginner is not that the professional never gets stuck — it is that the professional knows how to get unstuck quickly.

In Module 4 you will get stuck at least once. Something will not work the way you expected. AI will generate something slightly different from what you described. A navigation connection will behave unexpectedly. A colour will not match your specification. When this happens — do not panic, do not give up and do not start over. Follow this three-step process:

Step One — Describe the problem clearly. Write down exactly what you expected to happen and exactly what happened instead. Being precise about the gap between expectation and reality is the first step to fixing any problem.

Step Two — Ask AI. Open Gemini or ChatGPT. Share your description of the problem — what you were building, what you expected, what happened instead. Ask for a specific solution. AI will almost always give you a clear, actionable answer.

Step Three — Apply, test, and repeat. Apply the solution AI gives you. Test to see if it worked. If it did — move forward. If it did not — describe the new situation to AI and ask again. This loop of describe, ask, apply, test is the professional developer's problem-solving process. It works every time if you are patient and precise.

Before you place a single widget on a screen in this module — you must master the skill that makes everything else possible. Prompting. A prompt is the instruction you give to AI. It is the bridge between your idea and AI's output. And like any bridge — the stronger it is built, the more weight it can carry.

Most beginners write weak prompts — short, vague, missing critical context — and then wonder why AI produces results that are generic, incomplete or wrong. They blame the tool when the real issue is the instruction. The tool is only as good as the instruction it receives. A master prompter using a basic AI tool will consistently outperform a beginner using the most advanced AI tool — because the master knows how to communicate with precision and clarity.

This section teaches you to be that master. By the end of 4.1 you will understand the anatomy of a perfect prompt, know the common prompting mistakes and how to avoid them, and have practised writing prompts that produce precise, professional results every time. This is the skill that the entire build phase depends on — and it will serve you in every project you ever build.

Every great prompt contains five elements. Miss any one of them and the quality of AI's output drops significantly. Include all five and AI produces results that are precise, relevant and immediately useful.

Element One — Context. Tell AI what you are building, who it is for, and what platform you are using. Context is the foundation of every prompt. Without it AI has to guess — and guesses produce generic results.

Weak context: "Build a login screen."
Strong context: "I am building a mobile app in FlutterFlow for secondary school students to view announcements from their teachers."

Element Two — Specificity. Be precise about what you want. Name the exact screen, the exact elements, the exact behaviour. Vague instructions produce vague results. Specific instructions produce specific results.

Weak specificity: "Make a nice home screen."
Strong specificity: "Generate a home screen with a fixed header at the top showing the app name on the left and a search icon on the right. Below the header show a vertically scrollable list of announcement cards. Each card shows the announcement title in bold at the top, the teacher's name and date below it in smaller text, and a two-line preview of the content below that."

Element Three — Design Details. Always include your confirmed design decisions — colours, fonts, layout style, spacing preferences. AI will match your design system if you tell it what that system is. If you do not tell it — AI will invent its own.

Weak design details: "Use nice colours."
Strong design details: "Use a dark navy background #060D24, gold accent colour #D4AF37, white text #FFFFFF, and coral red #FF6B6B for action buttons. Use Poppins Bold for headings and Poppins Regular for body text. Cards should have rounded corners of 16px and a subtle left border in gold."

Element Four — Behaviour. Describe what happens when users interact with elements. What does tapping a card do? What happens when the search icon is pressed? What does the login button trigger? Behaviour instructions turn a static design into a functional app.

Weak behaviour: "Make it interactive."
Strong behaviour: "When a user taps an announcement card it should navigate to the Announcement Detail screen passing the announcement ID as a parameter. When the search icon is tapped a search bar should appear below the header and filter the list in real time as the user types."

Element Five — Constraints. Tell AI what NOT to do. Constraints prevent AI from adding elements you do not want, using design choices that conflict with your specification, or overcomplicating something that should be simple.

Weak constraints: None — the prompt just describes what to add.
Strong constraints: "Do not add a side drawer navigation — use only the bottom navigation bar. Do not add any images or illustrations to the cards — text only. Do not use any colours outside of the specified palette."

Here is what a complete, professional prompt looks like when all five elements are combined. Study this prompt carefully — it is the template you will follow for every screen you build in sections 4.2 through 4.5.

Complete Prompt Example — Home Screen:

"I am building a mobile app called SchoolNote in FlutterFlow. The app is for secondary school students to view announcements posted by their teachers. I am using the free plan of FlutterFlow on my phone.

Please generate the Home Screen for this app. The screen should contain the following elements from top to bottom:
1. A fixed header bar at the top. On the left side show the app name SchoolNote in Poppins Bold size 22 in white. On the right side show a search icon in white.
2. Below the header show a horizontally scrollable row of category chips — All, Today, This Week, Important. The selected chip should have a gold background. Unselected chips should have a dark navy background with a gold border.
3. Below the chips show a vertically scrollable list of announcement cards. Each card should have a dark navy background #0D1B3E, rounded corners of 16px, a 3px gold left border, and subtle shadow. Inside each card show: the announcement title in Poppins Bold size 16 in white at the top. The teacher name and date in Poppins Regular size 13 in grey #8892B0 below the title. A two-line preview of the announcement content in Poppins Regular size 14 in light grey below that.
4. At the very bottom show a fixed bottom navigation bar with three items: Home (currently selected, icon highlighted in gold), Announcements, and Profile. The bar background should be dark navy #060D24 with a gold top border of 1px.

The overall background colour is #060D24 dark navy. Use only the colours specified — do not add any other colours. Do not add any images or illustrations. Do not add a floating action button. When a user taps an announcement card navigate to a screen called AnnouncementDetail."

That prompt contains all five elements — context, specificity, design details, behaviour and constraints. Notice how much detail is included about every element, every colour, every font, every size and every interaction. That level of detail is what produces a result that matches your vision.

You do not need to memorise this prompt. You need to understand its structure — and apply that structure to every prompt you write throughout this module. Context. Specificity. Design details. Behaviour. Constraints. Five elements. Every prompt.

Understanding what goes wrong in a prompt is just as important as understanding what makes a prompt great. These seven mistakes are the most common ones students make — and every one of them is completely avoidable once you know what to watch for.

Mistake 1 — Too Short. A prompt like "Make a login screen" gives AI almost nothing to work with. The result will be generic — a standard login screen with no connection to your app's design, purpose or users. Solution: Always write at least a paragraph for each screen prompt. Include all five elements. If your prompt feels too short — it probably is.

Mistake 2 — No Design Context. Forgetting to include your colour palette, fonts and design choices means AI invents its own. The result may look good but it will not match your other screens — destroying consistency. Solution: Always paste your confirmed design specification details into every prompt.

Mistake 3 — Asking for Too Much at Once. Writing one enormous prompt asking AI to build the entire app in one go. The result is usually an incomplete, inconsistent mess that requires more work to fix than if you had built screen by screen. Solution: One prompt per screen. Build one screen, review it, confirm it, then move to the next.

Mistake 4 — Accepting the First Result. The first result AI produces is a starting point — not a final product. Many students accept whatever AI generates without reviewing it against their design specification or wireframe. Solution: Always review every generated result using your design principles checklist. Refine before moving on.

Mistake 5 — Vague Refinement Prompts. When the first result is not right, students often write vague follow-up prompts like "Make it better" or "Change the design." AI does not know what "better" means to you. Solution: Be specific in refinement prompts. "Change the header background to #060D24. Increase the card title font size to 18px. Move the search icon to the right side of the header." Specific instructions produce specific improvements.

Mistake 6 — Not Describing Behaviour. Prompts that only describe appearance but not behaviour produce screens that look right but do not function correctly. Buttons that do nothing. Navigation that does not connect. Solution: Always include at least one behaviour instruction in every prompt — what happens when each interactive element is used.

Mistake 7 — Giving Up After One Failure. AI does not always get it right on the first try — and that is completely normal. When the result is wrong, many students give up or restart the entire project. Solution: Never restart. Refine. Describe what is wrong specifically. Ask AI to fix only that specific thing. Build on what is already right rather than discarding it.

Refinement prompting is the process of improving an AI-generated result through a series of precise follow-up instructions. Professional developers rarely get a perfect result on the first prompt — but they get to perfect through smart refinement. Here is exactly how to refine effectively:

The Review-Identify- Instruct Method:

Review — Look at the generated result carefully. Compare it to your design specification and wireframe. Go through every element on the screen and ask — does this match what I specified? Make a list of everything that does not match.

Identify — Prioritise your list. What is the most important thing to fix first? Start with structural issues — wrong layout, missing elements, wrong navigation — before moving to cosmetic issues like colour adjustments and font sizes. Fix structure first, then style.

Instruct — Write a precise refinement prompt for the highest-priority issue. Be specific. Name the exact element. Describe exactly what it should be. For example:

"The bottom navigation bar is currently at the top of the screen. Move it to the very bottom of the screen so it is fixed and always visible regardless of how far the user scrolls."

"The announcement card background is currently white. Change it to #0D1B3E dark navy. Change the title text colour to white #FFFFFF and the subtitle text to grey #8892B0."

"The login button is currently left-aligned. Centre it horizontally. Change its background colour to coral #FF6B6B. Change its text to white, Poppins Bold, size 16. Add 16px of padding inside the button on all sides. Make the button corners rounded with 12px radius."

Each refinement prompt addresses one specific issue with precise detail. After applying each refinement — review again. Identify the next issue. Write the next refinement prompt. Repeat until the screen matches your specification exactly. This iterative process is how professional apps are built — not in one perfect shot but through deliberate, patient refinement.

The best developers prepare their prompts before they open their build tool. Writing your prompts in advance — when you are calm and focused — produces better prompts than writing them on the spot while also trying to build. This exercise prepares every prompt you will need for sections 4.2 through 4.5 before you build a single screen.

Exercise Steps — Complete Before Moving to Section 4.2:

Step 1 — Open a note on your phone called "My Build Prompts."

Step 2 — Open your Design Specification and your Wireframe document. You will use both to write each prompt.

Step 3 — Write a complete five-element prompt for your Login Screen. Include: context, all elements listed in your wireframe for this screen, your full colour palette and font choices, the behaviour of the login button and the sign up link, and constraints for what should not appear on this screen.

Step 4 — Write a complete five-element prompt for your Home Screen. Include every element from your wireframe, your full design details, the behaviour of tapping a list item, and constraints.

Step 5 — Write a complete five-element prompt for your Detail Screen. Describe what data it displays, how it receives data from the home screen, the back navigation behaviour, and the full design details.

Step 6 — Write a complete five-element prompt for your Profile Screen. Describe the user information displayed, the layout, any action buttons present, and the design details.

Step 7 — Review all four prompts. For each one ask: Does it have context? Is it specific enough? Does it include all design details? Does it describe behaviour? Does it include constraints? If any element is missing — add it before saving.

Step 8 — Open Gemini and paste your Login Screen prompt. Ask Gemini: "Review this prompt I am about to use to build a screen in FlutterFlow. Is it specific enough to produce a precise result? What is missing or could be more detailed?" Read Gemini's feedback and update your prompt accordingly. Do this for all four prompts.

Step 9 — Save your completed "My Build Prompts" note. You are now fully prepared to build. Section 4.2 begins with your Login Screen prompt ready to use.

The Login Screen is the first screen most users see when they open your app for the first time. It sets the tone for the entire experience that follows. A professional, clean login screen communicates immediately that your app is trustworthy, well-built and worth using. A cluttered or confusing login screen makes users hesitate before they have even seen what your app can do.

In this section we build your login screen step by step — starting with your prepared prompt from section 4.1, using FlutterFlow's AI to generate the initial structure, and then refining every element until it matches your design specification exactly. Every step is explained fully — for both phone users and laptop users — so you are never left wondering what to do next.

By the end of section 4.2 you will have a complete, professional login screen that uses your confirmed colours, fonts and layout — ready for authentication connection in Module 6.

Before building — confirm that your login screen wireframe includes all of these essential elements. If any are missing from your wireframe — add them now before building. Building from an incomplete wireframe always leads to rebuilding later.

Your App Logo or Icon — Displayed at the top centre of the screen. This is the first element the user sees. It confirms they are in the right app and creates an immediate brand connection. Use the app icon you designed in section 3.5.3 — displayed at a larger size than it appears on the home screen.

Your App Name — Below the icon. In your heading font. Large, bold and clearly readable. In your accent colour or white.

A Welcome Message — A short, friendly line of text below the app name. For example: "Sign in to continue" or "Welcome back" — in a smaller, lighter font. This humanises the login experience and makes it feel welcoming rather than purely transactional.

Email Input Field — A clearly labelled text input field where the user enters their email address. The label "Email" or "Email Address" should appear above or inside the field. The field should have a visible border in your accent colour when selected and a subtle border when unselected. The keyboard type for this field should be set to email — so the correct keyboard appears automatically on the user's phone.

Password Input Field — A clearly labelled text input field for the password. The text must be obscured — shown as dots or asterisks — for security. There should be an eye icon on the right side of the field that toggles the password visibility when tapped — so users can check what they typed if needed.

Forgot Password Link — A small tappable text link below the password field. In your accent colour. Aligned to the right side of the field. When tapped this will eventually navigate to a password reset screen — for now it can navigate to a placeholder screen.

Login Button — A large, prominent button in your action colour — coral or whatever you confirmed. Full width or nearly full width. The label "Sign In" or "Log In" in bold white text. This is the primary action on this screen and it must be visually dominant.

Sign Up Link — Below the login button. A line of text that reads "Don't have an account?" followed by a tappable link "Sign Up" in your accent colour. This navigates to a registration screen which we will build later.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Open FlutterFlow
Open your browser and go to flutterflow.io. Log in and open your project. You should see your project editor with your confirmed theme colours and fonts already applied from Module 3.

Step 2 — Create a New Page
In the left panel find the Pages section. Look for a plus button or Add Page option. Tap or click it. Name the new page exactly: LoginScreen — no spaces. Select Blank as the starting point. Your new blank login screen page opens in the canvas.

Step 3 — Set the Background Colour
Click anywhere on the blank canvas to select the page itself. In the right properties panel find Background Color. Enter your primary colour hex code — #060D24 or whatever your confirmed primary colour is. The canvas immediately turns dark. This is your screen foundation.

Step 4 — Use AI to Generate the Screen Structure
Look for the AI generation button in FlutterFlow — it may appear as a star icon, a wand icon or a button labelled Generate with AI in the toolbar or left panel. Tap or click it. A text input appears. Paste your complete Login Screen prompt from your "My Build Prompts" note that you prepared in section 4.1. Press Generate and wait 15 to 30 seconds.

Step 5 — Review the Generated Structure
When AI finishes generating — do not interact with the screen yet. First — look at it. Compare it to your wireframe and design specification. Ask yourself: Are all required elements present? Is the layout correct — top to bottom? Are the colours approximately right? Is the structure logical? Make a list of what needs to be changed.

Step 6 — Add Your App Icon
If the generated screen does not include your app icon at the top — add it manually. In FlutterFlow go to the Widget Library and find the Image widget. Drag it to the top of the canvas. In the right panel find the Image Source setting. Select Asset and upload your app-icon.png file. Set the width to 80px and height to 80px. Centre align it horizontally.

Step 7 — Add or Fix the App Name Text
If the app name text is missing or incorrect — tap the Text widget in the widget tree or canvas. In the right panel update the text content to your app name. Set the font to your heading font. Set the size to 28. Set the colour to white #FFFFFF or your accent colour. Set alignment to centre.

Step 8 — Fix the Email Input Field
Tap the email input field in the canvas or widget tree. In the right properties panel check the following: Label text is "Email Address." Keyboard Type is set to Email Address. The field border colour matches your accent colour when focused. The text colour inside the field is white or light enough to read on the dark background.

Step 9 — Fix the Password Input Field
Tap the password input field. In the right panel confirm: Label text is "Password." The Password toggle is enabled — this is usually a setting called Obscure Text or Password Field. Enable it. This makes the text appear as dots for security. Check that there is an eye icon on the right side of the field for toggling visibility. If not — FlutterFlow's password field usually adds this automatically when the password field setting is enabled.

Step 10 — Style the Login Button
Tap the Login or Sign In button in the canvas. In the right panel: Change the button text to "Sign In." Change the font to your heading font, Bold weight, size 16, white colour. Change the button background colour to your action colour — coral #FF6B6B or your confirmed action colour. Set the button width to Fill — so it stretches to the full width of the screen with padding on each side. Set the corner radius to 12px for rounded corners. Set internal padding to 16px top and bottom for a comfortable tap target size.

Step 11 — Add the Forgot Password Link
If it is missing — add a Text widget below the password field. Set the text to "Forgot Password?" Set the colour to your accent colour. Set the size to 13px. Set the alignment to right. We will add the navigation action to this in section 4.5.

Step 12 — Add the Sign Up Row
Below the login button add a Row widget containing two text elements side by side. First text: "Don't have an account? " in grey #8892B0 size 14. Second text: "Sign Up" in your accent colour size 14 bold. We will add the navigation action to Sign Up in section 4.5.

Step 13 — Review the Complete Screen
Zoom out on the canvas to see the full screen. Go through the design principles checklist from section 3.1.7: Is it simple? ✅ Is the hierarchy clear — icon, name, welcome, inputs, button? ✅ Is it consistent with your design spec? ✅ Are the colours correct? ✅ Is all text readable? ✅ Is navigation clear? ✅ If all six answers are yes — your login screen is complete. If any answer is no — fix that element before moving on.

Step 14 — Preview Your Login Screen
Click the Preview or Run button in FlutterFlow. Your login screen opens in preview mode. Tap each input field — confirm the correct keyboard appears for email and regular keyboard for password. Confirm the password eye icon toggles visibility. Confirm the login button looks correct and responds to tap. Take a screenshot of the preview. Add it to your portfolio folder.

Step 15 — Save and Commit to GitHub
Save your FlutterFlow project. If you have exported your code to GitHub — commit with the message: "Completed Login Screen with all elements and design applied"

Issue 1 — The input fields have a white background and look wrong on the dark screen. Solution: Tap the input field widget. In the right panel find the Fill Color or Background Color of the field. Change it to a slightly lighter version of your primary colour — for example #0D1B3E for a dark navy primary. The field will now look like it belongs on the dark screen instead of clashing with it.

Issue 2 — The text inside input fields is black and invisible on a dark background. Solution: Tap the input field widget. Find the Text Color or Input Text Color property in the right panel. Change it to white #FFFFFF. Also find the Label Color or Hint Text Color and change it to a light grey — #8892B0 works well — so the placeholder text is visible but clearly different from typed text.

Issue 3 — The login button does not stretch to full width. Solution: Tap the button widget. In the right panel find the Width property. Change it from a fixed pixel value to Infinity or Max Width or Fill — the exact option name depends on your FlutterFlow version. Then add horizontal padding to the parent container — typically 24px on each side — so the button does not touch the screen edges.

Issue 4 — The screen content is too close to the top edge of the phone screen — overlapping the status bar. Solution: Tap the main Column or Container widget that holds all screen content. In the right panel find Padding. Add top padding of at least 60px — this creates space below the phone's status bar and ensures your content starts in a visible area of the screen.

Issue 5 — Elements are not vertically centred on the screen. Solution: Tap the main Column widget. Find the Main Axis Alignment property. Set it to Center. Find the Cross Axis Alignment property and set it to Center. This centres all children of the column both vertically and horizontally.

Issue 6 — The AI generated elements that were not in my prompt. Solution: Simply select the unwanted widgets in the widget tree and delete them. AI sometimes adds elements it thinks would be helpful — like social login buttons or decorative dividers. If they are not in your design specification — delete them. Keep only what your wireframe specifies.

If you are building your app natively in Sketchware Pro rather than FlutterFlow, follow these steps to build your login screen. The elements are the same — the process is adapted for Sketchware Pro's interface on your Android phone.

Sketchware Pro — Login Screen Steps:

Step 1 — Open Sketchware Pro and open your project. You will be in the View section by default.

Step 2 — Tap the Activity name at the top — usually MainActivity. Rename it to LoginActivity by tapping the settings icon next to it.

Step 3 — Set the activity background colour. Tap the background of the canvas. In the properties panel find Background Color. Enter your primary colour hex code.

Step 4 — Add an ImageView for your app icon. Tap the plus button, select ImageView, and place it at the top centre of the canvas. In properties set the width and height to 80dp each. Upload your app icon from the Resource section.

Step 5 — Add a TextView for your app name. Set the text to your app name. Set text size to 28sp. Set text colour to white. Set gravity to centre. Set font style to Bold.

Step 6 — Add a TextView for the welcome message. Set text to "Sign in to continue." Set size to 14sp. Set colour to grey #8892B0. Set gravity to centre.

Step 7 — Add an EditText for the email field. Set the hint text to "Email Address." Set input type to Email. Set background colour to slightly lighter than primary. Set text colour to white.

Step 8 — Add an EditText for the password field. Set hint to "Password." Set input type to Password — this automatically obscures the text. Set same background and text colours as the email field.

Step 9 — Add a TextView for Forgot Password. Set text to "Forgot Password?" Set colour to your accent colour. Set gravity to right.

Step 10 — Add a Button for Sign In. Set text to "Sign In." Set background colour to your action colour. Set text colour to white. Set text size to 16sp. Set font to Bold. Set width to match_parent for full width.

Step 11 — Add a LinearLayout horizontally containing two TextViews — "Don't have an account? " in grey and "Sign Up" in your accent colour.

Step 12 — Open Gemini on your phone. Ask it: "I have built a login screen in Sketchware Pro with these elements: [list your elements]. What additional properties should I check to make sure this screen looks professional and functions correctly?" Apply any additional recommendations Gemini gives you.

Step 13 — Tap the Run button to compile and install your app on your phone. Open it and review your login screen on the real screen. Take a screenshot and add to your portfolio.

The home screen is the most important screen in your entire app. It is the screen users see every time they open the app after logging in. It is where they get their first real sense of what your app offers, how it is organised, and how easy it is to use. A great home screen makes users want to stay and explore. A poor home screen makes them close the app and not return.

The home screen is also typically the most complex screen to build — because it contains the most elements, the most interactions, and the most dynamic content. This is where your prompting skills from section 4.1 are put to their greatest test. The more precise and detailed your prompt — the better and faster your home screen comes together.

Follow every step in this section carefully. Do not rush. The home screen sets the standard for every other screen in your app — get it right here and every other screen becomes easier to build consistently.

Review your wireframe for the home screen. Confirm every element listed below is in your wireframe. If any are missing — add them to the wireframe now and update your Design Specification before building.

Fixed Header Bar — A bar fixed at the very top of the screen that does not scroll away when the user scrolls down through the content. The header contains your app name on the left in your heading font and a search icon on the right. The header background is your primary colour. A thin gold bottom border separates it visually from the content below.

Greeting or Context Line — Directly below the header — or inside the header — a personalised greeting line. For example: "Good morning, Felix" or "Welcome back" — in a smaller, lighter font. This personalisation makes the app feel human and welcoming. We will connect this to real user data in Module 6 — for now it displays a placeholder name.

Category Filter Row — A horizontally scrollable row of filter chips below the greeting. Options might include: All, Today, This Week, Important. The selected chip has your accent colour background. Unselected chips have a transparent or dark background with an accent colour border. This filter will eventually filter the list below — for now it is visual only.

Content List — The main body of the screen — a vertically scrollable list of cards. Each card represents one item — an announcement, a product, a post, or whatever your app displays. Each card must show: a title in bold at the top, supporting information below it in smaller text, and a preview of content below that. Cards must be consistently styled with rounded corners, your card background colour, and your confirmed left border accent.

Fixed Bottom Navigation Bar — A navigation bar fixed at the very bottom of the screen. Contains three to five navigation items — icons with labels. The currently active item is highlighted in your accent colour. Inactive items are in grey. The bar background is your primary colour with a thin top border.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Create the Home Screen Page
In FlutterFlow go to the Pages panel on the left. Tap the plus button to add a new page. Name it exactly: HomeScreen — no spaces. Select Blank as the starting point. Set the page background colour to your primary colour immediately.

Step 2 — Use AI to Generate the Home Screen Structure
Open the AI generation tool in FlutterFlow. Paste your complete Home Screen prompt from your "My Build Prompts" note — the one you prepared and refined with Gemini in section 4.1.5. Press Generate and wait. When AI finishes — do not interact yet. Review the complete generated structure against your wireframe.

Step 3 — Build the Fixed Header
If the header is not fixed at the top — or was not generated correctly — build it manually. In FlutterFlow add a Container widget at the very top of the screen. Set its width to infinity — full screen width. Set the height to 60px. Set the background colour to your primary colour. Add a bottom border of 1px in your accent colour.

Inside the Container add a Row widget. Set the Row's main axis alignment to Space Between — this pushes the left item to the far left and the right item to the far right. Inside the Row add a Text widget on the left — your app name in heading font, Bold, size 20, white. Add an Icon widget on the right — search icon, white, size 24.

Step 4 — Add the Greeting Line
Below the header add a Text widget. Set the text to "Good morning, Felix" — we will replace "Felix" with a dynamic user name in Module 6. Set the font to your body font, Regular weight, size 15, colour grey #8892B0. Add 20px left padding and 12px top padding to give it breathing room from the header.

Step 5 — Build the Category Filter Row
Add a Row widget below the greeting. Set it to horizontally scrollable — in FlutterFlow look for a property called Wrap or Scroll Direction and set it to Horizontal. Inside the Row add four Container widgets side by side — each one is a filter chip.

For each chip: set width to wrap content, height to 36px, corner radius to 18px (fully rounded), and horizontal padding to 16px. For the first chip — "All" — set the background to your accent colour and the text to dark navy. For all other chips set the background to transparent and add a 1px border in your accent colour. Set all chip text to your body font, Medium weight, size 13. Labels: All, Today, This Week, Important.

Step 6 — Build the Content List
Below the filter row add a ListView widget. In FlutterFlow a ListView creates a scrollable list. Set its scroll direction to vertical. Set it to expand — fill the remaining screen space between the filter row and the bottom navigation bar.

Inside the ListView add a single Card widget. This card is your list item template — FlutterFlow will repeat it for each item in the list. Style this card carefully because this styling applies to every item in the list:

Card background: #0D1B3E dark navy.
Card corner radius: 16px.
Card margin: 0px top, 0px sides, 12px bottom — so cards have a gap between them.
Card left border: 3px solid accent colour — add this by wrapping the card in a Container that has a left border, then put the Card inside it.
Card internal padding: 16px all sides.

Inside the card add a Column widget with three children:
Child 1 — Title Text: heading font, Bold, size 16, white #FFFFFF.
Child 2 — Subtitle Row: body font, Regular, size 13, grey #8892B0 — showing author name and date side by side.
Child 3 — Preview Text: body font, Regular, size 14, light grey #D8D8D8 — set max lines to 2 and overflow to ellipsis so long content is truncated with dots.

Step 7 — Add Sample Data to the List
For now — add three sample list items manually so your home screen looks realistic during preview. Duplicate the card widget three times. In each copy — change the title, subtitle and preview text to different sample content. For example:

Card 1: Title — "School Reopening Date." Subtitle — "Mr. Banda • 2 hours ago." Preview — "The school will reopen on Monday following the public holiday. All students..."

Card 2: Title — "Sports Day Registration." Subtitle — "Mrs. Phiri • Yesterday." Preview — "Students wishing to participate in Sports Day must register by this Friday..."

Card 3: Title — "Exam Timetable Released." Subtitle — "Administration • 3 days ago." Preview — "The final examination timetable has been released. Please check the notice..."

These sample items will be replaced with real database data in Module 6. For now they make your home screen look complete and realistic during preview and testing.

Step 8 — Add the Bottom Navigation Bar
In FlutterFlow there is a dedicated Bottom Navigation Bar widget. Find it in the widget library — it may be under Navigation or App Bars. Add it to the screen. Set the background colour to your primary colour. Set the top border to 1px in your accent colour. Set the selected item colour to your accent colour. Set the unselected item colour to grey #8892B0.

Add three navigation items:
Item 1 — Home. Icon: Home icon. Label: Home. This item is currently selected.
Item 2 — Announcements. Icon: Bell or Megaphone icon. Label: Announcements.
Item 3 — Profile. Icon: Person icon. Label: Profile.

We will connect each item to its corresponding screen in section 4.5. For now — confirm the bar looks correct visually.

Step 9 — Make the Header and Bottom Bar Fixed
This is critical. The header must stay at the top and the bottom navigation bar must stay at the bottom — even when the user scrolls through the list. In FlutterFlow the way to achieve this is to use a Column widget as the main screen structure with three children:

Child 1 — Header Container (fixed height, does not expand).
Child 2 — Scrollable content area (set to Expanded — fills all remaining space).
Child 3 — Bottom Navigation Bar (fixed height, does not expand).

The ListView inside Child 2 handles the scrolling independently. The header and footer stay fixed. This is the correct structure for any app with a fixed header and navigation bar.

Step 10 — Preview and Review the Home Screen
Click the Preview button. Scroll through the list — confirm the header stays fixed at the top and the navigation bar stays fixed at the bottom. Tap each filter chip — confirm it responds visually. Review every element against your Design Specification: colours, fonts, sizes, spacing. Make a list of anything that needs adjustment and fix each item using precise refinement prompts or direct property changes in the right panel.

Step 11 — Take a Screenshot and Commit
When the home screen matches your design specification — take a screenshot of the preview. Add it to your portfolio folder. Commit to GitHub with the message: "Completed Home Screen with header, filter chips, list cards and bottom navigation"

Sketchware Pro — Home Screen Steps:

Step 1 — In Sketchware Pro open your project. Tap the plus button in the Activities section to add a new activity. Name it MainActivity — this will be your home screen. Set the background colour to your primary colour.

Step 2 — Add a LinearLayout at the top for the header. Set orientation to horizontal. Set height to 60dp. Set background colour to primary colour. Inside add two TextViews — app name on the left with weight 1 so it fills available space, and a search icon TextView on the right.

Step 3 — Add a TextView for the greeting below the header. Set text to "Good morning, Felix." Set size to 15sp. Set colour to grey #8892B0. Set padding left to 20dp and top to 12dp.

Step 4 — Add a HorizontalScrollView below the greeting. Inside it add a LinearLayout with horizontal orientation. Inside that add four Button widgets — your filter chips. Style each one with rounded corners using a custom drawable background. For the selected chip use your accent colour. For others use a transparent background with an accent border.

Step 5 — Add a RecyclerView below the filter row. Set layout manager to LinearLayoutManager vertical. This is the most efficient way to display a scrollable list in Sketchware. Open Gemini and ask: "How do I set up a RecyclerView with a custom card layout in Sketchware Pro? Give me step by step instructions." Follow Gemini's instructions to set up the RecyclerView with your card design.

Step 6 — Create a custom layout file for your list card. In Sketchware Pro go to the Resource section and find Layouts. Add a new layout called item_card. Design it with a CardView containing a title TextView, a subtitle TextView and a preview TextView — styled with your confirmed colours and fonts.

Step 7 — Add a LinearLayout at the very bottom for the navigation bar. Set orientation to horizontal. Set height to 56dp. Set background to primary colour. Add three LinearLayouts inside it — each containing an icon TextView and a label TextView for Home, Announcements and Profile. Set the Home item colour to your accent colour and the others to grey.

Step 8 — Open Gemini and ask it to review your home screen layout: "I have built a home screen in Sketchware Pro with a header, greeting, filter chips, RecyclerView list and bottom navigation. What should I check to ensure the layout looks professional and the RecyclerView scrolls correctly without affecting the header and navigation bar?" Apply Gemini's recommendations.

Step 9 — Run the app on your phone. Scroll the list and confirm the header and navigation stay fixed. Take a screenshot and add to your portfolio.

Issue 1 — The entire screen scrolls including the header and bottom navigation bar. This is the most common home screen mistake. Solution: Your screen structure must be a fixed Column with three children — fixed header, expanded scrollable content area, fixed navigation bar. The ListView must be inside the expanded middle section only — never inside a single scrollable container that wraps the whole screen.

Issue 2 — The list cards have inconsistent spacing between them. Solution: Set the margin on each card widget to 0 top, 0 left, 0 right, 12px bottom. Do not use padding on the card itself for spacing — use margin. Padding adds space inside the card. Margin adds space outside the card between cards.

Issue 3 — The filter chips do not scroll horizontally — they wrap to a second line instead. Solution: The filter chip Row must be placed inside a SingleChildScrollView — or in FlutterFlow the Row itself must have Scroll Direction set to Horizontal. Wrapping creates a multiline chip area which takes up too much vertical space. Horizontal scrolling keeps them on one clean line.

Issue 4 — The preview text in cards shows all the text instead of cutting off at two lines. Solution: Tap the preview text widget. In the right panel find Max Lines and set it to 2. Find Overflow and set it to Ellipsis. The text will now show a maximum of two lines and add three dots at the end if the content is longer. This keeps all cards the same height regardless of content length.

Issue 5 — The bottom navigation bar covers the last card in the list. Solution: Add bottom padding to the ListView equal to the height of the navigation bar — typically 56px to 80px. This creates space at the bottom of the list so the last item is fully visible above the navigation bar.

Issue 6 — The home screen looks correct on my phone screen size but may not look right on other screen sizes. Solution: In FlutterFlow use relative sizing where possible — percentages or fill widths — rather than fixed pixel widths. Set card widths to infinity or fill rather than a fixed 350px. This ensures the layout adapts correctly to different screen sizes. Open Gemini and ask: "How do I make a FlutterFlow layout responsive so it looks correct on different screen sizes?" for specific guidance.

Before moving to section 4.4 confirm your home screen passes every item on this checklist. Do not proceed until all items are confirmed.

Home Screen Checklist:

✅ The header is fixed at the top and does not scroll away.

✅ The app name and search icon are correctly positioned in the header.

✅ The greeting line appears below the header with correct font and colour.

✅ The filter chip row scrolls horizontally and all four chips are visible.

✅ The selected filter chip has the correct accent colour background.

✅ At least three list cards are visible with title, subtitle and preview text.

✅ All cards have consistent styling — same background, corner radius, left border and internal spacing.

✅ Preview text is limited to two lines with ellipsis for longer content.

✅ The bottom navigation bar is fixed at the bottom and does not scroll.

✅ The active navigation item is highlighted in your accent colour.

✅ All colours match your Design Specification.

✅ All fonts match your Design Specification.

✅ A screenshot has been taken and added to the portfolio folder.

✅ The screen has been committed to GitHub.

You now have two screens built and committed — your Login Screen and your Home Screen. In this section we build two more — the Detail Screen and the Profile Screen. These screens are less complex than the Home Screen but equally important to the overall app experience. Every screen in your app must meet the same standard of quality — not just the most visible ones. Users notice inconsistency instantly — and a screen that feels rushed or unfinished damages the trust your well-built screens created.

The Detail Screen is what users see when they tap on an item in the home screen list. It shows the full content of that item — the complete announcement, the full article, the complete product description — depending on your app type. This screen must be calm, readable and focused entirely on one thing: helping the user read and absorb the content they came to see.

The Profile Screen is where users see their own information — their name, their role, their account details, and any settings or actions relevant to their account. It should feel personal and organised — like a clean summary of who the user is within your app.

Back Navigation — At the very top of the screen a back arrow icon on the left side. When tapped it returns the user to the Home Screen. This is the most critical element on the Detail Screen — without it users get trapped with no way back. Never build a detail screen without a back navigation button.

Content Title — The full title of the item being displayed. Large, bold, your heading font, white colour. This is the first content the user reads — it must be immediately visible and clearly readable.

Metadata Row — Below the title — a row showing the author name, the date, and optionally a category tag. Smaller font, grey colour, body font regular weight. This context information helps the user understand who created this content and when.

Divider Line — A thin horizontal line between the metadata and the content body. In your accent colour at low opacity. This visual separator clearly marks where the header information ends and the main content begins.

Content Body — The full text content of the item. Body font, Regular weight, size 15, light grey colour for maximum readability on the dark background. Line height should be generous — 1.6 to 1.8 — so paragraphs of text are comfortable to read. The content area should be scrollable so long content does not get cut off.

Action Button — Optional but recommended — a button at the bottom for a relevant action. For a school app this might be "Mark as Read." For a marketplace app it might be "Contact Seller." For a news app it might be "Share." This button gives the user something to do after reading — completing the screen's purpose rather than just leaving them to tap back.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Create the Detail Screen Page
In FlutterFlow add a new page. Name it: DetailScreen — no spaces. Select Blank as starting point. Set the background colour to your primary colour immediately.

Step 2 — Use AI to Generate the Detail Screen
Open the AI generation tool. Paste your Detail Screen prompt from your "My Build Prompts" note. Press Generate and wait. Review the result against your wireframe before making any changes.

Step 3 — Build the App Bar with Back Button
In FlutterFlow add an AppBar widget at the top of the screen. Set the background colour to your primary colour. Set the title to empty — we do not want a title in the app bar on this screen. Enable the Leading Icon — this is the back arrow. Set the leading icon to the arrow back icon. Set its colour to white. We will connect the navigation action in section 4.5.

Step 4 — Add the Content Title
Below the app bar add a Text widget. Set the text to your sample title — for example "School Reopening Date." Set the font to your heading font, Bold, size 24, white #FFFFFF. Set the padding to 20px left, 20px right, 16px top, 8px bottom. Set max lines to 3 and overflow to ellipsis — in case a title is very long.

Step 5 — Add the Metadata Row
Below the title add a Row widget. Set padding to 20px left, 20px right, 0px top, 16px bottom. Inside the Row add two Text widgets side by side separated by a bullet point character •:

Text 1: "Mr. Banda" — body font, Regular, size 13, grey #8892B0.
Text 2: "• 2 hours ago" — body font, Regular, size 13, grey #8892B0.

Step 6 — Add the Divider Line
Below the metadata row add a Divider widget. Set its colour to your accent colour at 30 percent opacity — in FlutterFlow you can set opacity in the colour picker. Set its thickness to 1px. Set horizontal margin to 20px on each side.

Step 7 — Add the Content Body
Below the divider add a SingleChildScrollView widget — this makes the content area scrollable independently. Inside it add a Text widget. Set the text to a long sample content — at least four paragraphs of realistic content for your app type. Set the font to your body font, Regular, size 15, light grey #D8D8D8. Set line height to 1.7. Set padding to 20px all sides. Remove any max lines limit — on the detail screen we want all content to be visible.

Step 8 — Add the Action Button
Below the scrollable content area — outside the SingleChildScrollView — add a Button widget. Set the text to your relevant action — "Mark as Read" or "Share" or "Contact." Style it consistently with your Login Screen button — same action colour, same font, same corner radius, same full width setting. Add 20px horizontal padding and 16px vertical padding around it.

Step 9 — Review the Screen Structure
The detail screen should have this structure from top to bottom — and it is important to get this right:

AppBar — fixed, does not scroll.
Content Title — fixed, does not scroll.
Metadata Row — fixed, does not scroll.
Divider — fixed, does not scroll.
SingleChildScrollView — scrolls independently, contains the body text.
Action Button — fixed at bottom, does not scroll.

This structure means the title, author and date are always visible while the user scrolls through long content — and the action button is always accessible at the bottom.

Step 10 — Preview and Review
Click Preview. Read through the sample content by scrolling. Confirm the AppBar and title stay fixed. Confirm the action button stays at the bottom. Check all colours, fonts and spacing against your Design Specification. Take a screenshot and add to your portfolio. Commit to GitHub with the message: "Completed Detail Screen with full content layout and action button"

Profile Header — The top section of the profile screen containing the user's avatar — a circular image or initial placeholder — the user's full name in heading font, and their role or subtitle below the name. This section has a slightly different background — often a gradient or a card — to visually distinguish it from the rest of the screen.

User Information Section — A list of the user's key information displayed in a clean, organised way. Each row shows a label on the left — Email, Phone, Class, Role — and the value on the right. Separated by thin divider lines. This section looks like a simple table of the user's details.

Action Items Section — Below the information section a list of tappable action items. Examples: Edit Profile, Change Password, Notifications Settings, Help and Support, About App. Each item is a full-width row with an icon on the left, a label, and a right arrow chevron on the far right to indicate it is tappable and navigates somewhere.

Logout Button — At the very bottom of the screen — a prominent logout button. This must be clearly visible and easily accessible. Use your action colour — coral or whatever you confirmed — but with a different treatment to distinguish it from other buttons. For example — an outlined button with coral border and coral text rather than a filled coral button. This visual difference signals "this is a destructive action" without being alarming.

Bottom Navigation Bar — The same bottom navigation bar from the Home Screen — with the Profile item now highlighted as active. Consistency in the navigation bar across all main screens is essential.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Create the Profile Screen Page
Add a new page in FlutterFlow. Name it: ProfileScreen — no spaces. Select Blank. Set background colour to your primary colour.

Step 2 — Use AI to Generate the Profile Screen
Open the AI generation tool. Paste your Profile Screen prompt from your "My Build Prompts" note. Press Generate. Review the result against your wireframe.

Step 3 — Build the Profile Header Section
Add a Container widget at the top of the screen. Set width to infinity. Set padding to 30px top, 20px sides, 24px bottom. Set background to a slightly lighter version of your primary colour — #0D1B3E for a navy primary. This creates a subtle visual distinction for the header section.

Inside the Container add a Column with centre alignment. Add these children:

Child 1 — Avatar Container: A circular Container with width 80px, height 80px, border radius 40px (fully circular). Background colour is your accent colour. Inside it add a Text widget with the user's initials — "FF" for Felix Felix — in heading font, Bold, size 28, dark navy colour. Centre aligned. This serves as the avatar placeholder until we add real profile photos in Module 6.

Child 2 — User Name Text: "Atake Favor Felix" — heading font, Bold, size 20, white. Centre aligned. Top margin 12px.

Child 3 — User Role Text: "Student" or whatever role applies — body font, Regular, size 14, grey #8892B0. Centre aligned. Top margin 4px.

Step 4 — Build the Information Section
Below the profile header add a Container with 16px padding all sides. Inside add a Column. For each piece of user information add a Row widget as a child of the Column:

Row structure: Label Text on the left — body font, Regular, size 14, grey #8892B0, width fixed to 100px. Value Text on the right — body font, Regular, size 14, white #FFFFFF, expanded to fill remaining space.

Add these information rows:
Email — student@school.com
Class — Form 4B
Student ID — STU-2024-001
Joined — January 2024

Between each row add a Divider widget — 1px thick, grey #8892B0 at 20 percent opacity, full width.

Step 5 — Build the Action Items Section
Below the information section add a Column widget. For each action item add a Container widget as a child:

Container properties: width infinity, height 56px, background transparent, bottom border 1px grey at 20 percent opacity.

Inside each Container add a Row with three children:
Child 1 — Icon: 24px, your accent colour, left padding 20px.
Child 2 — Label Text: body font, Regular, size 15, white, expanded to fill space, left padding 16px.
Child 3 — Chevron Icon: arrow forward icon, 18px, grey #8892B0, right padding 20px.

Add these action items with appropriate icons:
Edit Profile — person edit icon.
Notifications — bell icon.
Help and Support — help circle icon.
About App — info icon.

Step 6 — Add the Logout Button
Below the action items add a Container with 20px padding all sides. Inside add a Button widget. Set the text to "Log Out." Set the background to transparent. Set the border to 1.5px solid your action colour — coral #FF6B6B. Set the text colour to your action colour. Set the font to heading font, Bold, size 16. Set width to infinity — full width. Set corner radius to 12px. This outlined style clearly distinguishes the logout from other primary action buttons.

Step 7 — Add the Bottom Navigation Bar
Add the same Bottom Navigation Bar widget as on the Home Screen. This time set the Profile item as the active selected item — highlighted in your accent colour. Set Home and Announcements as inactive — grey colour.

Step 8 — Make the Screen Scrollable
Wrap the entire screen content — everything except the bottom navigation bar — in a SingleChildScrollView. This ensures that on smaller phone screens all content is accessible by scrolling — without the bottom navigation bar moving.

Step 9 — Preview and Review
Click Preview. Scroll through the profile screen. Confirm the bottom navigation bar stays fixed. Check all colours, fonts and spacing. Take a screenshot. Add to your portfolio. Commit to GitHub with the message: "Completed Profile Screen with user info, action items and logout button"

Issue 1 — The Detail Screen content body does not scroll — long content gets cut off at the bottom of the screen. Solution: Confirm the content body Text widget is inside a SingleChildScrollView — not directly in the Column. The SingleChildScrollView must have its height set to Expanded so it fills all available space between the fixed header elements and the fixed action button. If the height is set to a fixed value or wrap content the scroll will not work correctly.

Issue 2 — The back arrow in the Detail Screen app bar does not appear or appears in the wrong colour. Solution: In FlutterFlow tap the AppBar widget. In the right panel find Leading Icon Color and set it explicitly to white #FFFFFF. Some FlutterFlow theme settings override the icon colour — setting it explicitly ensures it always appears correctly regardless of the theme settings.

Issue 3 — The Profile Screen avatar circle is not circular — it appears as a square or rounded rectangle. Solution: The border radius of the Container must be exactly half the width and height. For a Container that is 80px wide and 80px tall — the border radius must be exactly 40px. If the border radius is less than half — it will appear rounded but not fully circular. Set it precisely to half the container size.

Issue 4 — The Profile Screen action items do not have visible bottom borders between them. Solution: In FlutterFlow adding a bottom border to an individual Container can be done through the Border property in the right panel. Set the border to bottom only — not all sides. Set the colour to grey #8892B0 and reduce the opacity to 20 to 30 percent so it is subtle but visible. If the option for individual side borders is not available in your FlutterFlow version — use a Divider widget between each action item instead.

Issue 5 — The logout button appears filled with colour instead of outlined. Solution: In FlutterFlow tap the logout button. In the right panel find the Button Style or Variant property. Look for an option called Outlined or Border Only. Select it. Then set the border colour to your action colour and the text colour to your action colour. Set the background to transparent. If a specific outlined variant is not available — set the button background colour to transparent manually and add a border using the border property.

Detail Screen Checklist:

✅ App bar with back arrow is at the top.

✅ Content title is large, bold and clearly readable.

✅ Metadata row shows author and date in correct style.

✅ Divider line separates metadata from content.

✅ Content body is fully scrollable — no content is cut off.

✅ Action button is fixed at the bottom and always visible.

✅ All colours and fonts match Design Spec.

✅ Screenshot taken and committed to GitHub.

Profile Screen Checklist:

✅ Profile header shows avatar, name and role correctly.

✅ Avatar is circular with initials inside.

✅ Information section shows all user details with dividers.

✅ Action items show icon, label and chevron consistently.

✅ Logout button is outlined — not filled.

✅ Bottom navigation bar shows Profile as active item.

✅ Screen scrolls correctly on small screens.

✅ All colours and fonts match Design Spec.

✅ Screenshot taken and committed to GitHub.

You now have two screens built and committed — your Login Screen and your Home Screen. In this section we build two more — the Detail Screen and the Profile Screen. These screens are less complex than the Home Screen but equally important to the overall app experience. Every screen in your app must meet the same standard of quality — not just the most visible ones. Users notice inconsistency instantly — and a screen that feels rushed or unfinished damages the trust your well-built screens created.

The Detail Screen is what users see when they tap on an item in the home screen list. It shows the full content of that item — the complete announcement, the full article, the complete product description — depending on your app type. This screen must be calm, readable and focused entirely on one thing: helping the user read and absorb the content they came to see.

The Profile Screen is where users see their own information — their name, their role, their account details, and any settings or actions relevant to their account. It should feel personal and organised — like a clean summary of who the user is within your app.

Back Navigation — At the very top of the screen a back arrow icon on the left side. When tapped it returns the user to the Home Screen. This is the most critical element on the Detail Screen — without it users get trapped with no way back. Never build a detail screen without a back navigation button.

Content Title — The full title of the item being displayed. Large, bold, your heading font, white colour. This is the first content the user reads — it must be immediately visible and clearly readable.

Metadata Row — Below the title — a row showing the author name, the date, and optionally a category tag. Smaller font, grey colour, body font regular weight. This context information helps the user understand who created this content and when.

Divider Line — A thin horizontal line between the metadata and the content body. In your accent colour at low opacity. This visual separator clearly marks where the header information ends and the main content begins.

Content Body — The full text content of the item. Body font, Regular weight, size 15, light grey colour for maximum readability on the dark background. Line height should be generous — 1.6 to 1.8 — so paragraphs of text are comfortable to read. The content area should be scrollable so long content does not get cut off.

Action Button — Optional but recommended — a button at the bottom for a relevant action. For a school app this might be "Mark as Read." For a marketplace app it might be "Contact Seller." For a news app it might be "Share." This button gives the user something to do after reading — completing the screen's purpose rather than just leaving them to tap back.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Create the Detail Screen Page
In FlutterFlow add a new page. Name it: DetailScreen — no spaces. Select Blank as starting point. Set the background colour to your primary colour immediately.

Step 2 — Use AI to Generate the Detail Screen
Open the AI generation tool. Paste your Detail Screen prompt from your "My Build Prompts" note. Press Generate and wait. Review the result against your wireframe before making any changes.

Step 3 — Build the App Bar with Back Button
In FlutterFlow add an AppBar widget at the top of the screen. Set the background colour to your primary colour. Set the title to empty — we do not want a title in the app bar on this screen. Enable the Leading Icon — this is the back arrow. Set the leading icon to the arrow back icon. Set its colour to white. We will connect the navigation action in section 4.5.

Step 4 — Add the Content Title
Below the app bar add a Text widget. Set the text to your sample title — for example "School Reopening Date." Set the font to your heading font, Bold, size 24, white #FFFFFF. Set the padding to 20px left, 20px right, 16px top, 8px bottom. Set max lines to 3 and overflow to ellipsis — in case a title is very long.

Step 5 — Add the Metadata Row
Below the title add a Row widget. Set padding to 20px left, 20px right, 0px top, 16px bottom. Inside the Row add two Text widgets side by side separated by a bullet point character •:

Text 1: "Mr. Banda" — body font, Regular, size 13, grey #8892B0.
Text 2: "• 2 hours ago" — body font, Regular, size 13, grey #8892B0.

Step 6 — Add the Divider Line
Below the metadata row add a Divider widget. Set its colour to your accent colour at 30 percent opacity — in FlutterFlow you can set opacity in the colour picker. Set its thickness to 1px. Set horizontal margin to 20px on each side.

Step 7 — Add the Content Body
Below the divider add a SingleChildScrollView widget — this makes the content area scrollable independently. Inside it add a Text widget. Set the text to a long sample content — at least four paragraphs of realistic content for your app type. Set the font to your body font, Regular, size 15, light grey #D8D8D8. Set line height to 1.7. Set padding to 20px all sides. Remove any max lines limit — on the detail screen we want all content to be visible.

Step 8 — Add the Action Button
Below the scrollable content area — outside the SingleChildScrollView — add a Button widget. Set the text to your relevant action — "Mark as Read" or "Share" or "Contact." Style it consistently with your Login Screen button — same action colour, same font, same corner radius, same full width setting. Add 20px horizontal padding and 16px vertical padding around it.

Step 9 — Review the Screen Structure
The detail screen should have this structure from top to bottom — and it is important to get this right:

AppBar — fixed, does not scroll.
Content Title — fixed, does not scroll.
Metadata Row — fixed, does not scroll.
Divider — fixed, does not scroll.
SingleChildScrollView — scrolls independently, contains the body text.
Action Button — fixed at bottom, does not scroll.

This structure means the title, author and date are always visible while the user scrolls through long content — and the action button is always accessible at the bottom.

Step 10 — Preview and Review
Click Preview. Read through the sample content by scrolling. Confirm the AppBar and title stay fixed. Confirm the action button stays at the bottom. Check all colours, fonts and spacing against your Design Specification. Take a screenshot and add to your portfolio. Commit to GitHub with the message: "Completed Detail Screen with full content layout and action button"

Profile Header — The top section of the profile screen containing the user's avatar — a circular image or initial placeholder — the user's full name in heading font, and their role or subtitle below the name. This section has a slightly different background — often a gradient or a card — to visually distinguish it from the rest of the screen.

User Information Section — A list of the user's key information displayed in a clean, organised way. Each row shows a label on the left — Email, Phone, Class, Role — and the value on the right. Separated by thin divider lines. This section looks like a simple table of the user's details.

Action Items Section — Below the information section a list of tappable action items. Examples: Edit Profile, Change Password, Notifications Settings, Help and Support, About App. Each item is a full-width row with an icon on the left, a label, and a right arrow chevron on the far right to indicate it is tappable and navigates somewhere.

Logout Button — At the very bottom of the screen — a prominent logout button. This must be clearly visible and easily accessible. Use your action colour — coral or whatever you confirmed — but with a different treatment to distinguish it from other buttons. For example — an outlined button with coral border and coral text rather than a filled coral button. This visual difference signals "this is a destructive action" without being alarming.

Bottom Navigation Bar — The same bottom navigation bar from the Home Screen — with the Profile item now highlighted as active. Consistency in the navigation bar across all main screens is essential.

📱 Phone and 💻 Laptop Users — Follow These Steps:

Step 1 — Create the Profile Screen Page
Add a new page in FlutterFlow. Name it: ProfileScreen — no spaces. Select Blank. Set background colour to your primary colour.

Step 2 — Use AI to Generate the Profile Screen
Open the AI generation tool. Paste your Profile Screen prompt from your "My Build Prompts" note. Press Generate. Review the result against your wireframe.

Step 3 — Build the Profile Header Section
Add a Container widget at the top of the screen. Set width to infinity. Set padding to 30px top, 20px sides, 24px bottom. Set background to a slightly lighter version of your primary colour — #0D1B3E for a navy primary. This creates a subtle visual distinction for the header section.

Inside the Container add a Column with centre alignment. Add these children:

Child 1 — Avatar Container: A circular Container with width 80px, height 80px, border radius 40px (fully circular). Background colour is your accent colour. Inside it add a Text widget with the user's initials — "FF" for Felix Felix — in heading font, Bold, size 28, dark navy colour. Centre aligned. This serves as the avatar placeholder until we add real profile photos in Module 6.

Child 2 — User Name Text: "Atake Favor Felix" — heading font, Bold, size 20, white. Centre aligned. Top margin 12px.

Child 3 — User Role Text: "Student" or whatever role applies — body font, Regular, size 14, grey #8892B0. Centre aligned. Top margin 4px.

Step 4 — Build the Information Section
Below the profile header add a Container with 16px padding all sides. Inside add a Column. For each piece of user information add a Row widget as a child of the Column:

Row structure: Label Text on the left — body font, Regular, size 14, grey #8892B0, width fixed to 100px. Value Text on the right — body font, Regular, size 14, white #FFFFFF, expanded to fill remaining space.

Add these information rows:
Email — student@school.com
Class — Form 4B
Student ID — STU-2024-001
Joined — January 2024

Between each row add a Divider widget — 1px thick, grey #8892B0 at 20 percent opacity, full width.

Step 5 — Build the Action Items Section
Below the information section add a Column widget. For each action item add a Container widget as a child:

Container properties: width infinity, height 56px, background transparent, bottom border 1px grey at 20 percent opacity.

Inside each Container add a Row with three children:
Child 1 — Icon: 24px, your accent colour, left padding 20px.
Child 2 — Label Text: body font, Regular, size 15, white, expanded to fill space, left padding 16px.
Child 3 — Chevron Icon: arrow forward icon, 18px, grey #8892B0, right padding 20px.

Add these action items with appropriate icons:
Edit Profile — person edit icon.
Notifications — bell icon.
Help and Support — help circle icon.
About App — info icon.

Step 6 — Add the Logout Button
Below the action items add a Container with 20px padding all sides. Inside add a Button widget. Set the text to "Log Out." Set the background to transparent. Set the border to 1.5px solid your action colour — coral #FF6B6B. Set the text colour to your action colour. Set the font to heading font, Bold, size 16. Set width to infinity — full width. Set corner radius to 12px. This outlined style clearly distinguishes the logout from other primary action buttons.

Step 7 — Add the Bottom Navigation Bar
Add the same Bottom Navigation Bar widget as on the Home Screen. This time set the Profile item as the active selected item — highlighted in your accent colour. Set Home and Announcements as inactive — grey colour.

Step 8 — Make the Screen Scrollable
Wrap the entire screen content — everything except the bottom navigation bar — in a SingleChildScrollView. This ensures that on smaller phone screens all content is accessible by scrolling — without the bottom navigation bar moving.

Step 9 — Preview and Review
Click Preview. Scroll through the profile screen. Confirm the bottom navigation bar stays fixed. Check all colours, fonts and spacing. Take a screenshot. Add to your portfolio. Commit to GitHub with the message: "Completed Profile Screen with user info, action items and logout button"

You have four complete, professionally designed screens — Login, Home, Detail and Profile. Right now they exist as separate pages in FlutterFlow with no connection between them. A user could not tap anything and move from one screen to another. In this section we change that — connecting every screen with navigation actions that make your app function as a complete, flowing experience.

Navigation is what transforms a collection of screens into an app. When a user taps the login button and arrives at the home screen — that is navigation working. When they tap an announcement card and the detail screen opens — that is navigation. When they tap the back arrow and return to where they came from — that is navigation. When they tap the Profile icon in the bottom bar and the profile screen slides in — that is navigation.

Every one of these connections is a deliberate action we set up — linking a specific user interaction on one screen to a specific destination screen. By the end of section 4.5 every navigation path in your wireframe will be working — and your app will be fully navigable from login to every screen and back.

Before setting up any navigation connections — understand how navigation works in FlutterFlow so every connection you make is deliberate and correct.

Navigation Actions — In FlutterFlow every interactive widget — buttons, cards, icons, text links — can have an Action attached to it. An Action is what happens when that widget is tapped. The most common action is Navigate To — which sends the user to a specific page. You attach actions through the Actions panel in the right side of the editor.

Navigate To — This action takes the user from the current screen to a specified destination screen. When you use Navigate To the current screen is added to the navigation history — so the user can press the back button to return. Use this for forward navigation — going deeper into the app like from Home to Detail.

Navigate Back — This action returns the user to the previous screen in the navigation history. Use this for all back buttons and back arrows. Never use Navigate To for going back — always use Navigate Back. Using Navigate To for going back creates duplicate screens in the history and causes unexpected behaviour.

Navigate Replace — This action navigates to a new screen and removes the current screen from the navigation history. Use this specifically for the Login Screen to Home Screen navigation — so that after a user logs in and arrives at the Home Screen, pressing back does not return them to the Login Screen. Once logged in — users should not be able to go back to Login by pressing back.

Bottom Navigation Actions — The bottom navigation bar items use a special type of navigation that switches between main screens without adding to the navigation history. In FlutterFlow this is handled automatically when you link each navigation bar item to its corresponding page — the app manages the switching and state automatically.

Before setting up a single navigation action — confirm your complete navigation map. This map comes directly from your wireframe. Every arrow you drew in your wireframe becomes a navigation action in this section.

Here is the standard navigation map for a four-screen app — adapt it to match your own wireframe if your app has additional screens:

📱 Phone and 💻 Laptop Users — Follow These Steps in Order:

Navigation 1 — Login Button → Home Screen
Open the LoginScreen page in FlutterFlow. Tap the Sign In button widget in the canvas or widget tree to select it. In the right panel find the Actions section — it may appear as a lightning bolt icon or an "On Tap" section. Tap Add Action. Select Navigate. Select Navigate Replace. In the destination dropdown select HomeScreen. Save the action. Now when the Sign In button is tapped the app will navigate to the Home Screen and remove the Login Screen from history — so back does not return to Login.

Navigation 2 — Sign Up Link → Register Screen
On the LoginScreen select the Sign Up text link. Add Action → Navigate → Navigate To → Select RegisterScreen. Note: if you have not built a Register Screen yet — create a blank placeholder page called RegisterScreen with just a text label "Register Screen — Coming Soon" on a dark background. This allows the navigation to work without breaking the app. We build the full Register Screen later.

Navigation 3 — Forgot Password → Reset Screen
On the LoginScreen select the Forgot Password text. Add Action → Navigate → Navigate To → Select a placeholder page called ResetPasswordScreen. Create the placeholder if it does not exist yet — same approach as above.

Navigation 4 — Announcement Card → Detail Screen
Open the HomeScreen page. Select one of the announcement card widgets in the canvas or widget tree. In most cases you select the outer Container of the card — not a text widget inside it. Add Action → Navigate → Navigate To → Select DetailScreen.

Important: If your cards are inside a ListView — select the card template widget inside the ListView, not the ListView itself. The action must be on the individual card so that tapping any card navigates to the Detail Screen. We will pass specific data to the Detail Screen in Module 6 when we connect the database — for now all cards navigate to the same Detail Screen showing the same sample content.

Navigation 5 — Bottom Navigation Bar Setup
Open the HomeScreen page. Select the Bottom Navigation Bar widget. In the right panel find the navigation items configuration. For each navigation item:

Home item: Set the page to HomeScreen. Set the icon to the home icon. Set the label to "Home."
Announcements item: Set the page to HomeScreen for now — we will add an Announcements page later if needed. Set icon to bell. Label: "Announcements."
Profile item: Set the page to ProfileScreen. Set icon to person. Label: "Profile."

FlutterFlow handles the bottom navigation switching automatically once pages are linked. Save and preview — tapping the Profile icon should switch to the Profile Screen and tapping Home should return to the Home Screen.

If the bottom navigation bar is on multiple screens — you need to configure it on each screen separately. The Home Screen bar has Home as active. The Profile Screen bar has Profile as active. In FlutterFlow you can create a reusable component for the navigation bar and use it on every page — ask Gemini: "How do I create a reusable bottom navigation bar component in FlutterFlow that I can use on multiple pages?" for guidance on this advanced but time-saving approach.

Navigation 6 — Detail Screen Back Arrow → Home Screen
Open the DetailScreen page. Select the AppBar widget. In the right panel find the Leading Icon Action or On Tap action for the app bar's leading icon — the back arrow. Add Action → Navigate → Navigate Back. No destination needed — Navigate Back automatically returns to the previous screen in the history. Save and preview — tapping the back arrow should return to the Home Screen.

Navigation 7 — Profile Screen Logout → Login Screen
Open the ProfileScreen page. Select the Log Out button widget. Add Action → Navigate → Navigate Replace → Select LoginScreen. Navigate Replace is used here for the same reason as after login — once the user logs out they should not be able to press back to return to any app content. They must log in again.

In Module 6 we will add the actual Firebase sign out action before this navigation — so the user is properly signed out of Firebase before being redirected to Login. For now the navigation alone is sufficient to test the flow.

Navigation 8 — Set the Starting Screen
In FlutterFlow you need to specify which screen opens first when the app launches. Find the App Settings or Route Settings in FlutterFlow — look in the top menu or Settings panel. Find the Initial Page or Entry Point setting. Set it to LoginScreen. This ensures your app always opens with the Login Screen — not the Home Screen or any other screen.

Setting up navigation actions is only half the work. Testing every navigation path is equally important — because a navigation error that is not caught now will confuse users and potentially crash the app at the worst possible moment. Test every path. Test every button. Test every back action. Leave nothing untested.

Navigation Testing Checklist — Test Every Item:

✅ App opens on Login Screen — not any other screen.

✅ Tapping Sign In on Login Screen navigates to Home Screen.

✅ After navigating to Home Screen — pressing device back button does NOT return to Login Screen.

✅ Tapping Sign Up link on Login Screen opens the Register placeholder screen.

✅ Tapping Forgot Password on Login Screen opens the Reset Password placeholder screen.

✅ Tapping any announcement card on Home Screen navigates to Detail Screen.

✅ Tapping the back arrow on Detail Screen returns to Home Screen.

✅ After returning to Home Screen from Detail — the Home Screen looks exactly as it did before — the list position is preserved.

✅ Tapping Profile in bottom navigation bar switches to Profile Screen.

✅ Tapping Home in bottom navigation bar on the Profile Screen returns to Home Screen.

✅ Tapping Log Out on Profile Screen navigates to Login Screen.

✅ After logging out — pressing device back button does NOT return to Profile or Home Screen.

✅ The complete user journey works without any error: Login → Home → Detail → Back → Profile → Logout → Login.

If any test fails — identify exactly which navigation action is incorrect, open that screen in FlutterFlow, find the action on the relevant widget, and correct the navigation type or destination. Then re-test that specific path before moving on. A failed test is not a problem — it is a direction. It tells you exactly what to fix.