pushNamed()

Flutter에서 Navigator의 pushNamed 메서드와 MaterialApp의 routes 맵은 앱 내의 라우트(화면 이동)를 관리하는 데 사용됩니다. 이 방법을 사용하면 앱 전체의 라우트를 중앙에서 관리할 수 있으며, 문자열 기반의 라우트 이름을 사용하여 쉽게 화면 전환을 할 수 있습니다.

routes 설정 방법:

MaterialApp 위젯 내에서 routes 맵을 정의하여 앱에서 사용할 라우트와 해당 라우트에 대응되는 위젯을 지정할 수 있습니다.

MaterialApp(
  // 앱 시작점
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),  // 홈 페이지
    '/login': (context) => LoginScreen(),  // 로그인 페이지
    '/signup': (context) => SignUpScreen(),  // 회원가입 페이지
    // 추가 라우트 설정
  },
);

pushNamed 사용 방법:

Navigator.of(context).pushNamed 메서드를 사용하여 routes에 정의된 라우트 이름을 기반으로 새 페이지로 이동할 수 있습니다. 이 메서드는 routes 맵에서 해당 이름을 찾아 그에 매칭되는 위젯으로 화면을 전환합니다.

Navigator.of(context).pushNamed('/login');

이 코드는 현재 컨텍스트에서 /login 이름을 가진 라우트로 이동하라는 지시를 Navigator에 전달합니다. routes 맵에 /login 키로 등록된 LoginScreen 위젯으로 화면이 전환됩니다.

예시 사용 시나리오:

1. 사용자가 앱을 열면 initialRoute에 지정된 홈 페이지가 표시됩니다.
2. 홈 페이지에 로그인 버튼이 있고, 사용자가 이 버튼을 탭하면 로그인 페이지로 이동합니다.
3. 로그인 페이지에서 로그인 성공 후, 사용자는 다른 페이지로 자동으로 이동할 수 있습니다.

이러한 방식으로 Flutter 앱에서 페이지 라우팅을 구성하면, 앱의 네비게이션 로직을 간결하고 체계적으로 관리할 수 있습니다.

이 코드는 Flutter에서 네비게이션 라우트를 설정하는 방식을 보여줍니다. 특히, MaterialApp의 initialRoute와 routes를 사용하여 앱 내의 화면 이동을 관리하는 방법을 설명하고 있습니다. 또한, UsernameScreen 위젯을 포함하여 여러 화면을 정의하고 있습니다. 아래는 수정하여 말이 되게 포맷된 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(const TikTokApp());
}

class TikTokApp extends StatelessWidget {
  const TikTokApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TikTok Clone',
      initialRoute: SignUpScreen.routeName,
      routes: {
        SignUpScreen.routeName: (context) => const SignUpScreen(),
        UsernameScreen.routeName: (context) => const UsernameScreen(),
        LoginScreen.routeName: (context) => const LoginScreen(),
      },
    );
  }
}

// SignUpScreen.dart 파일 내용 예시
class SignUpScreen extends StatefulWidget {
  static const String routeName = "/signup";
  const SignUpScreen({super.key});

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

class _SignUpScreenState extends State<SignUpScreen> {
  @override
  Widget build(BuildContext context) {
    // SignUpScreen 레이아웃 구현
    return Scaffold();
  }
}

// UsernameScreen.dart 파일 내용 예시
class UsernameScreen extends StatefulWidget {
  static const String routeName = "/username";
  const UsernameScreen({super.key});

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

class _UsernameScreenState extends State<UsernameScreen> {
  @override
  Widget build(BuildContext context) {
    // UsernameScreen 레이아웃 구현
    return Scaffold();
  }
}

// LoginScreen.dart 파일 내용 예시
class LoginScreen extends StatefulWidget {
  static const String routeName = "/login";
  const LoginScreen({super.key});

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

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    // LoginScreen 레이아웃 구현
    return Scaffold();
  }
}

이 코드는 앱 시작 시 TikTokApp 위젯을 실행하고, MaterialApp을 통해 앱의 메인 구조를 정의합니다. initialRoute는 앱이 시작할 때 처음으로 보여줄 화면을 지정하고, routes는 앱 내에서 이동할 수 있는 각 화면(라우트)을 지정합니다. 각 화면은 고유의 routeName을 가지며, 이 이름을 사용하여 프로그래밍 방식으로 화면 간에 이동할 수 있습니다.

위의 코드는 Flutter 애플리케이션에서 이름 기반 라우팅을 사용하는 방법을 보여줍니다. initialRoute와 routes 맵을 MaterialApp 위젯에 설정하여, 앱의 다양한 화면(라우트)으로의 이동을 관리합니다. 또한, LoginScreen을 포함한 각 스크린(위젯)에 static 변수 routeName을 선언하여, 라우트의 이름을 정의하고 있습니다.

코드 설명:

1. initialRoute 설정:

   • initialRoute는 앱이 시작될 때 처음으로 표시되는 라우트를 지정합니다. 여기서는 SignUpScreen.routeName을 initialRoute로 설정하여, 앱이 시작되면 SignUpScreen이 첫 화면으로 표시되도록 합니다.

2. routes 맵:

   • routes 맵은 문자열 키(라우트 이름)와 해당 키에 대응하는 위젯을 생성하는 함수의 맵입니다. 이 맵을 사용하여 앱 내에서 이름을 사용해 라우트를 지정할 수 있습니다.
   • 예제에서는 SignUpScreen, UsernameScreen, LoginScreen 각각의 routeName을 키로 사용하고, 해당 스크린을 생성하는 함수를 값으로 지정합니다.

3. UsernameScreen 정의:

