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.
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.
Text('Hello, world!')
Styling Text
To style Text
, we pass a TextStyle object to the style
attribute of a Text
widget:
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. We can also specify a color
and a size
.
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!
Instructions
Try modifying our example application. Change the colors, sizes, and content!