Positioned / Positioned.fill

Positioned 위젯!

https://youtu.be/EgtPleVwxBQ

 

https://api.flutter.dev/flutter/widgets/Positioned-class.html

Positioned class - widgets library - Dart API

Positioned위젯은 Stack과 함께 쓰는데. 

left, top, right, bottom 속성을 지정해서 위치를 잡아둔다. 

 

생성자중 Positioned.fill 이 있는데, 이것은 스택을 꽉 채워서 보여준다. 

	Stack(
        children: [
          Positioned.fill(
            child: BodyTop(),
          ),
          DraggableScrollableSheet(
              initialChildSize: 0.66,
              maxChildSize: 0.999,
              minChildSize: 0.15,
              builder: (context, scrollController) {
                return SingleChildScrollView(
                  controller: scrollController,
                  child: SecondView(),
                );
              }),
        ],
      ),

Stack에 Positioned.fill 을 사용해 꽉 채우는 화면을 만들고. 그 위로 DraggableScrollableSheet를 넣어주면

다음과 같은 화면이 완성된다. 

위 4개의 메뉴가 BodyTop() 부분으로 Postioned.fill 의 child 속성으로 넣어주어 화면을 꽉 채워둔다. 

DraggableScrollableSheet 시트로 밑에 화면을 완성하여 child속성값으로 넣어둔다..