Turning a design into a working screen is the first thing most junior mobile developers are asked to do. If you can look at a sketch and quickly build it with the right widgets, you are already useful to a team.
Stateless and stateful widgets
Flutter has two main kinds of widget you will write yourself:
- A StatelessWidget shows something that does not change by itself, such as a product card built from data you pass in.
- A StatefulWidget holds information that can change while the screen is open, such as a counter or a checkbox. You will learn more about this in the state lesson.
Every widget has a build method that returns the widgets it is made of.
The layout building blocks
Most screens are built from a small set of widgets:
Columnplaces children from top to bottom.Rowplaces children from left to right.Paddingadds space around a widget.SizedBoxadds a fixed gap or size.Containeradds colour, borders or rounded corners.