First Flutter app (Hello World) - Deep Dive

Overview - First Flutter app (Hello World)

What is it?

A Flutter app is a small program that runs on your phone or computer and shows things on the screen. The 'Hello World' app is the simplest app you can make. It just shows the words 'Hello World' on the screen. This helps you learn how to create and run apps using Flutter.

Why it matters

Making a first app is like learning to ride a bike. Without it, you can't build anything bigger or more useful. Flutter helps you build apps that look good and work on many devices from one code. Without Flutter, you'd need to write different code for each device, which takes more time and effort.

Where it fits

Before this, you should know basic computer use and how to install software. After this, you will learn how to add buttons, images, and make your app respond to taps and swipes. This is the first step in your journey to building full mobile apps.

Mental Model

Core Idea

A Flutter app is a tree of widgets that describe what the screen should look like, and Flutter draws it for you.

Think of it like...

Think of Flutter like building with LEGO blocks. Each block is a widget, and you stack them to build your app's screen. The 'Hello World' app is like building a simple LEGO sign with just one block that says 'Hello World'.

App
├── MaterialApp (app container)
    └── Scaffold (basic page layout)
        └── Center (center content)
            └── Text('Hello World')

Build-Up - 6 Steps

1

Foundation

What is Flutter and Widgets

Concept: Flutter uses widgets as building blocks for everything you see on the screen.

Flutter apps are made of widgets. Widgets can be text, buttons, images, or layout helpers. Everything you see is a widget or made from widgets. The app starts with a main function that runs the app widget.

Result

You understand that widgets are the core pieces to build any Flutter app.

Knowing that widgets are the foundation helps you understand how Flutter builds and updates the screen.

2

Foundation

Creating the Main Function

Concept: The main function is the entry point where Flutter starts your app.

Every Flutter app starts with a main() function. Inside it, you call runApp() and pass your root widget. This tells Flutter what to show on the screen first.

Result

You can write the main function that launches your app.

Understanding the main function is key because it controls what your app shows first.

3

Intermediate

Using MaterialApp and Scaffold Widgets

🤔Before reading on: do you think MaterialApp is required to show text on screen? Commit to your answer.

Concept: MaterialApp provides app-wide settings and Scaffold gives a basic page structure.

MaterialApp sets up the app's theme and navigation. Scaffold gives you a blank page with places for app bars and body content. Wrapping your content in these widgets makes your app look like a real mobile app.

Result

Your app has a proper page layout and looks like a standard app screen.

Knowing these widgets helps you build apps that follow mobile design rules and look professional.

4

Intermediate

Centering Text on Screen

🤔Before reading on: do you think text is centered by default in Flutter? Commit to your answer.

Concept: Center widget places its child widget in the middle of the screen.

To center text, wrap the Text widget inside a Center widget. This tells Flutter to put the text right in the middle horizontally and vertically.

Result

The 'Hello World' text appears centered on the screen.

Understanding layout widgets like Center is important to control where things appear.

5

Advanced

StatelessWidget vs StatefulWidget

🤔Before reading on: do you think the Hello World app needs to change its display after starting? Commit to your answer.

Concept: StatelessWidget is for fixed content; StatefulWidget is for content that changes over time.

Hello World is static, so we use StatelessWidget. If your app needs to update the screen when users interact, use StatefulWidget. This helps Flutter know when to redraw parts of the screen.

Result

You know which widget type to use for simple or interactive apps.

Choosing the right widget type prevents unnecessary complexity and bugs.

6

Expert

How Flutter Renders the Hello World App

🤔Before reading on: do you think Flutter redraws the whole screen every time something changes? Commit to your answer.

Concept: Flutter builds a widget tree, then creates a render tree to draw pixels efficiently.

Flutter first builds widgets, then creates elements and render objects. It only redraws parts that change. For Hello World, the tree is simple and static, so Flutter draws it once. This efficient system makes apps fast.

Result

You understand Flutter's rendering pipeline and why it is performant.

Knowing Flutter's internals helps you write apps that run smoothly and debug rendering issues.

Under the Hood

Flutter uses a layered system: widgets describe the UI, elements manage widget instances, and render objects handle drawing. When runApp() is called, Flutter builds the widget tree starting from your root widget. It then creates elements and render objects to display pixels on screen. Flutter uses the Skia graphics engine to draw fast and smooth graphics directly on the device.

