We’re gonna learn a lot today!

Bina Nusantara Kemanggisan

 A good day to learn

Bina Nusantara Kemanggisan

 Let’s make a

Bina Nusantara Kemanggisan

Bina Nusantara Kemanggisan
 Components used
Builder, Center, Form, Container, Column, Text,
TextFormField, FlatButton, Snackbar

Bina Nusantara Kemanggisan

 Code used
Builder (context)
Used to pass a context of the builder.

SizedBox(height)
To give a gap between widgets inside a column

Bina Nusantara Kemanggisan

 Code used
Center(child)
To make all the widgets in it centered on the screen

Container(child, padding)
This widget is used to contain a child widget with the
ability to apply some styling properties i.e padding, margin,
width, height

Bina Nusantara Kemanggisan

 Code used
Text(string, style)
To display a text.

● String parameter needs the string that want to be passed

and shown.
● Style parameter needs the TextStyle

Bina Nusantara Kemanggisan

 Code used
TextFormField(decoration, texthint, onsaved, obscureText)
Used to get input from user.

● The decoration is used to give a style using TextStyle.

● The texthint parameter is used to give a placeholder.
● Onsaved is used to trigger an action when a the field is saved.
● ObscureText is used to change text character to password.

Bina Nusantara Kemanggisan

 Code used
FlatButton(child, onPressed)
Used to get input from user.

● The child parameter is widget inside the button such as Text

to give a text to the button
● onPressed( must be implemented) parameter is the function
you want to run when the button is pressed.

Bina Nusantara Kemanggisan

 Code used
Scaffold.of(context).showSnackBar(content)

● The content parameter is filled with SnackBar widget.

SnackBar(content)

● The content parameter is filled with the string that is going to

be shown in the SnackBar.

Bina Nusantara Kemanggisan

 Today we are going to
make...

Bina Nusantara Kemanggisan

Bina Nusantara Kemanggisan
 Code used
Column(<Widget>[])
A widget that displays its children in a vertical position

Row(<Widget>[])
A widget that displays its children in horizontal position

Bina Nusantara Kemanggisan

 Code used
InkWell(child, onTap)
A rectangular area that responds to touch

● Child parameter is filled with a widget (i.e Text widget).

● onTap is filled with a function that runs when InkWell is
tapped.

Definitions referenced from api.flutter.dev

Bina Nusantara Kemanggisan
 Code used
Expanded(child)
Widget that expands a child of Row, Column, or Flex so the
child fills the available space. This widget must be a descendant
of a Row, Column, or Flex

● The child parameter is usually filled with a ListView.

Definitions referenced from api.flutter.dev

Bina Nusantara Kemanggisan
 Code used
ListView.Builder(itemCount, itemBuilder(context, index))
Widget used to construct a list

● itemCount the length of list

● itemBuilder provide a context and index is the current index
of the list

Definitions referenced from api.flutter.dev

Bina Nusantara Kemanggisan
 Code used
ListTile(title, subtitle, leading, trailing)
A single fixed-height row that typically contains some text as
well as a leading or trailing icon

● All the parameters receives widgets.

Definitions referenced from api.flutter.dev

Bina Nusantara Kemanggisan
 Code used
Image.network(string, width, height)
To get images from a URL.

● The string parameter is filled with the URL of the image.

● The width parameter is filled with the desired width of the Image
widget.
● The height parameter is filled with the desired height of the
Image widget.

Bina Nusantara Kemanggisan

 Code used
Navigator.of(context).pushReplacement(MaterialPageRoute)
To replace current context with new context with the help of
MaterialPageRoute.

● Context parameter requires the application context.

Bina Nusantara Kemanggisan

 Code used
Future
Future is used to represent a potential value, or error, that will
be available at some time in the future.

Streams
Streams provide an asynchronous sequence of data.

Bina Nusantara Kemanggisan

 Code used
Future vs Streams
● A stream is a combination of futures
● Future has only one response but Stream could have any
number of Response

Definitions referenced from dev.to/nitishk72

Bina Nusantara Kemanggisan
 Code used
Firebase Auth in Firebase
createUserWithEmailAndPassword(email, password)
This function is used to register/sign up a user.

● The email parameter requires a parameter to be passed.

● The password parameter requires a parameter to be passed.

Definitions referenced from dev.to/nitishk72

Bina Nusantara Kemanggisan
 Code used
Firebase Auth in Firebase
signInWithEmailAndPassword(email, password)
This function is used to authenticate the user.

● The email parameter requires a parameter to be passed.

● The password parameter requires a parameter to be passed.

Definitions referenced from dev.to/nitishk72

Bina Nusantara Kemanggisan
 Link to Original Repo

Bina Nusantara Kemanggisan

Bina Nusantara Kemanggisan