TwoPane Flutter 위젯 - Dual-screen

아티클
07/10/2023

이 레이아웃에는 두 개의 자식 창이 있는데, 이 창은 나란히 표시되거나 위와 아래에 표시되거나 단일 창의 우선 순위를 지정할 수 있습니다. 두 창 위젯의 상대적 크기를 비례적으로 조정할 수 있으며 이중 화면 디바이스에서는 경계가 힌지 영역에 맞춰집니다.

설치

프로젝트가 dual_screen 따라 달라지도록 하려면 를 포함하는 TwoPane패키지를 실행하면 됩니다.

flutter pub add dual_screen

이렇게 하면 패키지의 pubspec.yaml 에 이와 같은 줄이 추가되고 암시적 flutter pub get를 실행합니다.

dependencies:
  dual_screen: ^1.0.2+2

pubspec.yaml에 종속성을 수동으로 추가한 경우 도 실행flutter pub get해야 합니다.

이제 다트 파일에서 위젯 사용을 TwoPane 시작할 수 있습니다. 여기서 종속성도 가져와야 합니다.

import 'package:dual_screen/dual_screen.dart';

접을 수 있는 디바이스 렌더링

앱이 Surface Duo에 걸쳐 있으면 각 위젯이 전체 화면을 채웁니다.

Surface Duo의 Flutter TwoPaneView, 왼쪽 화면에 파란색 위젯이 표시되고 오른쪽 화면에 주황색 위젯이 표시됩니다.

플랫폼 간 렌더링

앱이 태블릿, 데스크톱 앱 또는 웹 페이지와 같은 더 큰 화면에서 렌더링되면 창이 표시되지만 크기 조정은 비례적으로 설정됩니다.

바탕 화면의 Flutter TwoPaneView에서 두 개의 창을 나란히 표시하고 첫 번째 창은 공간의 3분의 1을 차지합니다.

TwoPane API

class TwoPane {
  const TwoPane({
    Widget startPane,
    Widget endPane,
    double paneProportion,
    TwoPanePriority panePriority,
    Axis direction,
    TextDirection? textDirection,
    VerticalDirection verticalDirection,
    EdgeInsets padding,
  });
}

위젯의 TwoPane 속성:

startPane - 왼쪽에서 오른쪽 레이아웃의 경우 왼쪽 또는 위쪽에서 아래쪽 레이아웃의 위쪽에 배치할 수 있는 시작 창입니다. 가 start 이고 힌지(hinge)가 없으면 panePriority 표시되는 창만 표시됩니다.
endPane - 왼쪽에서 오른쪽 레이아웃의 경우 오른쪽 또는 위쪽에서 아래쪽 레이아웃의 아래쪽에 배치할 수 있는 끝 창입니다. 가 end이고 힌지(hinge)가 없으면 panePriority 표시되는 유일한 창입니다.
paneProportion - 시작 창에서 차지하는 화면의 비율입니다. 끝 창이 나머지 공간을 차지합니다. 값이 0.5이면 두 창이 같아집니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우 각 창이 하나의 화면을 차지합니다.
panePriority - 시작 창, 끝 창 또는 둘 다만 표시할지 여부입니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우 both 창이 표시됩니다.
direction - 플렉스 방향과 유사하게 두 창을 세로 또는 가로로 쌓을지 여부입니다. 이 속성은 힌지가 있는 디스플레이에 대해 무시됩니다. 이 경우 방향은 세로 힌지 및 vertical 가로 힌지에 대한 방향입니다horizontal.
textDirection - 창이 가로로 배치되면 왼쪽에 있는 창이 결정됩니다. Flex textDirection과 동일하게 동작합니다.
verticalDirection - 창이 세로로 배치되면 위쪽에 있는 창이 결정됩니다. Flex verticalDirection과 동일하게 동작합니다.
padding - TwoPane과 화면 가장자리 사이의 안쪽 여백입니다. TwoPane과 루트 MediaQuery padding 사이에 간격이 있는 경우 는 두 창을 힌지에 올바르게 맞추는 데 사용됩니다.

팁

에 제공된 TwoPane 대부분의 매개 변수는 디바이스에 힌지(hinge)가 있을 때 무시됩니다. 즉, 태블릿 및 데스크톱과 같은 대형 화면에서 레이아웃이 작동하는 방식에 중점을 두면서 기본적으로 이중 화면 폼 팩터에 잘 적응할 수 있습니다.

사용 예제

Widget build(BuildContext context) {
  return TwoPane(
    startPane: BlueA(),
    endPane: OrangeB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.start,
  );
}

이 샘플 코드는 이 문서의 시작 부분에서 결과를 생성합니다.

Surface Duo에서 위젯 A와 위젯 B는 모두 하나의 화면을 사용합니다.
태블릿 또는 데스크톱에서 위젯 A는 화면의 30%를 차지하고 위젯 B는 나머지 70%를 차지합니다.
너비가 500개 미만인 작은 휴대폰 에서는 위젯 A만 표시됩니다.

Flutter TwoPane 위젯

설치

접을 수 있는 디바이스 렌더링

플랫폼 간 렌더링

TwoPane API

사용 예제

추가 리소스