[Ultralytics Hub Flutter Clone Coding] #1. 사이드 메뉴 만들기

강의가 지루해서 클론 코딩을 시작해보려고 한다.

클론 코딩의 대상은 Yolo 를 만든 Ultralytics 라는 회사의 딥러닝 플랫폼 제품이다.

https://hub.ultralytics.com/

Ultralytics HUB

 

프론트엔드 코딩에 대한 지식이 전무하지만 어떻게든 되겠지 하는 마음으로 해보려한다 ㅎㅎㅎ

홈 화면

왼쪽에는 접어지는 메뉴가 있고

홈, 데이터 셋, 프로젝트, 모델, 기타로 구성되어 있다.

클론 코딩 대상은

홈 ,데이터 셋, 모델 정도로 하려고 한다.

 

오른쪽에는 튜토리얼과 빠른 액세스, 계정 정보가 보여진다.

사이드 메뉴

flutter 위젯 중에 비슷한게 생긴 것을 찾아 보니 side_navigation 이라는 것이 있었다.

 

pubspec.yaml 파일에 다음과 같이 추가하면 알아서 의존성이 설치된다.

 

SideNavigation 의 Header 는 Ultralytics의 로고를 가져와서 색만 바꿔주었다.

SideNavigation 의 항목은 SideNavigationBarItem 을 list 로 넣어주면 간단하게 항목을 구성할 수 있다.

해당 항목이 선택 되었을 때 표시할 오른쪽 내용물도 함께 Map 자료구조를 통해 함께 넣어 두었다.

SideNavigationBarHeader header = SideNavigationBarHeader(
    image: Image.network(
      "https://github.com/ultralytics/assets/blob/main/logo/Ultralytics-logomark-color.png?raw=true",
      width: 50,
      color: const Color(0xFFaaaa00),
    ),
    title: const Text("Flultralytics Hub"),
    subtitle: const Text("Huijae"));

List<Map> menuItems = const [
  {
    'navItem': SideNavigationBarItem(
      icon: Icons.home,
      label: 'Home',
    ),
    'view': Text('Home'),
  },
  {
    'navItem': SideNavigationBarItem(
      icon: Icons.data_array,
      label: 'Datasets',
    ),
    'view': Text('Datasets'),
  },
  {
    'navItem': SideNavigationBarItem(
      icon: Icons.broken_image_rounded,
      label: 'Models',
    ),
    'view': Text('Models'),
  },
];

 

Navigation 은 보통 왼쪽에 있고 내용물이 오른쪽에 있으므로 Row 를 통해 layout 을 구성해준다.

전체 화면의 구성물들은 인덱스가 바뀔때마다 Rendering 되어야 하므로 StatefulWidget 으로 만든다.

class MainView extends StatefulWidget {
  const MainView({Key? key}) : super(key: key);

  @override
  MainViewState createState() => MainViewState();
}

class MainViewState extends State<MainView> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SideNavigationBar(
            header: header,
            selectedIndex: selectedIndex,
            items: menuItems
                .map<SideNavigationBarItem>((item) => item['navItem'])
                .toList(),
            onTap: (index) => setState(() {
              selectedIndex = index;
            }),
          ),
          Expanded(
            child: menuItems.elementAt(selectedIndex)['view'],
          )
        ],
      ),
    );
  }
}

여기서 항목들 리스트들을 받아오는데 type cast 때문에 애를 먹었다.

map 함수를 통해 list 를 만들경우 내용물의 type 을 장담할 수 없기 때문인데,

map<타입> 문법을 사용하면 map 의 결과물들이 지정 type 으로 casting 된다.

이게 권장되는 문법인지는 잘 모르겠다.

결과물

좌측 메뉴를 클릭하면 우측 내용물이 잘 바뀌고,

메뉴를 최소화하여 아이콘만 보이게 할 수도 있다.

색이 못 생겨서 바꿔보았는데 역시 미적인 것은 안 건드리는 것이 나은 것 같다.