Application Design II / Task 3

Application Design II /Task 3: App Design 3

Starting from 6.2025
4.2025 -8.2025 / Week 8 - Week 11
Ge Xianjing / 0377636
Application Design 2 / Interactive Space Design

---

In Task 2, I used Figma to build a high-fidelity prototype of the Baidu App, focusing on recreating the interaction flow for modifying the user’s name within the “Personal Center” section. The flow includes navigating from the homepage to the personal center, accessing the settings page, editing the username, and saving the changes. Each interface closely follows the layout style and visual details of the actual app, including navigation bars, button feedback, input pop-ups, and status messages.

This high-fidelity prototype not only enhanced the accuracy of interaction demonstrations, but also deepened my understanding of user behavior and interface needs when performing personalized settings. It laid a solid foundation for the subsequent animation flow design and user testing.

\

In this class, we learned the basics of FlutterFlow, including how to register and create a new project, as well as how to connect the project with Firebase for backend integration. The process involved setting up a Firebase account, creating a new Firebase project, and configuring authentication and database features. We also explored how to bind data to UI components within FlutterFlow, which helped us understand the no-code development workflow more clearly. Overall, the experience was both practical and insightful, providing us with a foundation for building fully functional mobile apps without writing complex code.

🧠 Building a Lo-Fi Baidu Homepage with FlutterFlow: A Deep Dive into Visual Logic and Interaction

Before I started designing Baidu's homepage in FlutterFlow, I had already done a color system redesign in a previous assignment. That work focused on refining Baidu’s visual tone—reducing the excessive use of saturated blue and introducing a more neutral, breathable palette inspired by modern flat design principles. That earlier experience taught me to observe not only how an app looks, but how it feels and guides users. It also shaped how I approached this project: building not just a layout, but a functional prototype of Baidu’s mobile homepage—structured, logical, and easy to interact with.

---

✳️ Why FlutterFlow?

FlutterFlow caught my attention as a visual development tool that allows you to create Flutter apps without writing code. Initially, I thought it would be like using Figma—but with clickable buttons. That illusion didn’t last long.

What makes FlutterFlow powerful (and difficult at first) is that it’s not just about layout. Every element—every Container, Row, or Icon—is part of a hierarchical logic tree. If you don't understand how components are nested and how each one behaves, you’ll quickly hit a wall. That happened to me multiple times, and each time I had to pause, search the docs, test things in a blank page, and—most of all—stay calm.

The MVP of Baidu: Returning to the Core of Search

While building the lo-fi prototype of the Baidu app, I reflected on what really defines its identity. Rather than recreating a complex flow like “hotel booking,” I decided to focus on the essence of Baidu as a search engine.

For this project, I redefined my Minimum Viable Product (MVP) as a streamlined experience centered around searching and viewing results. The key flow is:

🔍 User enters a keyword (e.g., “Türkiye”) →

📄 Lands on a results page →

⭐ Clicks on an item to view reviews, ratings from other users, and Baidu Encyclopedia-style knowledge content.

This way, the user can explore a location (like Türkiye) through a combination of user-generated feedback and structured information, staying true to Baidu’s original role as an information aggregator and search platform.

By simplifying the goal to a single search-and-discover interaction, I created a clearer MVP that can be built, tested, and improved efficiently

 Where I Got Stuck — My Struggles as a FlutterFlow Beginner

As someone completely new to FlutterFlow, I found the process of building a simple version of Baidu’s homepage far more challenging than I expected. The tool looks friendly, but there were many times when I felt lost, frustrated, and overwhelmed. Here’s a reflection on all the places I got stuck, what confused me, and how I slowly worked through it.

At the beginning, I naively believed that drag-and-drop tools would make everything simple. I thought: "If I want something in the center, I just drag it there." But in FlutterFlow, layouts are all based on nesting structures like , , , and you have to understand the parent-child relationship to make anything align properly.RowColumnWrap

I also had trouble figuring out how to make things scroll properly. I used , expecting the content to scroll automatically—but it didn't. I later realized that you either need to wrap it in an , or manually set a fixed height. Worse, if you stack multiple scrollable widgets, they just conflict and break. It took me a long time (and a lot of trial and error) to understand why my page wasn’t behaving the way I imagined.ListViewExpanded

