# Widgets

In Flutter, everything is a widget! Widgets are the building blocks of your app's user interface. They control how your app looks and how it interacts with the user. Let’s take a closer look at widgets and how you can use them to build your app.

## 1. Understanding Widgets 🤔

Widgets are essentially elements on the screen, like buttons, text, sliders, and more. They can also control layout aspects, like padding, alignment, and positioning. Widgets are organized in a hierarchical tree, where each widget may have a parent and children.

## 2. Types of Widgets 🧩

There are primarily two types of widgets in Flutter:

1. **Stateless Widgets:** These widgets are immutable, meaning their properties can’t change after they’re created.
2. **Stateful Widgets:** These widgets maintain state that might change during the lifecycle of the widget.

## 3. Creating a Stateless Widget 🛠️

Let's create a simple stateless widget that displays some text.

```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Example'),
        ),
        body: Center(
          child: Text('Hello, Flutter University!'),
        ),
      ),
    );
  }
}
```

## 4. Creating a Stateful Widget 🔄

Now, let’s create a stateful widget that includes a button to change the text on the screen.

{% tabs %}
{% tab title="Code" %}

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = 'Hello, Flutter University!';

  void changeText() {
    setState(() {
      text = 'You pressed the button!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              text,
            ),
            ElevatedButton(
              onPressed: changeText,
              child: Text('Press me'),
            )
          ],
        ),
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="https://522858097-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdSyMra5vx5HbARBPAir%2Fuploads%2F7rU6zhiU8RVt2tMgbPRe%2Fezgif.com-video-to-gif.gif?alt=media&#x26;token=accf63b5-8606-475b-a51b-56f14da5ecec" alt="" width="300"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 5. Common Widgets 🌐

Flutter provides a plethora of widgets. Some common ones include:

* `Container`: A box model widget that can contain other widgets and allows for customization of dimensions, padding, margin, decoration, etc.
* `Row` and `Column`: These widgets allow for horizontal and vertical arrangements of other widgets, respectively.
* `Stack`: Allows for the overlay of widgets on top of each other.

## Assignments 📝

Time to get your hands dirty with some practice:

* [ ] Create a stateless widget that displays an image from the internet.
* [ ] Create a stateful widget with a button that, when pressed, toggles between two images.
* [ ] Arrange a list of text widgets vertically and horizontally using `Column` and `Row` widgets.
* [ ] Create a `Container` widget with custom dimensions, padding, and a border.

{% hint style="info" %}
With the completion of these assignments, you'll have a better understanding of how widgets work in Flutter.&#x20;
{% endhint %}

The next topic, State Management, will further build upon these concepts and show you how to manage the state of your widgets efficiently.

Keep experimenting and happy coding!