# Basic Layout and Styling

In Flutter, crafting a visually pleasing layout is achieved through a combination of layout and style widgets. Let’s explore how you can arrange widgets and style them.

## 1. Layout Widgets 📐

Layout widgets allow you to arrange other widgets on the screen. Some common layout widgets include:

* **Row:** Arranges widgets horizontally.
* **Column:** Arranges widgets vertically.
* **Stack:** Overlays widgets on top of each other.
* **GridView:** Arranges widgets in a grid.

## 2. Your First Layout 🎉

Let’s create a simple layout with a `Column` and `Row` widget.

{% 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: Scaffold(
        appBar: AppBar(
          title: Text('Basic Layout'),
        ),
        body: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(child: Text('Hello')),
                Expanded(child: Text('Flutter')),
                Expanded(child: Text('University!')),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
                Icon(Icons.star, size: 50),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/HSDOY5mblfpJ9EcZtySw" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 3. Styling Widgets 🎨

Styling is essential for creating an intuitive and attractive UI. You can style widgets using various properties like `color`, `padding`, `margin`, `alignment`, and more.

#### Example: Styling Text and Containers

{% 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: Scaffold(
        appBar: AppBar(
          title: Text('Styling Example'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blue,
            child: Text(
              'Hello, Flutter University!',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

{% endtab %}

{% tab title="Result" %}

<figure><img src="/files/EpWa9zoWdqsQiGHeVvYI" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## 4. Using Themes 🎨

Themes allow you to define a cohesive style throughout your app.

```dart
MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    textTheme: TextTheme(
      displayLarge: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      titleLarge: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyMedium: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: MyHomePage(),
);
```

## Assignments 📝

Practice is key! Here are some exercises:

* [ ] Create a layout using `Stack` and `GridView`.
* [ ] Style a `Container` with a border, margin, and padding.
* [ ] Create a custom theme for your app and apply it.
* [ ] Build a layout with nested rows and columns.

{% hint style="info" %}
Completing these assignments will give you a good grasp of basic layout and styling in Flutter. <mark style="background-color:yellow;">The more you experiment with different widgets and styling options, the more comfortable you'll become.</mark>&#x20;
{% endhint %}

Up next, explore Basic Interactivity to make your apps respond to user input and actions!


---

# 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/basic-layout-and-styling.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.