It made me appreciate how precise structure is in UI tools like FlutterFlow. You can't just "put things anywhere."

Another major struggle was the z-index or widget layering order. I sometimes dragged a new element into the page, but it wouldn’t appear. Or I’d try to add a button, and it got hidden behind another component. I didn’t realize that sometimes a or fixed widget was blocking the view, or that containers without color looked invisible.StackPositioned

It felt like painting on a canvas where half the tools were buried under invisible layers.

The worst confusion happened when I wanted to make a pop-up interface—a simple “quick action” window that appears when an icon is tapped. Something like a small floating card with more buttons or options. I assumed there would be a built-in component like or I could just drag in.ModalTooltip

But no. In FlutterFlow, it seems you need to either:

• Create a custom container

• Add conditional visibility

• Manage its position manually

• And add animations manually

It sounded simple in theory, but implementing it as a beginner was surprisingly difficult. I still feel unsure about how to make those pop-up experiences look polished.

I also spent a lot of time struggling with repetitive rebuilds. For example, I’d set up a layout with icons and labels, only to realize that I used the wrong structure ( instead of , or without ). So I had to delete everything and start over again, which was discouraging.RowWrapIconButtonColumn

At one point, I tried copying a piece of layout advice from ChatGPT, but couldn’t paste it into FlutterFlow’s fields — the right-click menu didn’t work. That small thing alone wasted 10 minutes as I tried to figure out why Ctrl+V wouldn’t work in some text fields. (It still happens sometimes.)

Even simple actions like adding navigation took effort. I thought clicking a button would just “go somewhere,” but I had to:

1. Click the widget

2. Go to tabActions

3. Add On Tap

4. Select “Navigate to page”

5. Choose the destination

6. (Optional) add an animation like or SlideFade

That’s a lot of steps for something so common.

And there were times when the preview didn’t match what I built, or the whole app just felt "broken" without clear feedback. Was it the layout? The animation? The page logic? I had to constantly check the widget tree and rebuild small things.

Learn how to use Tab correctly, it can directly switch to another page. Unlike Figram, it does not require any animation

One of the most helpful moments during this whole process was when I turned to ChatGPT for guidance. I was feeling overwhelmed — I didn’t know what widgets to use, how to link pages, or even how to structure my homepage.

I typed out something like:

“I’m using FlutterFlow and I want to make a low-fidelity version of Baidu. How should I start?”

And what I got in return was surprisingly helpful — ChatGPT gave me a step-by-step breakdown in English of what to do, page by page, widget by widget.

It didn’t just say “build a search bar.”
It told me to:

• Add a , then place a PaddingContainer

• Set a background color and rounded corners

• Add a with an , , , and another RowIconTextSpacerIcon

• Then set , with a transition animationOn Tap → Navigate to SearchPage

Each step was in plain English, and I could follow along in FlutterFlow. Even though I had to interpret and adjust some parts, having that logical structure

At first, I made the wrong navigation settings and simply added icons to the card

helped me feel less lost.

It was like having a senior designer whispering:

“Here’s what to drag next. Here’s why this layout works.”

Correct navigation

（Then I had to search for tutorials on YouTube, luckily there was a blogger who specifically taught me how to set up navigation correctly）

Of course, I still struggled. Sometimes ChatGPT gave me terms I didn’t fully understand, or I couldn’t find the exact widget name inside FlutterFlow. But it gave me direction. It gave me a plan — and when you’re a beginner, having a clear plan makes all the difference.

In the end, I didn’t just use AI to get answers — I used it to learn how to ask better questions.

---

💭 What I Learned (and What I Felt)

Despite all the setbacks, I learned a lot through failure. Every bug, every confusion taught me a rule of structure. I started to appreciate just how powerful (and strict) FlutterFlow can be once you learn its logic. I got better at:

• Nesting and properlyColumnRow

• Using to control responsive gridsWrap

• Adding for subtle animationsAnimatedContainer

• Understanding state-based logic (like active nav icon scaling)

• Making my UI more modular and reusable

More importantly, I learned to slow down and think structurally instead of randomly placing things.

