지난 유튜브 UI 클론부분에서 알아두면 좋을것 같은 내용입니다.

주어진 코드는 SingleChildScrollView 위젯을 사용하여 가로 방향으로 스크롤 가능한 메뉴를 구현하는 부분입니다. **SingleChildScrollView**는 하나의 자식 위젯만 가질 수 있는 스크롤 가능한 위젯입니다.

scrollDirection 속성은 **Axis.horizontal**으로 설정되어 있으므로, 가로 방향으로 스크롤 가능한 메뉴를 만들고자 합니다.

child 속성에는 Row 위젯이 사용되었습니다. **Row**는 수평으로 배열되는 자식 위젯들의 행입니다. 이 경우 **menus**라는 리스트를 사용하여 TopMenuButton 위젯을 가진 여러 개의 자식 위젯을 만듭니다.

**menus.map((e) => Padding(padding: const EdgeInsets.symmetric(horizontal:4), child: TopMenuButton(title: e))).toList()**는 menus 리스트의 각 요소에 대해 Padding 위젯을 적용한 후 TopMenuButton 위젯을 생성합니다. Padding 위젯은 가로로 4픽셀의 여백을 주는 역할을 합니다.

따라서, 주어진 코드는 SingleChildScrollView 위젯을 사용하여 가로 방향으로 스크롤 가능한 메뉴를 만들고, 각 메뉴에는 TopMenuButton 위젯이 포함되며, TopMenuButton 위젯은 menus 리스트의 요소를 기반으로 생성됩니다.

Navigation

화면을 전환을 뜻하고 다른 화면으로 전환은 push, 다시 되돌아오기는 pop 입니다

새로운 화면으로 이동하려면

onPressed: () {
Navigator.push(
context,
MaterialPageRoute(bulder: (context) => const SecondRoute()),
);
}

원래 화면으로 돌아오려면

onPressed: () {
Navigator.pop(context);
}

Router

pub dev에 보면 go_router 패키지를 사용합니다.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(const MyApp());

/// The route configuration.
final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

이해하기 어려웠던 내용과 기억하고 싶은것은..