What are Widgets?

In Flitter, widgets are the fundamental building blocks of your application’s user interface. Inspired by Flutter, everything you see on the screen in a Flitter app is a widget. Understanding widgets is crucial for effectively using Flitter to create data visualizations and interactive interfaces.

Definition of Widgets

A widget in Flitter is an immutable description of part of a user interface. Widgets can describe:

• Structural elements (like containers or rows)
• Stylistic elements (like colors or fonts)
• Layout aspects (like padding or alignment)
• And more complex functionalities (like gestures or animations)

Types of Widgets

Flitter provides several types of widgets, broadly categorized as:

1. Basic Widgets: Such as Container, Text, and Image.
2. Layout Widgets: Like Row, Column, and Stack.
3. Interactive Widgets: Including GestureDetector and Tooltip.
4. Painting and Effect Widgets: For example, Transform and Opacity.
5. Stateful Widgets: Widgets that can change over time based on user interaction or other factors.

Using Widgets

Here’s a simple example of how widgets are used in Flitter:

import {
  Container,
  Text,
  Center,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";

const MyWidget = Container({
  width: 200,
  height: 100,
  color: Colors.blue[500],
  child: Center({
    child: Text("Hello, Flitter!", {
      style: new TextStyle({ color: Colors.white, fontSize: 20 }),
    }),
  }),
});

Widget Tree

Widgets in Flitter are arranged in a tree structure. This tree represents the hierarchy of your user interface. For example:

       App
        │
    Container
        │
      Center
        │
       Text

Each widget in the tree can have child widgets, creating a nested structure that defines your entire UI.

Composition vs Inheritance

Flitter favors composition over inheritance when it comes to creating custom widgets. This means that instead of subclassing existing widgets, you typically create new widgets by combining existing ones.

Stateless vs Stateful Widgets

Flitter has two main types of widgets:

1. Stateless Widgets: These are immutable. Once they’re built, their properties can’t change.
2. Stateful Widgets: These can rebuild themselves when their internal state changes.

Let’s look at examples of both:

Stateless Widget Example

import {
  StatelessWidget,
  Container,
  Text,
  TextStyle,
  Colors,
} from "@meursyphus/flitter";

class Greeting extends StatelessWidget {
  private name: string;

  constructor(name: string) {
    super();
    this.name = name;
  }

  build() {
    return Container({
      padding: EdgeInsets.all(16),
      color: Colors.blue[100],
      child: Text(`Hello, ${this.name}!`, {
        style: new TextStyle({ color: Colors.black, fontSize: 24 }),
      }),
    });
  }
}

// Usage
const myGreeting = new Greeting("Alice");

Stateful Widget Example

import {
  StatefulWidget,
  State,
  Container,
  Text,
  TextStyle,
  Colors,
  GestureDetector,
} from "@meursyphus/flitter";

class Counter extends StatefulWidget {
  createState() {
    return new CounterState();
  }
}

class CounterState extends State<Counter> {
  private count: number = 0;

  incrementCounter() {
    this.setState(() => {
      this.count++;
    });
  }

  build() {
    return Container({
      padding: EdgeInsets.all(16),
      color: Colors.blue[100],
      child: GestureDetector({
        onTap: () => this.incrementCounter(),
        child: Text(`Count: ${this.count}`, {
          style: new TextStyle({ color: Colors.black, fontSize: 24 }),
        }),
      }),
    });
  }
}

// Usage
const myCounter = new Counter();

Conclusion

Understanding the difference between stateless and stateful widgets is crucial for efficient Flitter development. Use stateless widgets for parts of your UI that depend only on their configuration info and the current theme, while stateful widgets are perfect for parts of the UI that need to dynamically change based on user interaction or other factors.

In the next sections, we’ll dive deeper into specific types of widgets and how to manage their state more effectively.