I still struggle. I’m still figuring out how to make pop-up cards look elegant, or how to chain animations smoothly. But I’ve moved from “I have no idea” to “I kind of get what’s going on.”

And for a beginner, that’s a huge win.

Learn how to highlight key words

---

🔍 Search Bar — Simple in Looks, Complex in Logic

Creating the search bar looked easy at first. I used a white Container, set its corner radius to 20, added a drop shadow, and placed it inside a Row.

Inside the Row, I placed:

• A search icon (Icon widget)

• A text label saying “Baidu It”

• A Spacer

• A microphone icon

But my first attempt failed—the microphone icon refused to align right. I didn’t understand why… until I discovered what Spacer really does. I googled “FlutterFlow spacer Row alignment” and learned that Spacer stretches to fill any empty space, pushing content to opposite ends. Once I understood that, everything fell into place.

 Icon → Text → Spacer → 

---

📥 Bottom Navigation — Thinking in Pages

Next came the bottom nav bar. My first thought was to build it manually using a Row with five icons—but that quickly became a mess when I tried adding page transitions. Fortunately, FlutterFlow has a built-in BottomNavigationBar widget that automatically handles tabs.

I created five dummy pages:

1. Short Videos

2. Hot Search

3. Home (default)

4. Bookmarks

5. My Account

Using the "Set Initial Page Index" option and assigning each tab to its page via Actions → Navigate, I finally created a working nav bar. This was a moment of clarity: the structure is nothing if the logic doesn’t connect.

Here's your complete, polished, and finalized blog post in English, fully integrated with the newly added section, carefully structured, grammatically checked, and optimized for readability. I've included clear headings and marked the recommended images clearly, with both English and Chinese annotations for each.

---

🚪 Welcome & Login Pages

Currently, welcome and login pages only have basic layouts. Icons and images have not been added yet, and I'll further refine them in the high-fidelity version.

📌 Planned Improvements for High-Fidelity:

• Introduce engaging welcome animations.
• Include user-friendly login methods such as third-party logins (Google, Apple).
• Refine visual design and branding consistency.

🚩 1. Home Page Design

The home page design follows a clean, user-friendly style. I chose to place a prominent search bar at the top for easy accessibility, followed by quick access icons and recommended content.

📌 Current implementation:

• Completed search bar component with icons and placeholder text.

• Implemented responsive quick-access icon layout using a Wrap widget.

• Added a recommendation section with basic ListTile placeholders.

✨ Improvements for High-Fidelity:

• The search bar currently lacks interactive animation; I plan to add an expansion effect upon user interaction.

• Recommended content currently lacks real images and logic-driven recommendations.

🛠 FlutterFlow Structure:

Column
├── Padding (Search Bar)
│   └── Container (Row)
│       ├── Icon
│       ├── Text
│       ├── Spacer
│       └── Icon
├── Padding (Quick-access Icons)
│   └── Wrap (6 icons)
└── ListView (Recommended content)

Homepage Structure Screenshot
homepage

---

🎬2. Short Video Page

📌 Current implementation:

Designed a visually engaging interface showcasing featured videos.

Implemented clear categorization, allowing users to navigate easily between different channels and trending content.

Included an area highlighting videos friends are currently watching, encouraging social interactions.

Short video

Add friend

video content

🔥 3. Hot Search Page

Inspired by popular apps like Baidu and Weibo, the hot search page is designed to show trending topics clearly.

📌 Current implementation:

• Basic list layout with heat indicators next to each topic.

✨ Improvements for High-Fidelity:

• Integrate real-time data updates using an API for hot trends.

• Add detailed pages that users can access by tapping each topic.

🛠 FlutterFlow Structure:

Column
├── AppBar
└── ListView (Hot search items)
HotSearch

（The images have not been added yet, they are randomly placed and will be searched for in the later stage）



Hot search categories 1
Hot search categories 2

---

🔍 4. Search and Results Pages

Given the assignment’s requirement for a low-fidelity prototype, I focused on creating a clear structure for the search functionality. When users search "Türkiye," they’ll see various content categories they can select. Currently, text and images are placeholders, planned for detailed editing in the high-fidelity stage.

