[1주차] 튜토리얼 영상 #1-#3

플러터(Flutter) 스터디는 매주 약 45분 분량의 (영어) 유튜브 튜토리얼 영상을 시청하고 실습하는 스터디입니다!
이번 1주차에서는 튜토리얼 영상 #1-#3을 다뤘습니다.

유튜브 튜토리얼 영상 재생목록: https://www.youtube.com/watch?v=4AoFA19gbLo&list=PLjxrf2q8roU3wk7CDw4RfV3mEwOJbjx1k

유튜브 튜토리얼 플레이리스트

 

---

[Flutter Tutorial for Beginners #1 - Intro & Setup]

튜토리얼 영상 #1에서는 플러터(Flutter)의 특징과 설치 방법에 대해 알 수 있었습니다.

Flutter

• Single code-base(dart) ⇒ run on both of the diff OS(iOS & Android)
• good layout methodology borrowed from responsive web
• smooth and quick experience when running apps
• works well with Firebase as a backend
• uses Dart ⇒ easy language to pick up
• uses Material Design out-of-the-box ⇒ easy to make apps look good

Installation

• Android Studio
• Git
• Flutter (Link: Windows install | Flutter)
• 환경변수 설정

 

---

[Flutter Tutorial for Beginners #2 - Flutter Overview]

튜토리얼 영상 #2에서는 플러터(Flutter)의 대표적인 특징 중 하나인 'Widget(위젯)'에 대해 배울 수 있었습니다.

 

Widgets are bedrock of Flutter application. Everything inside a flutter app is a ‘widget’.

Q: What is 'Widget Tree'?

A: Widget Tree is the structure of widgets inside Flutter app (one widget inside the other, another widget nested inside the other, etc.)

ex)

Root Widget(this surrounds everything in the entire app)

        App Bar Widget

                  Text Widget

         Container Widget

                  Text Widget

 

Flutter Widgets

• Text Widget { properties: style(determine how it looks ex. font-weight), textAlign, overflow, maxLines, .. }
• Button Widget: to create buttons { properties: color(define the color of the button), elevation(whether it should be elevated or not OR by how much), disabledColor(how it looks when the button is disabled), enabled(whether it is enabled or not), ... }
• Row Widget: for laying out different widgets in a row
• Column Widget: for laying out different widgets in a column
• Image Widget
• etc...

Each Flutter widget has its own programmatic class (which defines its behavior and how it looks on the screen!)

⇒ Language: Dart (developed by Google)

• mobile, desktop, web application
• Object-Oriented Programming
• class, function, types

 

---

[Flutter Tutorial for Beginners #3 - Dart Primer]

튜토리얼 영상 #3에서는 플러터(Flutter) 코드 작성의 기반이 되는 프로그래밍 언어인 'Dart'의 기본적인 문법에 대해 배울 수 있었습니다. Variables, Functions, List, Classes, Inheritance에 대해 알아보았습니다.

 

DartPad: DartPad (dartlang.org)

Docs for Dart Language: Dart documentation | Dart

 

Variables

• Dart: statically-typed programming language
• Once we declare a variable and we give the variable a type (ex. String), we then can’t change the type of that variable in the future

//Variable Declaration Example

void main() {
	String name = 'chun-li';

	/* name = 30;          
 <error: A value of type 'int' can't be assigned to a variable of type 'String'>
	*/
	print(name);
}

/* Console 출력 결과: 
chun-li
*/

• Dart also comes with a different data type called dynamic. If we say the type is dynamic, it means we can change that type in the future.

→ BUT this negates the benefit of using a statically typed language & it may lead to MORE ERRORS in your code if you accidentally switched types SO the tutor will avoid using the dynamic variable (and use only when needed) and instead more often not declare the type of variable first

//dynamic type example 

void main(){
	dynamic name = 'chun-li';
	name = 30; //원래는 에러 뜨는데 dynamic type이라 type 변환이 되는 것
	print(name);
}

/* Console 출력 결과: 
30
*/

 

Functions

• void main(): top-level required function in Dart. The function that Dart will automatically find and execute when we run a .dart file

→When we say ‘void’, it means we’re not returning anything inside that function

• We can return values from functions. We have to declare what we’re returning from the function when we write it.

//Function Example

void main() {
	print('something');
	String greet = greeting(); /* int greet = greeting(); (X!!)
<error message: A value of type 'String' can't be assigned to a variable of type 'int'>
so basically it has to match up with whatever we are actually returning form the function */
	int age = getAge();
	print(age);
	print(greet);
}

String greeting() {
	return 'hello';
}


int getAge() {
	return 30;
}


/* Console 출력 결과: 
something
30
hello
*/

• Arrow Function: we can use this if the return fits onto one line

→Nice way to create functions if they’re just returning a single value

//Function Example

void main() {
	print('something');
	String greet = greeting(); 
	int age = getAge();
	print(age);
	print(greet);
}

/* BEFORE: 
String greeting() {
	return 'hello';
}
*/

//AFTER:
String greeting() => 'hello'; 

//Get rid of the curly braces and 'return', and add an arrow
//RUN, then everything should still work exactly THE SAME as BEFORE!
//cf) parantheses: 괄호

/*BEFORE:
int getAge() {
	return 30;
}
*/

//AFTER:
int getAge() => 30;


/* Console 출력 결과: 
something
30
hello
*/

 

List

• A list in Dart ~= a bit like an array in JavaScript. We use the same square bracket notation to store a list of different values

void main(){
	List names = ['chun-li', 'yoshi', 'mario'];
	
	names.add('luigi');
	names.remove('yoshi');
	names.add(30);

	print(names);
}

/* Console 출력 결과:
[chun-li, mario, luigi, 30]
*/

• We could add in ‘any data type’ to this list above. But if you declare the type of data that you want to put inside the list, like this(List<String>), then it would only let us add strings to this list. If we put integer in this situation, there will be an error.

void main(){
	List<String> names = ['chun-li', 'yoshi', 'mario'];
	
	names.add('luigi');
	names.remove('yoshi');
	names.add(30); /* error: the argument type 'int' can't be 
assigned to the parameter type 'String' */

	print(names);
}

/* Console 출력 결과:
[chun-li, mario, luigi, 30]
*/

 

Classes

void main(){

	User userOne = User(); 
	print(userOne.username);
	userOne.login();
//this will create a new User object(instance) 
//and store it inside the new User variable which is 'userOne'

//to create an actual user object based on class User
//instanciating the class(making an instance of the class)

	User userTwo = User(); //now we have two User objects
	print(userTwo.username);

}

class User {

	String username = 'mario';
	int age = 25;
//2 properties(username and age) describing the user object

	void login(){
		print('user logged in');
} //login method(function)

}
//class User is not actually creating any kind of user object 
//but it is just a class, the thing that describes the user object


/* Console 출력 결과: 
mario
user logged in
mario
*/

• By the things we typed inside the ‘User’ class, every user is going to have a username of ‘mario’, and the age of 25.
• But we can override this behavior. We can use what is known as ‘a constructor inside a class’
• Constructor is a special function that runs when we instantiate a class and that function can take in different parameters so we can override these values.

void main(){

	User userOne = User('luigi', 25); 
//We're passing String 'luigi' and int 25 so that the constructor can take
//them and set up this new User object created
	print(userOne.username);

	User userTwo = User('mario', 30); 
	print(userTwo.username);

}

class User {

	String username=''; //초기화 (안하면 에러 발생!)
	int age=0; //초기화 (안하면 에러 발생!)
    
    
//We are still creating these variables but not assigning them any values yet

//We don't have to put 'void' or anything like that in front of this 
//because this is a special constructor function


//Creating constructor. Constructor has to have the same name as the class itself
	User(String u, int a){ //take in some different parameters
//This means when we instantiate a class User, so when we create a new user object
//We expect these two values (u, a) to be paseed in as arguements to 'User();'

//to make it clear: String u = String username, int age = int a 에 각각 대응

	this.username= u;
	this.age = a;

}


	void login(){
		print('user logged in');
} 

}

/* Console 출력 결과: 
luigi
mario
*/

 

Inheritance

• When we have a class that inherits from another class
• If we want ‘SuperUser’ that has same properties and behavior as a regular user but we also want it to have an extra function that normal User doesn’t have to inherit the properties( String username;, int age; ) and the function( void login() )
• So basically class SuperUser should inherit User, and then we can add additional behaviors and properties to this class

void main(){

	User userOne = User('luigi', 25); 
	print(userOne.username);

	User userTwo = User('mario', 30); 
	print(userTwo.username);

	SuperUser userThree = SuperUser('yoshi', 20);
	print(userThree.username);
	userThree.publish();
	userThree.login(); //userThree also has access to the login function 
//because we extended the User class and inherited the login function too

//userTwo.publish(); <error: the method 'publish' isn't defined for the class 'User'>

}

class User {

	String username;
	int age;

	User(String username, int age){ //위에 있는 Claases 코드에서는 구분을 위해
//매개변수 이름을 달리 하였는데, 여기서는 헷갈려서 그냥 강의에서 나오는대로 통일하였다. 
	this.username= username; 
	this.age = age;
}


	void login(){
		print('user logged in');
} 

}

class SuperUser extends User {

	SuperUser(String username, int age) : super(username, age);
//We are creating constructor for SuperUser 
//We don't set the values right here in the SuperUser, we inherit from User which has those values
//So we need to call super() which calls constructor in the calss that it extends from
//and it passes those values in

	//Extra function
	void publish(){
			print('published update');
}

}

/* Console 출력 결과:
luigi
mario
yoshi
published update
user logged in
*/