flutter 기초개념(1)

Flutter 로 웹툰 앱 만들기

Widget으로 변경하려면 해야하는 일은?

클래스를 위젯으로 만들기 위해선 flutter SDK에 있는 3개의 core Widget중에 하나를 extend(상속)받아야한다. StatelessWidget을 상속받았음. 그럼으로써 위젯이 완성된거다.
하지만 우리는 StatelessWidget를 상속받으면서 계약을 맺게 되어있다. 만약 StatelessWidget를 상속받고 싶으면 build라고 불리는 메소드를 구현해야만한다.
모든 Widget은 build 메소드를 구현해야하고 StatelessWidget도 여기에 build메소드를 구현해야한다.

build 메소드가 하는 일은 뭘까?

flutter가 실행할 때 build 메소드가 무엇을 return 하던지 그걸 화면에서 보여준다.
즉, build 메소드는 우리의 Widget의 UI를 만드는거다.

@override 의 의미

부모 class에 이미 있는 메소드를 override(재정의) 하겠다는 말.
StatelessWidget에는 build 메소드가 있으니까 우리가 override 하는 것.
나만의 build 메소드를 구현하기위해서!

build 메소드의 Widget return

build 메소드도 Widget을 return 해야함. flutter는 build 메소드를 실행시킬건데 무엇을 return 하던지 그걸 화면에 띄어준다고 했다. 여기서 그 무엇은 Widget을 의미한다. 왜냐하면, flutter는 모든 것이 Widget이기 때문.
결국 또다른 Widget을 return하는 Widget을 만들고 있는거다.

그렇다면 어떤 Widget을 return 해야하지?

material VS cupertino

material 과 cupertino는 각각 구글과 애플의 디자인 시스템이다.
이건 우리가 어떤 family 스타일을 사용할지를 flutter한테 말해주는 것이다.
즉, 우리 앱이 어떻게 보이게 하고 싶은지에 대한 것을 정하는 것이다.
flutter는 구글이 만들었기 때문에 material 앱 스타일이 더 좋다.

home => MaterialApp class의 property이다.

Scaffold, 앱의 구조물

모바일 앱의 모든 화면은 scaffold가 필요하다. scaffold는 navigation bar를 구현할 수 있게 해주고 bottom tab bar나 상단 버튼, 화면 중앙 정렬 등 이런 것들을 scaffold가 해주는 것이다.

Class를 만들 때마다 ,(콤마) 잊지말기

Widget을 사용할 때마다 class를 인스턴스화 하는 것

사용자가 Player의 이름을 줄 수 있게 하는 방법

this가 의미하는것은 사용자가 Player의 이름을 여기에 써주면 dart는 그 파라미터를 가지고 Player안에 name을 넣어주는 것이다.

class Player {
  String name;
  Player(this.name);
}

void main() {
  var nico = Player("potato");
 // nico.name == potato
  runApp(App());
}

named parameter

class Player {
  String name;
  Player({required this.name});
}

void main() {
  var nico = Player(name: "potato");
  // nico.name == potato
  runApp(App());
}

?

?를 추가하면 Player가 name을 가질수도, 가지지 않을 수도 있다고 하는 것.
required가 아니라는 것이다. 자료형뒤에 ?가 있으면 아무 파라미터 없이도 만들 수 있다.
즉, Player를 만들 때 name을 꼭 보내지 않아도 된다는 것이다.

class Player {
  String? name;
  Player();
}

void main() {
  var nico = Player();
  runApp(App());
}