Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
286 views

Flutter Widgets

This document discusses widgets and composition in Flutter. It explains that: - Everything in Flutter is a widget that can display content, handle interactions, or specify layout. - Widgets are building blocks that are composed together to build Flutter apps, similar to building with Lego blocks. - An example app is broken down to show how it is composed of basic widgets like Image and Text, as well as layout widgets like Row, Column, and ListView.

Uploaded by

leyan zahdeh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
286 views

Flutter Widgets

This document discusses widgets and composition in Flutter. It explains that: - Everything in Flutter is a widget that can display content, handle interactions, or specify layout. - Widgets are building blocks that are composed together to build Flutter apps, similar to building with Lego blocks. - An example app is broken down to show how it is composed of basic widgets like Image and Text, as well as layout widgets like Row, Column, and ListView.

Uploaded by

leyan zahdeh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like