ENDS 12/4: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


This lesson will introduce basic widgets that Flutter uses to make up an application. Topics covered include:

* What are Widgets?
* Material and Scaffold Widgets
* Text Widgets
* Styling Text
* Icon Widgets

Introduction to Widgets

Congratulations! Let’s review what we learned about widgets:

## Widgets

**Widgets** define our content, how it looks, and how it interacts with the user. They are the main way we create Flutter applications. We create widgets by calling their constructors with parameters defining their content.

## Starting Our App

After we import the Flutter library, we define our app inside of `main` which calls `runApp`. Inside of that call we have the **MaterialApp** widget which provides important information about our app. Inside of MaterialApp we use the **Scaffold** widget, which provides our app with a structure.

```dart
import 'package:flutter/material.dart';
 
void main {
  runApp(
    const MaterialApp(
      home: Scaffold()
    )
  );
}
```

## Text

To create a **Text widget**, we simply call its constructor with the text we want to display. Other options can be provided as well.

```dart
Text('Hello, world!')
```

## Styling Text

To style `Text`, we pass a **TextStyle object** to the `style` attribute of a `Text` widget:

```dart
 Text(
    'Hello, world!',
    style: TextStyle(color: Colors.red, fontSize: 24)
  );
```

The `TextStyle` object allows us to specify things like `fontSize` and `color`.

## Icons

Icons can be created by specifying an icon from [Google's list of icons](https://fonts.google.com/icons). We can also specify a `color` and a `size`.

```dart
const myIcon = Icon(
  Icons.check,
  color: Colors.green,
  size: 100.0,
);
```

We've learned a lot about the basics of creating Flutter content. With that, we are ready to start creating more complex apps!

Review

The text of our application doesn't really stand out. So let's change the code to make the text big and red!

As mentioned earlier, the `Text` widget constructor allows multiple parameters including one called `style`. The `style` parameter tells the `Text` widget how to style the text.

Flutter provides a [class called `TextStyle`](https://api.flutter.dev/flutter/painting/TextStyle-class.html) that holds style information about our `Text`. Its constructor allows us to specify attributes such as `color` and `fontSize`. 

We can first create a variable for our `TextStyle`.  Let's declare this variable near the top, between `main` and `runApp`:

```dart
void main() {

    const bigRedStyle = TextStyle(color:Colors.red, fontSize: 24);

    runApp(
```

In `bigRedStyle`, we have indicated the color and size of the text.

Next, we can add a `style` parameter to the `Text` constructor and add the new style we created as its argument.

```dart
  Text(
    'Hello, world!',
    style: bigRedStyle
  );
```

Let's try it out in the Flutter editor.

Styling a Text Widget

Let’s explore a fundamental concept in Flutter: **Widgets**. 

Widgets represent elements of our user interface: 

* Buttons
* Lists
* Toolbars
* Text 
* and everything else! 

If we examine a Flutter app, the user interface is made up of widgets combined together.

Widgets make up much of application programming in Flutter. We will use widgets to define:

* Pieces of content
* How that content is laid out
* How pieces of that content will interact together

Flutter includes many widgets in its library, but we can also build our own by combining library widgets together. 

We create Flutter widgets by calling their constructor. Constructors accept parameters, which give them the information required to create the widget. Some of these parameters have names to identify them, some don’t.

We'll learn about specific widgets as we go through this lesson, so let's get started!

A **Text widget** displays text within an application. 
[Text widgets](https://api.flutter.dev/flutter/widgets/Text-class.html) are created by calling their constructor `Text()`, and passing in some arguments. The most basic form is:

```dart 
Text('Hello, world!')
```

The information in quotes tells the widget what text to display.

We can also customize the text further.

The Text widget constructor allows additional named parameters, including the following:

* `style`: Specify the text style, for example, `Colors.red` and a size of `72` pixels
* `textAlign`: Specify the text alignment to left, center, or right.
* `textDirection`: Specify left to right text direction or the reverse.
* `softWrap`: Specify if the text should wrap to another line if it runs out of room.

To place the Text widget into our app, we will set it to be the `body` widget of our Scaffold widget. Here's what that will look like:

```dart
Scaffold(body: Text('Hello!'))
```

Let's try it out.

Text Widgets

Let's get ready to create our first app.

Flutter apps `import` the Flutter framework at the top of the `main.dart` file. This brings in the libraries necessary to display Flutter output:

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

Every Dart app starts with the function `void main()`. This is where our code starts running and is the entry point of the application.

```dart
void main() {
}
```

The `main` function invokes the [`runApp` function](https://api.flutter.dev/flutter/widgets/runApp.html). `runApp` takes in one Widget and displays it as a Flutter app. This widget is known as the **root widget** and is the starting point for our application. `runApp()` on its own won't compile though because it needs a widget:

```dart
  runApp();
```

`MaterialApp` is a widget designed to be the root widget of an app. [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) provides vital services to widgets, such as telling them what colors to use and what direction to display text in. Dart prefers we use `const` in front of the first widget for our app:

```dart
  runApp(
    const MaterialApp()
  );
```

MaterialApp takes a `home` parameter. In our examples, the `home` element of our app will be the **Scaffold widget**:

```dart
  const MaterialApp(
    home: Scaffold()
  )
```

While the MaterialApp provides core information, the [Scaffold widget](https://api.flutter.dev/flutter/material/Scaffold-class.html) will provide a basic structure to our app. Later on, we will use some of its features to create menus and toolbars.

This leaves us with the final starting point for our application:

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

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold()
    )
  );
}
```

In the next exercise, we will take a look at our first widget with content.


An Application Starting Point

We've learned how to display text, but what about basic images? Displaying a simple image is the role of the [**Icon Widget**](https://api.flutter.dev/flutter/widgets/Icon-class.html).

Icons are only for display purposes and cannot respond to user input such as tapping or clicking. We would need a different widget for that, an [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html). In this exercise, we will focus on the use of Icon Widgets for decorating our app.

This widget only has a single constructor. These are the most important constructor parameters:

* The first and unnamed parameter (Required): Specifies which of [the predefined list of Icons](https://api.flutter.dev/flutter/material/Icons-class.html) should be displayed, such as `Icons.favorite`.
* `color` (Optional): Specifies which [Flutter color](https://api.flutter.dev/flutter/material/Colors-class.html) the Icon should be.
* `size` (Optional): Specifies how big the Icon should be, in pixels.

The code below creates a red icon that displays a clock and has a size of 24 pixels.
It assigns the icon to variable `myIcon`.

```dart
const myIcon = Icon(
  Icons.check,
  color: Colors.green,
  size: 100.0,
);
```

We could include the Icon by making it the `body` Widget of our Scaffold.

```dart
Scaffold(body: myIcon)
```
