A presentation on creating your first "Hello Flutter!" app and Login app using Flutter and Firebase. Explanations on the syntax used are also available. Link to app repository: https://github.com/DSC-Binus-KMG-2019/flutter-firebase-event-final

1. Bina Nusantara Kemanggisan
We’re gonna learn a lot today!

2. Bina Nusantara Kemanggisan
A good day to learn

3. Bina Nusantara Kemanggisan
Let’s make a

4. Bina Nusantara Kemanggisan

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

6. Bina Nusantara Kemanggisan
Builder (context)
Used to pass a context of the builder.
Code used
SizedBox(height)
To give a gap between widgets inside a column

7. Bina Nusantara Kemanggisan
Center(child)
To make all the widgets in it centered on the screen
Code used
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

8. Bina Nusantara Kemanggisan
Text(string, style)
To display a text.
Code used
● String parameter needs the string that want to be passed
and shown.
● Style parameter needs the TextStyle

9. Bina Nusantara Kemanggisan
TextFormField(decoration, texthint, onsaved, obscureText)
Used to get input from user.
Code used
● 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.

10. Bina Nusantara Kemanggisan
FlatButton(child, onPressed)
Used to get input from user.
Code used
● 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.

11. Bina Nusantara Kemanggisan
Scaffold.of(context).showSnackBar(content)
Code used
● 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.

12. Bina Nusantara Kemanggisan
Today we are going to
make...

13. Bina Nusantara Kemanggisan

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

15. Bina Nusantara Kemanggisan
InkWell(child, onTap)
A rectangular area that responds to touch
Code used
● 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

16. Bina Nusantara Kemanggisan
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.
Code used
Definitions referenced from api.flutter.dev

17. Bina Nusantara Kemanggisan
ListView.Builder(itemCount, itemBuilder(context, index))
Widget used to construct a list
Code used
● itemCount the length of list
● itemBuilder provide a context and index is the current index
of the list
Definitions referenced from api.flutter.dev

18. Bina Nusantara Kemanggisan
ListTile(title, subtitle, leading, trailing)
A single fixed-height row that typically contains some text as
well as a leading or trailing icon
Code used
● All the parameters receives widgets.
Definitions referenced from api.flutter.dev

19. Bina Nusantara Kemanggisan
Image.network(string, width, height)
To get images from a URL.
Code used
● 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.

20. Bina Nusantara Kemanggisan
Navigator.of(context).pushReplacement(MaterialPageRoute)
To replace current context with new context with the help of
MaterialPageRoute.
Code used
● Context parameter requires the application context.

21. Bina Nusantara Kemanggisan
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.
Code used

22. Bina Nusantara Kemanggisan
Future vs Streams
● A stream is a combination of futures
● Future has only one response but Stream could have any
number of Response
Code used
Definitions referenced from dev.to/nitishk72

23. Bina Nusantara Kemanggisan
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.
Code used
Definitions referenced from dev.to/nitishk72

24. Bina Nusantara Kemanggisan
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.
Code used
Definitions referenced from dev.to/nitishk72

25. Bina Nusantara Kemanggisan
Link to Original Repo

26. Bina Nusantara Kemanggisan