Layout 위젯(2)

Expanded 위젯

  Row 또는 Column 위젯에서 사용가능한 공간을 채우는 데 주로 사용되는 위젯

  하위 위젯간의 레이아웃 설정 과정에서 사용가능한 모든 공간을 차지하도록 하거나, 사용가능한 공간을 재분배 하는데 사용

Row(
    children : [
        Expanded(
            child : Container()
        ),
        ...List.generate(
            3,
            (index) => Container(),
        ),
    ],
)

 

  - flex

    Row / Column 위젯에서 사용가능한 공간에서의 각각의 Expanded 위젯이 각각의 비율로 공간을 차지하도록 하는 옵션

// 각각 1 : 3 : 2 비율로 공간이 나눠지게 하는 로직
// Coulumn 내에서 사용되었으므로, mainAxis인 세로(height)가 비율로 나눠지게 됨
Column(
    children : [
        Expanded(
            flex : 1,
            width : 20,
        ),
        Expanded(
            flex : 3,
            width : 20,
        ),
        Expanded(
            flex : 2,
            width : 20,
        ),
    ],
)

 

Stack 위젯

  그래픽 프로그램의 레이어와 유사하게 위젯을 서로의 위에 배치하는데(겹치는데) 주로 사용되는 위젯

  화면의 특정 위치에 위젯을 배치하게 함으로써 보다 복잡한 레이아웃을 만드는데 사용할 수 있다.

Positioned 위젯

  Stack 위젯 내부에 하위 위젯을 배치하는데 사용되는 위젯

  Stack 위젯 내부에서 특정 위치에 하위 위젯을 배치하는데 주로 사용된다.

Stack(
  children: [
    // 원형 아바타 아이콘
    const CircleAvatar(
      radius: 50,
      child: Icon(
        Icons.person,
        size: 40,
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        padding: const EdgeInsets.all(7),
        decoration: const BoxDecoration(
            shape: BoxShape.circle, color: Colors.white),
        child: const Icon(
          Icons.camera_enhance,
          size: 24,
        ),
      ),
    )
  ],
),

 

Stack 위젯 옵션

  - fit

    Stack 위젯 내에서 자식 위젯의 크기를 조절하는데 사용되는 옵션

Stack(
  fit : StackFit.loose,  // stack 위젯 내부에서 자식 위젯의 크기 만큼 표현되게 하는 옵션(기본값)
  // fit : StackFit.expand,  // stack 위젯의 크기와 동일한 크기로 자식 위젯을 확장함
  // fit : StackFit.passthrough,  // 자식 위젯이 stack위젯을 뚫고 지나갈 수 있게 함
)

 

  - children

    Stack 위젯 내에서의 자식 위젯들을 배치하는데 사용하는 옵션

    리스트에서 먼저 담긴 위젯이 가장 아래 레이어에 위치하며, 층층이 쌓아가는 구조

 

Positioned 위젯 옵션

  - left, top, right, bottom

    각각 위젯의 왼쪽, 위, 오른쪽, 아래의 여백 값을 설정하는 옵션

    주의점으로는, left-right / top-bottom 값을 같이 설정할 경우 자식 위젯에서 설정된 사이즈를 무시하고 확장될 수 있으니 주의

Stack(
  children: [
    Positioned(
      left: 0,
      top: 0,
      child: Container(),
    ),
  ],
)

 

 

Draggable 위젯

  사용자가 드래그하여 다른 위치로 이동 가능한 위젯

Offset _offset = Offset(100, 100); // 초기 위치

Stack(
  children: [
    Positioned(
      left: _offset.dx,
      top: _offset.dy,
      child: Draggable(
        feedback: Container(
          width: 100,
          height: 100,
          color: Colors.blue.withOpacity(0.5),
        ),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
        childWhenDragging: Container(), // 드래그 중에는 빈 공간 표시
        onDragEnd: (details) {
          // 드래그가 끝났을 때의 위치 업데이트
          setState(() {
            _offset = Offset(
            details.offset.dx - 50, // 중심을 맞추기 위해 조정
            details.offset.dy - 50,
            );
          });
        },
      ),
    ),
  ],
);

 

Draggable 위젯 옵션

  - feedback

    드래그할 때 보여지는 위젯. 일반적으로 원본 위젯을 반투명하게 만들어 표시.

 

  - child

    사용자가 드래그하기 전의 상태를 나타냄. (원본 위젯)

 

  - childWhenDragging

    사용자가 Draggable 위젯을 드래그 중일 때 원래 위치에 보여질 위젯. 일반적으로 아무것도 설정하지 않는다.

 

  - onDragEnd

    드래그가 끝났을 때 호출되는 콜백 함수