강의가 지루해서 클론 코딩을 시작해보려고 한다.
클론 코딩의 대상은 Yolo 를 만든 Ultralytics 라는 회사의 딥러닝 플랫폼 제품이다.
프론트엔드 코딩에 대한 지식이 전무하지만 어떻게든 되겠지 하는 마음으로 해보려한다 ㅎㅎㅎ
홈 화면
왼쪽에는 접어지는 메뉴가 있고
홈, 데이터 셋, 프로젝트, 모델, 기타로 구성되어 있다.
클론 코딩 대상은
홈 ,데이터 셋, 모델 정도로 하려고 한다.
오른쪽에는 튜토리얼과 빠른 액세스, 계정 정보가 보여진다.
사이드 메뉴
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 된다.
이게 권장되는 문법인지는 잘 모르겠다.
결과물
좌측 메뉴를 클릭하면 우측 내용물이 잘 바뀌고,
메뉴를 최소화하여 아이콘만 보이게 할 수도 있다.
색이 못 생겨서 바꿔보았는데 역시 미적인 것은 안 건드리는 것이 나은 것 같다.
'지식 > Flutter' 카테고리의 다른 글
[Flutter] Constructor(생성자) (0) | 2023.02.04 |
---|---|
[Flutter] Stateless vs Stateful (0) | 2023.02.03 |
[Flutter] 개요 (0) | 2023.01.29 |
Dart 반복문 (0) | 2023.01.23 |
Dart 조건 분기 (0) | 2023.01.23 |
댓글