1. Stack
: stack는 자료구조에서 많이 보인다. 기본적으로 push와 pop을 사용한다.
flutter에서 stack은 화면 위에 위젯을 표시하는 방식으로 화면에서 이동한다. 화면 위에서 위젯을 표시할 때 push를, 위에 표시된 화면을 제거할 때에는 pop을 사용한다.
Stack의 자식 위젯 위치를 조절하는데 쓰인다.
Postioned
Positioned 위젯은 Stack안에서 사용되어야 하며, StatelessWidget과 StatefulWidget에서만 사용가능하다.
그런데 여기서 positioned를 사용하여 top, left, right, bottom을 이용해서 자식들을 배치할 수 있다. 내가 하면서 제일 먼저 생성한 자식위젯은 맨 아래에 쌓인다. 그리고 제일 나중에 생성한 위젯은 제일 위에 배치된다. 웹으로 보면 z-index를 사용한 것처럼 보인다.
하면서 생긴 의문
검은색으로 생성한 박스위젯은 제일 나중에 생성된 박스위젯이다. 그런데 제일 나중에 생성되었음에도 불구하고 파란색 위젯에서 벗어나지 못했다. 그래서 잘 몰라서 헤매니, 검은색 위젯에 top옵션을 주었는데 파란색 위젯에는 top옵션을 안 주었기에 그렇게 되었다. 그리고 나서 파란색 박스위젯에 top옵션을 주니 stack이 쌓였다.
2. EdgeInsets
padding,margin과 같이 크기 조정할때 자주 사용하는 클래스이다.
EdgeInsets.all()
전체여백을 지정하는 옵션
EdgeInsets**.**all**(**8.0**)**
EdgeInsets.only()
특정영역에만 여백을 지정하고 싶을때 사용
EdgeInsets**.**only**(**bottom: 5**)**
EdgeInsets.only(left: 40.0)
EdgeInsets.fromLTRB
왼쪽,위,오른쪽,밑 순으로 지정이 가능
EdgeInsets**.**fromLTRB**(**4**,** 0**,** 4**,** 0**),**
EdgeInsets.symmetric(vertical: 8.0)
symmetric은 ’대칭적인’이라는 의미로 수평(horizontal), 수직(vertical)을 기준으로 여백지정이 가능하다.
- 수직(vertical) : 위,아래
- 수평(horizontal) : 왼쪽,오른쪽
3. Buildcontext
1) 첫번째 정의
Flutter 공식 문서를 통해 정의를 살펴보면
A handle to the location of a widget in the widget tree. 위젯 트리에서 위젯의 위치를 다루는 것.
Widget build(BuildContext context){
// example ...
return Scaffold(...) <- widget
}
build method가 Scaffold Widget을 리턴할 때 위젯 트리상에서 어디에 위치하는가에 대한 정보를 가지고 있는 context라는 것을 넣어서 리턴해준다는 의미이다.
2) 두번째 정의
build method 의 타입은 Widget이고 인자 값으로 BuildContext를 가진다.
build 메소드를 통해서 위젯을 반환하고 그 안에 buildcontext를 집어넣는다.
Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function 모든 위젯은 자신만의 BuildContext를 가지고 있고, 그것은 StatelessWidget.build or State.build에 의해 반환되는 위젯의 부모가 된다.
Widget build(BuildContext context){
// example ...
return Scaffold(...) <- widget
}
build 메소드의 인자값에 있는 context는 return 되는 scaffold 의 부모의 context이다.
부모의 context에는 부모 위젯까지의 정보를 가진다.
🔗 참고
https://negabaro.github.io/archive/flutter-painting-EdgeInsets
