Flutter Dev 2019
0 likes41 views
The document provides an overview of various Flutter widgets and components, detailing their functions and usage, such as Container, Text, TextFormField, and FlatButton. It explains how to use these widgets to create user interfaces, handle user input, and show notifications via Snackbars. Additionally, it covers concepts like Futures, Streams, and Firebase authentication methods for user registration and sign-in.
![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](https://image.slidesharecdn.com/dsc-flutter-191203114054/85/Flutter-Dev-2019-14-320.jpg)
Flutter Dev 2019
- 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
- 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...
- 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