Composition

Widgets
• In flutter, almost everything is a widget.
• A widget can:
• Display something: e.g. Text(‘Hello World’)
• Handle interaction with the user: e.g. Button(onTap: … callback)
• Specify the layout: e.g. Center, Container, Column, Row,
GridView, etc.
Composition
• Widgets are the building blocks
• Composition is the technique for creating a building from the blocks
• Building a Flutter app is like building a Lego set, piece by piece
Composition: An Example
• Check the following app and try to figure out
the widgets that compose the whole app.
• What basic widgets this app is build of?
Composition: An Example
• Looks like this app is composed of the
following Widgets:
• Image
• Text

• But there are things you are not seeing!

• Let’s look again!
Composition: An Example
• The Element (Widget) Tree that composes the app
 Composition: An Example
• Let’s build the app, block by block (Widget):
• First, what layout widgets we need:
• Row − Allows to arrange its children in a horizontal manner.
• Column − Allows to arrange its children in a vertical manner.
• ListView − Allows to arrange its children as list.
• Container − Generic, single child, box-based container widget with
alignment, padding, border and margin along with rich styling
features.
• Card is a sheet of Material used to represent some related
information, for example an album, a geographical location, a
meal, contact details, etc
Composition: An Example
• Building a single list item
Composition: An Example
• We can build the rest of list items by simply copying the code inside
the list view container.
• But that is a bad idea! do you remember DRY?
• So, what to do?
• Create a reusable Widget! The List item as whole represents a widget.
• Next, we are going to create a new widget that represents this list
item
Composition: An Example
Creating new Widget: Movie
• Do you notice that all movies items
have the same information?
• How to change that?
Composition: An Example
Passing parameters to widget
• We update our Movie Widget to have 4 member variables
• Notice how they are defined as final, why?
• Also, notice the constructor (Movie)
Composition: An Example
• Passing parameters to the child widget (Movie)
• Notice that all for parameters are required and named!
HW2: Build the following layout
• Due: 3-10-2020 23:50pm
• Submit you code to BitBucket.ppu.edu
• If you don’t have a BitBucket account, send me
an email
Padding, Border and Margin