Flutter로 시작하기: 측면 메뉴

앱을 탐색하는 가장 좋은 방법은 측면 메뉴를 사용하는 것입니다. 아시다시피 iOS 사용자가 싫어하는 기능입니다 😂. 점차 덜 보편화되고 있지만 사용하기가 덜 불편한 제스처 탐색 덕분에 여전히 앱의 기능을 분할하는 좋은 방법이 될 수 있습니다. 더 이상 고민하지 않고 ... 이 햄버거 메뉴를 만들어 봅시다!

기본 사항

간단한 측면 메뉴를 추가하는 것은 정말 쉽습니다. 모두 Scaffold 클래스에서 시작합니다.

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
      backgroundColor: Colors.white,

      //This is the key
      drawer: Container(
        width: 200,
        color: Colors.white,
        child: ListView.builder(
          itemCount: 4,
          itemBuilder: (context, index) {
              return Text('Item $index');
          },
        ),
      )
    );

drawer 매개변수는 모든 유형의 위젯을 가져와 화면 왼쪽 끝에 숨깁니다. 서랍을 추가하면 측면 메뉴의 "끌기"동작을 활성화하기에 충분하지만 "메뉴"버튼이 나타날 AppBar를 추가하는 것이 항상 더 좋습니다.

화면 오른쪽 가장자리에 배치하시겠습니까? 서랍 속성을 팝업하는 대신 endDrawer 속성에서 메뉴를 설정하는 것이 더 쉬운 방법은 아닙니다. 결과는 다음과 같이 나타납니다.

더 나은 터치 추가

인터랙션이 없는 메뉴는 꽤 쓸모가 없겠죠? 메뉴에 터치 기능을 추가하는 것은 원하는 모든 터치 컨트롤러, 버튼, 제스처 감지기로 수행할 수 있습니다... 유일한 문제는... 메뉴를 닫는 방법입니다. 단계별로 해봅시다:

먼저 요소를 좀 더 크게 만들고 클릭할 수 있도록 만들어 보겠습니다.

endDrawer: Container(
        width: 200,
        color: Colors.white,
        child: ListView.builder(
          itemCount: 4,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: GestureDetector(
                onTap: () {
                  print('$index');
                },
                child: Text('Item $index')
              ),
            );
          },
        ),
      ),

텍스트를 클릭하면 색인이 인쇄되지만 서랍은 열린 상태로 유지되므로 닫으려면... 꺼내야 합니다!

Navigator.pop(context);

Flutter는 메뉴를 열면 내비게이션 스택에 서랍이 추가되어 닫힙니다.

좋습니다. 이제 터치 기능을 추가하고 메뉴를 덜 보기 좋게 만들었습니다. 이제 터치에 의미를 추가해야 합니다.

몸의 변화

이제 간단한 정수를 표시하는 본문을 Scaffold에 추가해 보겠습니다.

var item = 0;

body: Center(
    child: Text('Hey, it\'s page $item'),
),

이제 단순히 a setState를 사용하여 메뉴 클릭에 따라 항목을 설정해 보겠습니다.

endDrawer: Container(
        width: 200,
        color: Colors.white,
        child: ListView.builder(
          itemCount: 4,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                  setState(() {
                    item = index;
                  });
                },
                child: Text('Item $index')
              ),
            );
          },
        ),
      ),

이제 메뉴가 몸의 내용물을 변경할 수 있습니다. 예, 매우 기본적인 구현이지만 원하는 방식으로 위젯을 원하는 만큼 추가할 수 있습니다. 이것이 Flutter의 힘이기도 합니다.

지금 무엇을 해야 합니까?

"기본"메뉴로 괜찮다면 그게 다입니다. 목록을 직접 사용하지 않고 열이나 다른 것을 사용하여 서랍에 "닫기"버튼을 추가하여 메뉴에 더 많은 양념을 추가할 수 있습니다. 나중 기사에서 약간의 화려함을 추가하여 메뉴를 새로운 수준으로 끌어 올릴 것입니다!

작성 기사