[Study Jam 1.0] Flutter Workshop (Beginner)

GDSC Monash Flutter Workshop

1. While waiting… Please go to “ shorturl.at/mouD5 ” using your laptop Then, click “ Use Template ” Create an account in flutlab.io

2. GDSC - Study Jam Flutter

3. Part 1: Dart Syntax Speaker: Benjamin Leong Overview on the syntax in Dart Familiarise with syntax for next session Part 2: Flutter 101 Speaker: Benjamin Lim Overview on Flutter - Why Flutter? Code Along with Flutter - Simple Application Event Flow

4. Part 1: Dart Syntax Benjamin Leong GDSCFLUTTER

5. Title here GDSCFLUTTER Title Content Content A Condition

6. Title here

7. Rough Draft (Structure/Layout) Variables What are they? General Syntax Data Types (?) Conditionals If/Else Ternary Functions Normal Anonymous/Arrow/Lambda

8. Part 1: Dart Syntax Variables General Syntax Data Types Slido Code: GDSCFLUTTER Conditionals If-Else Ternary Functions Syntaxes Anonymous

9. Variables

10. Variables Container of data/values Used to store values to be used or referred to Has a unique name

11. Variables - General Syntax var variableName = variableValue ; var Is a keyword used in Dart Indicates declaration of a variable variableName Must be unique Uses lowerCamelCase naming convention variableValue Single value or an expression Can be any data type. What is a data type?

12. Variables - Data Types Data Types - As the name suggests, types of data Examples: DateTime String Map Set Number Boolean Iterable List Object

13. Variables - Data Types Data Types - As the name suggests, types of data Examples: String List Number Boolean Int double

14. Conditionals

15. Conditionals A B C A B2 B1 Condition C2 C1 With conditionals Normally, code executes line by line Conditionals allows multiple routes If condition met Else

16. Conditionals - If-Else Statements Conditionals are created using the keywords ‘if’ and ‘else’. if ( condition ) { code_for_if; } else { code_for_else; } v ar x = 2 ; var result = ‘’ ; if ( x % 2 == ) { result = ‘x is even.’ ; } else { result = ‘x is odd.’ ; }

17. Conditionals - Ternary Expressions Alternatively, Dart also has Ternary Expressions which is more concise. c ondition ? code_for_if : code_for_else; var x = 2 ; var result = ‘’ ; result = x % 2 == ? ‘x is even.’ : ‘x is odd.’ ;

18. Functions

19. Functions Container of line(s) of code Similarly to variables, must have unique name When a function is called, it runs the code which it contains Used to remove redundant repetition of code

20. Functions - Regular Syntax returnType functionName ( inputType inputName) { code_for_function; return returnValue; } The returnType is encouraged but not required. int addOne ( int myNumber) { return myNumber + 1 ; } otherAddOne ( int myNumber) { return myNumber + 1 ; }

21. Functions - Shorthand Syntax For functions with just one expression , you can use the shorthand syntax: returnType functionName ( inputType inputName) => returnValue; Note that the keyword ‘return’ is not needed here int addOne ( int myNumber) => myNumber + 1 ;

22. Functions - Anonymous Anonymous functions do not require functionName. Regular Syntax int ( int myNumber) { return myNumber + 1 ; } Shorthand Syntax int ( int myNumber) => myNumber + 1 ;

23. End of Part 1! Thank you!

24. FLUTTER 101 Benjamin Lim

25. Note: Please open flutlab.io and create an account in the meantime

26. open-source UI software development kit created by Google allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase (mainly mobile tho) uses the Dart programming language (what we jus learned) Widget based architecture What is Flutter?

27. Why Flutter? Fast Development Cycle Highly customizable widgets High Performance finally... HOT RELOAD!!

28. Widgets? Stateless Widgets Result 2 Immutable / Static Do not change over time based o n user interaction Eg: Designs, Layout, or Text Maintain state which might change over its lifetime Mutable properties Eg: Weather, Time (anything which is manipulatable) Stateful Widgets

29. Coding Time