   • UsernameScreen은 StatefulWidget으로 정의되며, routeName이라는 static 변수를 가집니다. 이 변수는 해당 스크린의 라우트 이름을 저장하며, "/username"으로 설정됩니다. 이 이름은 routes 맵에서 해당 스크린으로의 이동을 지정할 때 사용됩니다.

라우트 이동 예시:

라우트 이름을 사용하여 다른 스크린으로 이동하려면 Navigator.of(context).pushNamed() 메서드를 사용합니다. 예를 들어, 사용자가 로그인 페이지로 이동하고자 할 때 다음과 같이 호출할 수 있습니다:

Navigator.of(context).pushNamed(LoginScreen.routeName);

이 호출은 routes 맵에서 LoginScreen.routeName에 해당하는 함수를 찾아 LoginScreen 위젯을 생성하고, 그 위젯으로 화면을 전환합니다.

요약:

이 방식을 사용하면, 앱 내의 모든 라우트를 중앙에서 관리할 수 있으며, 라우트 이름을 사용하여 프로그래밍 방식으로 간편하게 화면 전환을 할 수 있습니다. 라우트 이름을 static 변수로 관리함으로써, 타이핑 오류를 줄이고 코드의 유지 보수성을 높일 수 있습니다.

import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/email_screen.dart';
import 'package:tiktok_clone/features/authentication/widgets/form_button.dart';

class UsernameScreen extends StatefulWidget {
  static String routeName = "/username";
  const UsernameScreen({super.key});

  @override
  State<UsernameScreen> createState() => _UsernameScreenState();
}

class _UsernameScreenState extends State<UsernameScreen> {
  final TextEditingController _usernameController = TextEditingController();

  String _username = "";

  @override
  void initState() {
    super.initState();
    _usernameController.addListener(() {
      setState(() {
        _username = _usernameController.text;
      });
    });
  }

  @override
  void dispose() {
    _usernameController.dispose();
    super.dispose();
  }

  void _onNextTap() {
    if (_username.isEmpty) return;
    Navigator.pushNamed(
      context,
      EmailScreen.routeName,
      arguments: EmailScreenArgs(username: _username),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Sign up",
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: Sizes.size36,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Gaps.v40,
            const Text(
              "Create username",
              style: TextStyle(
                fontSize: Sizes.size24,
                fontWeight: FontWeight.w700,
              ),
            ),
            Gaps.v8,
            const Text(
              "You can always change this later.",
              style: TextStyle(
                fontSize: Sizes.size16,
                color: Colors.black54,
              ),
            ),
            Gaps.v16,
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(
                hintText: "Username",
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey.shade400,
                  ),
                ),
              ),
              cursorColor: Theme.of(context).primaryColor,
            ),
            Gaps.v28,
            GestureDetector(
              onTap: _onNextTap,
              child: FormButton(disabled: _username.isEmpty),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 Navigator.pushNamed 부분은 Flutter 네비게이션 시스템을 사용하여 UsernameScreen에서 EmailScreen으로 화면 전환을 하는 동작을 수행합니다. 이때, 사용자가 입력한 사용자 이름(_username)을 EmailScreen으로 전달합니다. 이 과정은 몇 가지 중요한 단계를 포함합니다:

1. 사용자 이름 입력 받기

• 사용자는 TextField 위젯을 통해 사용자 이름을 입력합니다. 이 TextField는 _usernameController를 사용하여 사용자의 입력을 관리합니다.
• _usernameController에 리스너를 추가하여, 사용자가 텍스트 필드에 입력할 때마다 _username 상태 변수를 업데이트합니다. 이렇게 하여 사용자의 최신 입력을 _username 변수에 반영합니다.

2. _onNextTap 함수 실행

• 사용자가 "Next" 버튼(여기서는 FormButton 위젯)을 탭하면 _onNextTap 함수가 호출됩니다.
• _onNextTap 함수 내부에서는 먼저 _username이 비어있는지 확인합니다. 사용자 이름이 비어 있으면 함수 실행을 중단하고, 그렇지 않으면 다음 단계로 진행합니다.

3. Navigator.pushNamed를 사용한 화면 전환

• 사용자 이름이 유효하면 (_username.isEmpty가 false인 경우), Navigator.pushNamed 메서드를 호출하여 EmailScreen으로 화면을 전환합니다.
• 이 메서드는 이름 기반 라우팅을 사용하여 지정된 라우트(EmailScreen.routeName)로 이동합니다. arguments 매개변수를 통해 EmailScreen으로 전달할 데이터를 지정할 수 있습니다. 여기서는 EmailScreenArgs(username: _username) 객체를 생성하여 사용자 이름을 포함한 인자를 전달합니다.

EmailScreenArgs 클래스

• EmailScreenArgs는 EmailScreen으로 전달할 인자를 담는 데이터 클래스입니다. 이 클래스는 EmailScreen의 생성자에서 필요로 하는 인자를 정의합니다. 예제에서는 사용자 이름을 전달하는 데 사용됩니다.

요약

이 과정을 통해, UsernameScreen에서 사용자가 입력한 사용자 이름을 EmailScreen으로 안전하게 전달하며, Flutter 앱 내에서 사용자 입력을 기반으로 한 다이나믹한 화면 전환을 구현할 수 있습니다. 이 방식은 사용자 경험을 향상시키고, 앱의 다양한 화면 간에 필요한 데이터를 효과적으로 전달하는 데 유용합니다.