Hello World - Centering Text

One of the most basic tasks when working with graphics on the web is centering text on the screen. Even this seemingly simple task requires quite complex code with traditional approaches.

Why is this a problem?

To center elements in SVG or Canvas:

1. You need to know the container size
2. You need to calculate the element’s size
3. You need to manually calculate the center coordinates
4. You need to recalculate whenever the size changes

These repetitive and complex tasks are error-prone and make code difficult to read.

Declarative vs Imperative Programming

// Flitter로 카운터 구현하기
class CounterWidget extends StatefulWidget {
  createState() {
    return new CounterWidgetState();
  }
}

class CounterWidgetState extends State<CounterWidget> {
  count = 0;

  build(context: BuildContext) {
    return Center({
      child: Column({
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(`Count: ${this.count}`, {
            style: new TextStyle({
              fontSize: 48,
              fontWeight: 'bold',
              color: '#E5E7EB'
            })
          }),
          SizedBox({ height: 20 }),
          GestureDetector({
            onClick: () => {
              this.setState(() => {
                this.count++;
              });
            },
            child: Container({
              padding: EdgeInsets.symmetric({ 
                horizontal: 32, 
                vertical: 16 
              }),
              decoration: new BoxDecoration({
                color: '#3B82F6',
                borderRadius: BorderRadius.circular(8)
              }),
              child: Text('Click Me!', {
                style: new TextStyle({
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: '#FFFFFF'
                })
              })
            })
          })
        ]
      })
    });
  }
}

Understanding Key Concepts

1. Center Widget

Flitter’s Center widget automatically centers its child element:

Center({
  child: Text("This will be centered!")
})

2. Automatic Sizing

Flitter automatically recalculates the layout when the parent container size changes. There’s no need to write separate resize event handlers.

3. Declarative Styling

Use TextStyle to declaratively define the appearance of text:

Text("Styled text", {
  style: TextStyle({
    fontSize: 24,
    fontWeight: 'bold',
    color: '#3B82F6'
  })
})

Practice: Various Alignment Methods

Using the Align Widget

Center is actually a special case of the Align widget. For more precise control:

// Position at top right
Align({
  alignment: Alignment.topRight,
  child: Text("Top Right")
})

// Custom position (slightly above center)
Align({
  alignment: new Alignment(0, -0.5),
  child: Text("Above Center")
})

Using with Container

In real applications, it’s usually used together with Container:

Container({
  width: 300,
  height: 200,
  color: '#EFF6FF',
  child: Center({
    child: Text("Text in Container", {
      style: TextStyle({
        fontSize: 20,
        color: '#1E40AF'
      })
    })
  })
})

Why is this important?

1. Productivity: Implement desired layouts directly without complex calculations
2. Readability: Code clearly expresses intent
3. Maintainability: Layout logic is encapsulated, making modifications easy
4. Scalability: Complex layouts can be easily implemented by combining widgets

Next Steps

Now that you understand the basics of Flitter, let’s explore various shapes and layout widgets in the Basic Elements section.

Summary

• Flitter makes complex layouts simple with declarative programming
• Automatic center alignment is possible with the Center widget
• Responsive handling to size changes happens automatically
• You can achieve the same results with much less code compared to D3.js