Why designed this way?

Flutter was designed to give developers full control over UI and performance. Using widgets for UI description allows easy composition and reuse. Separating widgets from rendering lets Flutter optimize drawing and animations. This design avoids relying on native UI components, enabling consistent look and feel across platforms.

runApp()
  ↓
Widget Tree (MaterialApp → Scaffold → Center → Text)
  ↓
Element Tree (manages widget instances)
  ↓
Render Tree (draws pixels)
  ↓
Skia Graphics Engine
  ↓
Screen

Myth Busters - 3 Common Misconceptions

Quick: Does Flutter use native UI components of the device to draw widgets? Commit yes or no.

Common Belief: Flutter uses native buttons and text fields from the device's operating system.

Reality: Flutter draws every pixel itself using its own rendering engine, not native UI components.

Why it matters: Thinking Flutter uses native widgets can confuse you about how to customize UI and why apps look consistent across platforms.

Quick: Is the main() function optional in Flutter apps? Commit yes or no.

Common Belief: You can skip the main() function and Flutter will still run your app.

Reality: main() is required as the entry point; without it, the app won't start.

Why it matters: Missing main() causes your app not to run, which is a common beginner error.

Quick: Does wrapping Text in Center automatically make the text bold? Commit yes or no.

Common Belief: Center widget changes the style of its child widgets like making text bold or bigger.

Reality: Center only changes position; it does not affect text style or appearance.

Why it matters: Confusing layout widgets with style widgets can lead to unexpected UI results.

Expert Zone

1

Flutter's widget tree is immutable; every UI change creates a new widget tree, but Flutter efficiently updates only what changed in the render tree.

2

Using const constructors for widgets like Text('Hello World') improves performance by reusing widget instances.

3

MaterialApp sets up important app-wide features like navigation, theming, and localization, which are easy to overlook in simple apps.

When NOT to use

For very simple scripts or command-line tools, Flutter is not suitable. Also, if you need native UI components with platform-specific behaviors, consider using platform channels or native development instead.

Production Patterns

In real apps, the Hello World structure expands to include routing, state management, and responsive layouts. Developers use StatelessWidget for static screens and StatefulWidget for interactive ones, combining many widgets to build complex UIs.

Connections

React Components

Flutter widgets and React components both describe UI declaratively using a tree structure.

Understanding Flutter widgets helps grasp React's component model and vice versa, as both rebuild UI from state changes.

Vector Graphics

Flutter uses a vector graphics engine (Skia) to draw UI elements as pixels on screen.

Knowing vector graphics basics explains why Flutter apps scale well on different screen sizes without losing quality.

Building with LEGO

Both involve assembling small blocks to create a bigger structure.

This analogy helps beginners visualize how small widgets combine to form complex app screens.

Common Pitfalls

#1 App does not start because main() is missing or empty.

Wrong approach:

void runApp(MyApp());

Correct approach:

void main() {
runApp(MyApp());
}

Root cause:

Confusing the entry point function with the runApp call; main() must exist as the app's start.

#2 Text widget not visible because it is not inside a Scaffold or MaterialApp.

Wrong approach:

runApp(Text('Hello World'));

Correct approach:

runApp(MaterialApp(home: Scaffold(body: Center(child: Text('Hello World')))));

Root cause:

Ignoring the need for app structure widgets that provide context and layout.

#3 Text not centered because Center widget is missing.

Wrong approach:

Scaffold(body: Text('Hello World')),

Correct approach:

Scaffold(body: Center(child: Text('Hello World'))),

Root cause:

Not understanding how layout widgets control positioning.

Key Takeaways

Flutter apps are built from widgets that describe the UI in a tree structure.

The main() function is the required starting point that launches your app with runApp().

MaterialApp and Scaffold provide the basic app structure and layout for mobile apps.

Center widget helps position content in the middle of the screen, which is not the default.

Understanding the difference between StatelessWidget and StatefulWidget is key for building static or interactive apps.

Practice

1. What is the main function used to start a Flutter app?

easy

A. startApp()

B. runApp()

C. beginApp()

D. launchApp()

Solution

1. Step 1: Identify the Flutter app entry point

   Flutter apps always start by calling the runApp() function to load the widget tree.

2. Step 2: Confirm the correct function name

   The function runApp() is the official way to start the app and display widgets on screen.

3. Final Answer:

   runApp() -> Option B

