사실 플러터는 앱이기 때문에 화면인 UI가 있어야하고 이 UI는 여러개의 위젯으로 되어있다!
그래서 여기서는 코드로 위젯들을 구성해보고 정리를 해보려고 한다
Everything is a Widget - Google의 플러터 공식 소개 문구!
Widget이란?
위젯은 현재 주어진 상태(혹은 데이터)를 기반으로 어떤 UI를 구현할지를 정의한다
이때 플러터는 UI에서 새로 바뀐부분만 원래와 비교해서 화면을 산출합니다.
그렇기에 최소한의 리소스를 이용해서 UI변경을 이끌어낼 수 있다!
child / children
child는 말 그대로 하나의 하위 위젯만 추가할 수 있다
여러개를 추가할 시 그건 children이다!
child속성으로 가지는 위젯은 Center나 Container, SizedBox등의 하나의 매개변수만 들어가는 위젯이고,
children속성으로 가지는 위젯은 복수의 위젯을 가질 수 있는 Row, Column, ListView, Stack등이 있다.
왜 이렇게 구분했을까 생각해보면 퍼포먼스 측면이 있지 않았을까 싶다
child로 되어있으면 한개만 봐도 된다는 뜻이므로 더 빠르게 처리할 수 있는 방법을 고안해 놨을거 같은..
위젯 연습해보기
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp (
home: Scaffold(
body: Center (
child: ,
),
),
),
}
}이 구조에서 시작할 예정이다! 차고로 main에서 run함수에 의해 실행이 된다
MyApp이 상속받는 StatelessWidget
MyApp이 상속받는 StatelessWidget은 화면이 로드될때 한번만 그려지는 즉 State를 검사할 필요가 없는
위젯들을 의미합니다.
ex)미소 닭갈비 앱의 가게 안내, 메뉴판 등 반대의 경우인 StatefulWidget도 있지만 둘은 성능의 차이가 있어 구별해 둔거 같다!!
구글이 지향하는 MaterialApp
옷을 사도 그 브랜드가 지향하는 스타일을 입으면 더 옷이 잘 소화되듯이, 구글도 플러터를 Material Designe을 고안하고 만들었다!
MaterialDesign은 플랫 디자인의 장점을 살리면서도 빛에 따른 종이 그림자 효과를 이용하여 입체감을 살리는 디자인 방식을 말한다.
디자인 뼈대를 구성해주는 Scaffold
implements the basic material design visual layout structure.
기본적인 Material Design의 시각적 레이아웃 구조를 실행한다!
디자인적인 부분에서 뼈대를 맡고 있다라고 생각하자!!
build 함수
빌드는 말 그대로 빌드 작업을 수행하여 위젯들로 화면을 구성하고 사용자에게 보여준다!
여것 빌드 함수는 위젯으로 BuildContext의 context를 받아온다!
이것은 이 위젯이 들어있는 위젯트리에서 위치를 가져오는 행위!
플러터는 모든 구현이 위젯단위이다, 작은 위젯부터 위젯을 감싸고 화면을 구성한다!
때문에 위젯의 위치를 무조건 알아야함! -> context로 리턴되는 위젯의 부모 위젯에 대한 위젯트리 안에서 위치를 알 수 있다
