NavigationRail 및 LayoutBuilder 위젯

플러터에는 많은 위젯들이 있다. 해당 위젯들을 얼마나 아는가 가 실력의 한 척도라고 생각이 된다. 

기본적으로 제공되는 좋은 위젯들이 많다. 

 

NavigationRail 위젯과 LayoutBuilder 위젯은 같이 사용하면 좋다. 

따라서 묶어서 정리하려 한다. 

 

1. NavigationRail

    - 메뉴라고 생각하면 된다.
    - 각각의 메뉴 아이콘, label을 등록한다
    - 각 메뉴 선택 이벤트 콜백이 존재한다. 
    - extended 어트리뷰트를 통해 확장형태 (아이콘 + 메뉴명) 을 보여줄지, 축소형태 (아이콘) 를 보여줄지

       정할 수 있다. 

    

 

2. LayoutBuilder
     - 현재 화면 크기를 구할 수 있다

     - 현재 화면 크기에 맞추어 위젯트리를 변경 할 수 있다. 

     - NavigationRail의 확장의 경우, 화면사이즈 변화에 맞춰 자동으로 변경되지 않는다. 

       따라서 이 위젯을 통해 자동으로 변경되도록 설정 할 수 있다.  
     - builder 인자값으로 constraints 를 받아 이를 통해 화면 크기를 구할 수 있다

 

 

NavigationRail 예

NavigationRail(
    extended: true 또는 false,
    destinations: [
      NavigationRailDestination(
          icon: Icon(아이콘), label: Text(텍스트)),
      NavigationRailDestination(
          icon: Icon(아이콘), label: Text(텍스트)),,
    ],
    selectedIndex: 숫자값. 보통은 변수를 배정하고 변수값을 변화시킨다,
    onDestinationSelected: (value) {
      print('$value');
    },

 

LayoutBuilder 와 NavigationRail 의 조합 예

return LayoutBuilder(builder: (context, constraints) {
      return Scaffold(
        body: Row(
          children: [
            SafeArea(
              child: NavigationRail(
                extended: constraints.maxWidth >= 600,
                destinations: [
                  NavigationRailDestination(
                      icon: Icon(아이콘), label: Text(문자열)),
                  NavigationRailDestination(
                      icon: Icon(아이콘), label: Text(문자열)),
                ],
                selectedIndex: 선택인덱스. 보통 변수로 설정하고 변수값을 조정,
                onDestinationSelected: (value) {
                  print('$value');
                },
              ),
            ),
          ],
        ),
      );
    });
  }