# 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="/files/EYlDigCTWnwkEgLlcYk6" 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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteruniversity.gitbook.io/docs/learn-flutter/basics/widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.