4. Quick Check:

   App start function = runApp() [OK]

Hint: Remember Flutter apps always start with runApp() [OK]

Common Mistakes:

• Using startApp() instead of runApp()
• Confusing with main() function
• Trying to use launchApp()

2. Which of the following is the correct way to display the text 'Hello World' centered on the screen in Flutter?

easy

A. Center(Text('Hello World'))

B. Text('Hello World').center()

C. Center(child: Text('Hello World'))

D. Text.center('Hello World')

Solution

1. Step 1: Understand widget nesting in Flutter

   Widgets are nested by passing child widgets as parameters, so Center(child: Text('Hello World')) is correct.

2. Step 2: Check syntax correctness

   Options A, B and C are invalid: A misses the named parameter 'child', B and C use invalid methods.

3. Final Answer:

   Center(child: Text('Hello World')) -> Option C

4. Quick Check:

   Center widget uses child: Text(...) [OK]

Hint: Use Center(child: Text('...')) to center text [OK]

Common Mistakes:

• Omitting 'child:' label
• Using invalid method calls on Text
• Trying to call center() on Text widget

3. What will be displayed on the screen when running this Flutter code?

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Hello Flutter'),
      ),
    ),
  ));
}

medium

A. Centered text 'Hello Flutter'

B. A blank screen

C. An error message

D. Text 'Hello Flutter' aligned to top-left

Solution

1. Step 1: Analyze widget tree structure

   The MaterialApp provides app structure, Scaffold gives a page layout, Center centers its child, and Text shows the string.

2. Step 2: Determine the visible output

   The Text widget with 'Hello Flutter' is centered on the screen inside Scaffold's body.

3. Final Answer:

   Centered text 'Hello Flutter' -> Option A

4. Quick Check:

   Center widget centers Text = centered text [OK]

Hint: Center widget centers its child widget on screen [OK]

Common Mistakes:

• Thinking Scaffold body is empty
• Assuming default alignment is top-left
• Expecting error without syntax issues

4. Identify the error in this Flutter code snippet:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Hello World')
      ),
    ),
  ));
}

medium

A. No error, code is correct

B. Missing semicolon after Text widget

C. Missing closing parenthesis for Center widget

D. Missing comma after Text widget

Solution

1. Step 1: Check widget parameter separators

   In Flutter, Center has only one named parameter (child: Text(...)); no comma is needed after a single parameter.

2. Step 2: Verify parentheses and semicolons

   Parentheses are balanced and semicolons are correctly placed after runApp call. Code runs fine.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Single named param needs no trailing comma [OK]

Hint: No comma needed for single widget param [OK]

Common Mistakes:

• Thinking comma is required after single child
• Confusing semicolon with comma
• Ignoring Dart's flexible comma syntax

5. You want to create a Flutter app that shows 'Hello World' in the center with a blue background. Which code snippet correctly achieves this?

hard

A. runApp(MaterialApp(home: Scaffold(body: Center(child: Text('Hello World'))), backgroundColor: Colors.blue)));

B. runApp(MaterialApp(home: Scaffold(body: Center(child: Text('Hello World')), backgroundColor: Colors.blueAccent)));

C. runApp(MaterialApp(home: Scaffold(body: Center(child: Text('Hello World')), backgroundColor: Colors.blueGrey)));

D. runApp(MaterialApp(home: Scaffold(backgroundColor: Colors.blue, body: Center(child: Text('Hello World')))));

Solution

1. Step 1: Understand Scaffold background color property

   Scaffold uses backgroundColor property to set the screen background color. It must be inside Scaffold's constructor.

2. Step 2: Check correct color usage

   runApp(MaterialApp(home: Scaffold(backgroundColor: Colors.blue, body: Center(child: Text('Hello World'))))); correctly uses Colors.blue inside Scaffold. A places backgroundColor on MaterialApp (invalid). C uses blueGrey (greyish), D uses blueAccent (bright accent).

3. Final Answer:

   runApp(MaterialApp(home: Scaffold(backgroundColor: Colors.blue, body: Center(child: Text('Hello World'))))); -> Option D

4. Quick Check:

   Scaffold backgroundColor = Colors.blue [OK]

Hint: Set backgroundColor inside Scaffold, not MaterialApp [OK]

Common Mistakes:

• Putting backgroundColor in MaterialApp
• Using invalid color names
• Forgetting to wrap Text in Center