Scribd
Upload
11 views

Flutter Basics

Uploaded by

santiago
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Flutter Basics

Uploaded by

santiago
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

StateLessWidget

//-> ui element that does not have any data, dumb widget that paints pixels on the
screen
//-> in other words does not deal with dynamic data

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
//build -> method -> returns a widget and it will be called every time flutter
needs to rebuild the ui
// it can also be known as the "ui descriptor"
return MaterialApp(
//its used as the root of the aplication
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.indigo,
title: Text("Lonch Test App"),
),
),
);
}
}

Scaffold() -> visula layout structure. Its a way to add a screen into a flutter app
with common UI Elements.

pre build widgets

- they all have named parameters that allows the costumisation of its apperance.
Ctrl + shift brings all the options.

Layouts

Container() -> the flutter <div></div> equivalent. Takes one child as an argument
where we can place any available widget.
Think of child as a box where we can store any widget to be displayed on screen.
It can be modiffied by changin Margin and Padding, Height and Width, ad many other
parameters.

Flex Layouts

Flutter provides a Column and a Row widgets that are use to display multiple
children horizontaly or verticaly.
While a Container() takes only one child, Columns and Rows takes multiple childs as
a list.
The direction they flow is called the main axis while the opossite directions is
the cross axis. This can be modified as well, where we can place the elementes
accross different
places of the axis. By default, icons have a flex value of 1, meaning that eaxh
icon/sibling ocupise the same amount of space, this can be change by wrapping a
child in a Flexible() or Expanded()
Widgets, in other words, this set up the amount of space each children would have
around'em.

Stack

Widgets Overlaping each other.

Stack() is a widget similar to column, where we can store childrens in a list. It


works like a literal stack where the higher the whidget is on te list, the further
it is displayed on screen.
In the case of a Container() and an Icon(), in order to the icon to be seen, it
must go below the container in the list.

Scaffold Magic!

Floating Action Button

Builder

x.Builder() is a function define by the programer that can map a list of data to a
list of widgets.

StateFullWidget

class MyApp extends StatefulWidget {

const MyApp({super.key});

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


@override
Widget build(BuildContext context) {
//build -> method -> returns a widget and it will be called every time flutter
needs to rebuild the ui
// it can also be known as the "ui descriptor"
return MaterialApp(
//its used as the root of the aplication
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.indigo,
title: Text("Lonch Test App"),
),
),
);
}
}

You might also like