# 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="https://522858097-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdSyMra5vx5HbARBPAir%2Fuploads%2FM3XQ5JOA1BLiNek4qSlj%2FScreenshot%202023-10-28%20at%2012.46.05%E2%80%AFAM.png?alt=media&#x26;token=0b631ce2-3d49-4d88-aeb2-21fcfa321bac" 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="https://522858097-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdSyMra5vx5HbARBPAir%2Fuploads%2FcTOLFsDpn99lZ0Jdb0Bw%2FScreenshot%202023-10-28%20at%2012.47.52%E2%80%AFAM.png?alt=media&#x26;token=c8cb8ba2-c68a-4d55-a1da-a1acd62030ff" 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!