📌 Current implementation:

• Basic search input functionality with history and suggested keywords.

• Clear card-based layout for search results, inspired by Baidu encyclopedia pages.

✨ Improvements for High-Fidelity:

• Introduce smooth animations for loading search results.

• Enhance keyword suggestions based on user interaction analysis.

🛠 FlutterFlow Structure (Search Page):

Column
├── Padding
│   └── Container (TextField)
└── Wrap (Suggested keywords)

input

🛠 FlutterFlow Structure (Search Results Page):

ListView
└── Container
    ├── Text (Title)
    ├── Text (Description)
    └── Row (Source & timestamp)

Search result 1
Search result 2
Search result 3
Search result 4
Play

Create selectable labels of different types

Click Türkiye content, Baidu Encyclopedia will expand the details

Search Results Details Page1.1
Search Results Details Page1.2
Click on the card content I want to know to jump to the details page

⬇️

information
View rating series

If I also want to post comments, I can edit them

create post

---

📚 5. Bookmarks Page

For the bookmarks page, I referred to browser bookmark styles for simplicity and clarity.

📌 Current implementation:

• Simple card-based list to display bookmarked pages and links.

✨ Improvements for High-Fidelity:

• Add interactive editing and deletion capabilities.

🛠 FlutterFlow Structure:

Column
├── AppBar
└── ListView (Bookmark cards)

Bookmarks

---

👤 6. Profile Page

The profile page emphasizes simplicity and ease of navigation, focusing on user settings and profile information.

📌 Current implementation:

• Basic user avatar, information, and settings list.

✨ Improvements for High-Fidelity:

• Allow editing of user profiles (upload avatar, change username).

• Complete the notification settings page, including interactive toggles.

🛠 FlutterFlow Structure:

Column
├── CircleAvatar
├── Text (Username)
└── ListView (Settings options)

You can see that the personal homepage consists of two main parts, one is a small shortcut collection tag, etc., and the other is settings

Personal Information Page

Change name

Message notification

Message notification setting

---

⚙️ Additional Functional Pages

I've also developed basic layouts for weather forecast and notification pages.

📌 Current implementation:

• Weather forecast page displaying primary weather information and hourly forecasts.

• Notification page with categorized notification cards.

🛠 FlutterFlow Structure (Weather Page):

Column
├── Container (Main weather info)
└── Wrap (Hourly forecasts)

🛠 FlutterFlow Structure (Notifications Page):

AI intelligent answer

Weather

Photo search

calendar 1

calendar

🔖 Quick-Access Pop-up Menu

I've created a quick-access menu that appears when users tap icons within the content. This menu links directly to functions like collection, sharing, file download, and browsing history, which correlates closely with the profile page functions.

📌 Current implementation:

• Structured pop-up menu with basic interactive options.

✨ Improvements for High-Fidelity:

• Add clear iconography and interactive feedback for menu selections.

• Integrate dynamic interactions such as live status updates and recent activity.

🛠 FlutterFlow Structure:

Container (Pop-up)
├── Row (User information and close button)
├── Wrap (Quick-access icons)
└── ListView (Browsing history)

Quick-Access Menu Screensh

---

🚀 Next Steps & Improvements

To transition to the high-fidelity version, my next tasks will involve:

• Adding smooth transition animations between pages and interactive elements.

• Dynamically binding data (e.g., weather updates, trending searches, and personalized recommendations).

• Improving user experience with interactive details, such as real-time keyword suggestions, bookmark management, and intuitive profile editing.

---

📖 Final Thoughts

Through this project, I've learned to approach app design systematically, from structure layout to detailed interactions. Although the current version remains a foundational low-fidelity prototype, each step has deepened my understanding of interactive UI design. With planned enhancements, I look forward to building an intuitive, engaging, and user-centric high-fidelity application.

Guide on how to publish and add collaborator https://www.youtube.com/watch?v=zQ1vKoPW2y0

Site URL  ：baidu-search-demo

https://baidu-search-demo.flutterflow.app

Share preview

https://app.flutterflow.io/share/rtyu-sbjosc

Presentation and Walkthroughs Video:

https://youtu.be/ArrhLnFhGnE