Your First Flitter App

Now that installation is complete, let’s create your first app using Flitter’s core widgets Container and Text. Through this tutorial, you’ll learn the basic concepts of widget trees and how to combine widgets.

🎯 Learning Objectives

After completing this tutorial, you’ll be able to:

Create boxes with Container widget
Display text with Text widget
Nest widgets to create tree structures
Apply basic layout and styling
Arrange widgets vertically with Column

📚 Core Concept: What are Widgets?

In Flitter, Widget is the basic building block for constructing UI. Everything is made of widgets, and you can combine widgets to create complex UIs.

Immutable: Once created, widgets cannot be changed
Composable: Widgets can be nested inside other widgets to create complex structures
Reusable: The same widget can be used in multiple places

Container is one of Flitter’s most fundamental widgets. It’s used to create boxes and apply styling.

Key Properties of Container

Container({
  // Size settings
  width: 200,           // Width (pixels)
  height: 100,          // Height (pixels)
  
  // Color and style
  color: '#ff0000',     // Background color (hex code)
  
  // Margin settings
  padding: EdgeInsets.all(16), // Inner spacing
  margin: EdgeInsets.all(8),   // Outer spacing
  
  // Child widget
  child: Text('Hello')  // Single child widget
})

Margin Setting Methods

// Same margin on all sides
padding: EdgeInsets.all(16)

// Different horizontal/vertical margins
padding: EdgeInsets.symmetric({ horizontal: 20, vertical: 10 })

// Individual margin for each side
padding: EdgeInsets.only({ top: 8, right: 16, bottom: 8, left: 16 })

Text is a widget that displays text on screen.

Basic Usage of Text

// Simple text
Text('Hello, World!')

// Text with styling applied
Text('Styled text', {
  style: new TextStyle({
    fontSize: 20,        // Font size
    fontWeight: 'bold',  // Font weight: 'normal', 'bold', '100'-'900'
    color: '#1e40af',    // Text color
    fontFamily: 'Arial'  // Font family
  })
})

Text Alignment Options

Text('Aligned text', {
  textAlign: 'center'  // 'left', 'center', 'right', 'justify'
})

🔧 Practice: Creating Hello World App

Now let’s combine Container and Text to create a “Hello World” app.

Step 1: Create Basic Structure

First, let’s create a Container with blue background:

const widget = Container({
  color: '#f0f9ff',     // Light blue background
  padding: EdgeInsets.all(20), // 20px padding on all sides
  child: Text('Hello, Flitter!')
});

Step 2: Add Text Styling

Now let’s add styling to the text:

const widget = Container({
  color: '#f0f9ff',
  padding: EdgeInsets.all(20),
  child: Text('Hello, Flitter!', {
    style: new TextStyle({
      fontSize: 28,
      fontWeight: 'bold',
      color: '#1e40af'
    })
  })
});

Step 3: Add Multiple Texts

Let’s use Column widget to arrange multiple texts vertically:

import { Container, Text, Column, SizedBox, EdgeInsets, MainAxisAlignment, CrossAxisAlignment, TextStyle } from '@meursyphus/flitter';

const widget = Container({
  color: '#f0f9ff',
  padding: EdgeInsets.all(20),
  child: Column({
    mainAxisAlignment: MainAxisAlignment.center,    // Vertical center alignment
    crossAxisAlignment: CrossAxisAlignment.center,   // Horizontal center alignment
    children: [
      Text('Hello, Flitter!', {
        style: new TextStyle({
          fontSize: 28,
          fontWeight: 'bold',
          color: '#1e40af'
        })
      }),
      SizedBox({ height: 10 }),     // 10px height empty space
      Text('My first widget app', {
        style: new TextStyle({
          fontSize: 16,
          color: '#64748b'
        })
      })
    ]
  })
});

Column is a layout widget that arranges multiple widgets vertically.

Key Properties of Column

Column({
  // Vertical alignment (main axis)
  mainAxisAlignment: MainAxisAlignment.center,
  
  // Horizontal alignment (cross axis)
  crossAxisAlignment: CrossAxisAlignment.center,
  
  // Child widgets
  children: [
    Text('First'),
    Text('Second'),
    Text('Third')
  ]
})

Alignment Options Explained

mainAxisAlignment (vertical direction):

MainAxisAlignment.start: Top alignment
MainAxisAlignment.center: Center alignment
MainAxisAlignment.end: Bottom alignment
MainAxisAlignment.spaceBetween: Equal spacing between widgets
MainAxisAlignment.spaceAround: Equal spacing around widgets
MainAxisAlignment.spaceEvenly: All spacing is equal

crossAxisAlignment (horizontal direction):

CrossAxisAlignment.start: Left alignment
CrossAxisAlignment.center: Center alignment
CrossAxisAlignment.end: Right alignment
CrossAxisAlignment.stretch: Fill all horizontal space

🔧 TODO: Complete the Code

Now complete the code yourself:

import { StatelessWidget, Container, Text, Column, SizedBox, Center, EdgeInsets, MainAxisAlignment, CrossAxisAlignment, TextStyle } from '@meursyphus/flitter';

class HelloWorldApp extends StatelessWidget {
  build(context) {
    return Container({
      // TODO: Set light blue background (#f0f9ff)
      // TODO: Set 20px padding on all sides with EdgeInsets.all(20)
      child: Center({
        child: Column({
          // TODO: Set center alignment with MainAxisAlignment.center and CrossAxisAlignment.center
          children: [
            // TODO: Create "Hello, Flitter!" text
            // Hint: new TextStyle({ fontSize: 28, fontWeight: 'bold', color: '#1e40af' })
            
            // TODO: Create 10px height empty space with SizedBox({ height: 10 })
            
            // TODO: Create "My first widget app" text
            // Hint: new TextStyle({ fontSize: 16, color: '#64748b' })
          ]
        })
      })
    });
  }
}

