Flutter project structure - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of the lib folder

In a Flutter project, what is the main purpose of the lib folder?

A It stores all the image and font assets used in the app.

B It contains the Dart source code files for the app's logic and UI.

C It holds the configuration files for Android and iOS platforms.

D It contains the build output files after compiling the app.

💡 Hint

Think about where you write your app's main code.

The lib folder is where you put all your Dart code, including UI and logic. Assets and platform files are stored elsewhere.

❓ ui_behavior

intermediate

Effect of modifying pubspec.yaml assets section

What happens if you add image files to the assets section in pubspec.yaml but forget to place those files in the correct folder?

A The app will ignore the assets section and load images from the internet.

B The app will automatically create the missing image files.

C The app will crash at runtime when trying to load the images.

D The app will build successfully but show errors or blank spaces where images should appear.

💡 Hint

Think about what happens when the app cannot find a file it expects.

If the files are missing, the app builds but cannot display the images, resulting in errors or blank UI parts.

❓ lifecycle

advanced

Role of main.dart in Flutter project

What is the role of the main.dart file inside the lib folder in a Flutter project?

A It holds the Android-specific configuration for the app.

B It stores the app's theme and color definitions only.

C It contains the entry point function <code>main()</code> that starts the app.

D It is used to store all the app's image assets.

💡 Hint

Where does the app start running?

The main.dart file has the main() function which Flutter calls to start the app.

❓ navigation

advanced

Where to define routes in Flutter project structure

In a well-organized Flutter project, where is the best place to define app navigation routes?

A Inside the main.dart file or a dedicated routes.dart file in the lib folder.

B In the android/app/src folder alongside AndroidManifest.xml.

C In the ios/Runner folder with the Info.plist file.

D Inside the pubspec.yaml file under dependencies.

💡 Hint

Routes are part of app logic and UI, not platform config.

Routes are Dart code and belong in lib folder files, often main.dart or a separate routes.dart.

🔧 Debug

expert

Identifying cause of build failure due to missing Android folder

You cloned a Flutter project but the android folder is missing. What will happen when you try to build the app for Android?

A The build will fail because platform-specific files are missing.

B The app will build and run normally on Android devices.

C Flutter will automatically recreate the android folder during build.

D The app will build but crash immediately on Android devices.

💡 Hint

Think about what files are needed to build for Android.

The android folder contains essential files for building the app on Android. Without it, the build fails.

Practice

1. Which folder in a Flutter project contains the main Dart code for your app?

easy

A. lib/

B. android/

C. ios/

D. test/

Solution

1. Step 1: Identify the folder purpose

   The lib/ folder is where Dart code for the app lives.

2. Step 2: Compare with other folders

   android/ and ios/ hold platform-specific files, test/ holds tests.

3. Final Answer:

   lib/ -> Option A

4. Quick Check:

   Main Dart code folder = lib/ [OK]

Hint: Main app code is always in lib/ folder [OK]

Common Mistakes:

• Confusing android/ with code folder
• Thinking test/ holds main code
• Mixing ios/ with Dart code

2. Which file manages app dependencies and assets in a Flutter project?

easy

A. main.dart

B. pubspec.yaml

C. build.gradle

D. AndroidManifest.xml

Solution

1. Step 1: Understand file roles

   pubspec.yaml is the config file for dependencies and assets.

2. Step 2: Differentiate from other files

   main.dart is code, build.gradle is Android build config, AndroidManifest.xml is Android app manifest.

3. Final Answer:

   pubspec.yaml -> Option B

4. Quick Check:

   Dependencies and assets file = pubspec.yaml [OK]

Hint: pubspec.yaml always manages dependencies and assets [OK]

Common Mistakes:

• Choosing main.dart as config file
• Confusing build.gradle with Flutter config
• Mixing AndroidManifest.xml with Flutter dependencies

3. What will happen if you put your test files inside the lib/ folder instead of test/?

medium

A. Tests will automatically move to test/ folder

B. Tests will run normally without issues

C. App will fail to compile due to test files

D. Tests may be included in the app build, increasing size

Solution

1. Step 1: Understand folder roles

   lib/ is for app code; test/ is for tests only.

2. Step 2: Consequence of wrong placement

   Putting tests in lib/ includes them in app build, increasing size unnecessarily.

3. Final Answer:

   Tests may be included in the app build, increasing size -> Option D

4. Quick Check:

   Tests in lib/ increase app size [OK]

Hint: Keep tests only in test/ folder to avoid bloated app [OK]

Common Mistakes:

• Assuming tests run normally in lib/
• Thinking app will fail to compile
• Believing tests auto-move folders

4. You accidentally deleted the android/ folder in your Flutter project. What is the likely result?

medium

A. The iOS build will fail instead

B. The app will still build and run on Android devices

C. You will get errors when building for Android platform

D. Flutter will recreate the android/ folder automatically

Solution

1. Step 1: Role of android/ folder

   The android/ folder contains platform-specific files needed to build Android apps.

2. Step 2: Effect of deletion

   Deleting it causes build errors when targeting Android because required files are missing.

3. Final Answer:

   You will get errors when building for Android platform -> Option C

4. Quick Check:

   Missing android/ folder causes Android build errors [OK]

Hint: android/ folder is essential for Android builds [OK]

Common Mistakes:

• Assuming app runs without android/ folder
• Thinking iOS build is affected
• Believing Flutter auto-recreates android/

5. You want to add a new image asset to your Flutter app. Which two steps must you do to use it correctly?

hard

A. Place the image in assets/ folder and declare it in pubspec.yaml

B. Place the image in android/ folder and import it in main.dart

C. Place the image in lib/ and add it to pubspec.yaml

D. Place the image in test/ folder and reference it in code

Solution

1. Step 1: Store image in assets/ folder

   Images should be placed in a dedicated folder like assets/ for organization.

2. Step 2: Declare asset in pubspec.yaml

   You must list the image path under flutter/assets in pubspec.yaml to use it.

3. Final Answer:

   Place the image in assets/ folder and declare it in pubspec.yaml -> Option A

4. Quick Check:

   Assets folder + pubspec.yaml declaration = correct asset use [OK]

Hint: Always declare assets in pubspec.yaml after adding files [OK]

Common Mistakes:

• Putting images in lib/ folder
• Not declaring assets in pubspec.yaml
• Placing images in android/ or test/ folders