Named Routing을 사용한 라우팅(화면전환) 방법 (Flutter)

Name Routing

Name Routing은 web과 같이, 경로를 이용하여 라우팅 될 위젯(widget)을 정의하는 routing 방법입니다. 예시를 들면 아래와 같습니다.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

 

실제로 간단하게 구현을 해보겠습니다. 우선 flutter 프로젝트를 만들고, HomeScreen과 SettingScreen 2개의 스크린 위젯을 생성하겠습니다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Text("Home"),
      ),
    );
  }
}


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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Text("Setting"),
      ),
    );
  }
}

 

이후 main.dart에서 MaterialApp > routes 속성에, / 일때와 /setting 일때 각각 어디로 라우팅 될지 정의합니다.

• /: HomeScreen 위젯으로 라우팅
• /setting: SettingScreen 위젯으로 라우팅

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...생략
      routes: {
        "/": (context) => const HomeScreen(),
        "/setting": (context) => const SettingScreen()
      },
    );
  }
}

 

라우팅을 모두 정의했으니 실제로 해당 경로로 이동했을때, 정의한대로 올바른 위젯이 화면에 나타나는지 확인해봅시다. Navigation을 할때는 아래와 같이 사용합니다.

• Navigator.pushNamed(context, <라우팅 경로>);

 

HomeScreen과 SettingScreen의 코드를 아래와 같이 수정합니다. 그리고, 에뮬레이터로 실행하여 버튼을 클릭했을때 올바르게 라우팅이 되는지 확인해봅시다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text("HomeScreen"),
              ElevatedButton(
                child: const Text("Go Setting Screen"),
                onPressed: () {
                  Navigator.pushNamed(context, "/setting");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text("SettingScreen"),
              ElevatedButton(
                child: const Text("Go Home Screen"),
                onPressed: () {
                  Navigator.pushNamed(context, "/");
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

라우팅이 올바르게 되는지 확인

 

Reference

Navigation and routing