export default function createApp() {
  return new HelloWorldApp();
}

🎯 Expected Results

After completing and running the code, you should see:

Light blue background box: 400x200 sized Container
Center-aligned text: “Hello, Flitter!” (large font, blue)
Subtitle: “My first widget app” (small font, gray)
Proper spacing: 10px gap between the two texts

🔧 Practice Problems

If you’ve completed the basic Hello World, try the following:

Exercise 1: Change Color Themes

Change to different color combinations:

// Exercise 1-1: Green theme
color: '#f0fdf4'      // Light green background
color: '#16a34a'      // Dark green text

// Exercise 1-2: Purple theme
color: '#faf5ff'      // Light purple background
color: '#9333ea'      // Dark purple text

Exercise 2: Add Text

Add a third text:

Text('Using with React', {
  style: new TextStyle({
    fontSize: 14,
    color: '#94a3b8',
    fontStyle: 'italic'
  })
})

Exercise 3: Change Layout

Change mainAxisAlignment to different values and check the results:

MainAxisAlignment.start: Top alignment
MainAxisAlignment.end: Bottom alignment
MainAxisAlignment.spaceBetween: Positioned at top and bottom ends

Exercise 4: Adjust Margins

Change the Container’s padding value:

// Different horizontal/vertical
padding: EdgeInsets.symmetric({ horizontal: 40, vertical: 15 })

// Different for each direction
padding: EdgeInsets.only({ top: 30, right: 20, bottom: 30, left: 20 })

🚨 Common Mistakes and Solutions

Problem 1: Text not visible

Cause: Container doesn’t have child set or Text widget created incorrectly

Solution:

// ❌ Wrong example
Container({ color: 'blue' })  // No child

// ✅ Correct example
Container({ 
  color: 'blue',
  child: Text('Hello')  // Child must be set
})

Problem 2: Using child instead of children in Column

Cause: Column has multiple children, so children array must be used

Solution:

// ❌ Wrong example
Column({ child: Text('Hello') })

// ✅ Correct example
Column({ children: [Text('Hello')] })

Problem 3: Colors not applied

Cause: Wrong color format or missing quotes

Solution:

// ❌ Wrong examples
color: #ff0000     // No quotes
color: 'ff0000'    // No #

// ✅ Correct examples
color: '#ff0000'   // Hex code
color: 'red'       // Color name
color: 'rgb(255, 0, 0)'  // RGB value

Problem 4: fontSize not applied

Cause: fontSize set as string or wrong style object structure

Solution:

// ❌ Wrong examples
Text('Hello', { fontSize: '20px' })           // Direct property
Text('Hello', { style: { fontSize: '20' } })  // String

// ✅ Correct example
Text('Hello', { style: { fontSize: 20 } })    // Set as number

Let’s look at the widget tree structure of our app:

Container (root)
├── color: '#f0f9ff'
├── padding: EdgeInsets.all(20)
└── child: Column
    ├── mainAxisAlignment: MainAxisAlignment.center
    ├── crossAxisAlignment: CrossAxisAlignment.center
    └── children:
        ├── Text('Hello, Flitter!')
        ├── SizedBox({ height: 10 })
        └── Text('My first widget app')

Parent-child relationship: Container contains Column, Column contains multiple Texts
Unidirectional data flow: Properties are passed from parent to child
Composability: Complex UI built by combining simple widgets

📏 Understanding Size and Constraints

How Container Determines Size

// 1. Explicit size specification
Container({
  width: 200,
  height: 100,
  child: Text('Fixed size')
})

// 2. Fit to child size (default)
Container({
  padding: EdgeInsets.all(16),
  child: Text('Fit to child size')
})

// 3. Take all available space (no child)
Container({
  color: 'red'  // Maximum size if no child
})

🚀 Next Steps

If you’ve successfully created the Hello World app, let’s add interaction in the next tutorial:

Next: Basic Interactions - Learn button clicks and state changes
Related: Container Styling - Learn advanced Container styling
Related: Text Styling - Learn various Text style options

💡 Key Summary

Container: Create boxes, set margins, apply colors
Text: Display text, font styling
Column: Arrange multiple widgets vertically
Widget Tree: Compose complex UI by nesting widgets
Composition: Create desired UI by combining simple widgets

Now you can use Flitter’s basic widgets! In the next tutorial, we’ll learn how to add user interactions.

Your First Flitter App

🎯 Learning Objectives

📚 Core Concept: What are Widgets?

Widget Characteristics

🏗️ Understanding Container Widget

Key Properties of Container

Margin Setting Methods

📝 Understanding Text Widget

Basic Usage of Text

Text Alignment Options

🔧 Practice: Creating Hello World App

Step 1: Create Basic Structure

Step 2: Add Text Styling

Step 3: Add Multiple Texts

🎨 Creating Layout with Column Widget

Key Properties of Column

Alignment Options Explained

🔧 TODO: Complete the Code

🎯 Expected Results

🔧 Practice Problems

Exercise 1: Change Color Themes

Exercise 2: Add Text

Exercise 3: Change Layout

Exercise 4: Adjust Margins

🚨 Common Mistakes and Solutions

Problem 1: Text not visible

Problem 2: Using child instead of children in Column

Problem 3: Colors not applied

Problem 4: fontSize not applied

🧠 Understanding Widget Tree

Widget Tree Characteristics

📏 Understanding Size and Constraints

How Container Determines Size

🚀 Next Steps

💡 Key Summary