[flutter] 플러터(Flutter)의 라우팅(Routing)이란 무엇인가요?

04 Dec 2023

flutter

개요

라우팅(Routing)은 앱에서 다른 화면으로 이동하는 것을 의미합니다. 플러터(Flutter)에서는 라우팅을 통해 사용자 인터페이스의 다양한 화면을 관리할 수 있습니다. 라우팅은 앱 내에서 화면 간의 이동을 간단하게 만들고, 사용자에게 일관된 경험을 제공하는 데 도움이 됩니다.

Navigator 클래스

플러터에서는 Navigator 클래스를 사용하여 라우팅을 관리합니다. Navigator 클래스에는 화면을 이동하고 새로운 화면을 추가하는 여러 메서드가 있습니다. 가장 일반적인 메서드는 push()와 pop()입니다.

push() 메서드는 새로운 화면을 스택에 추가하고 해당 화면으로 이동합니다.
pop() 메서드는 현재 화면을 스택에서 제거하고 이전 화면으로 돌아갑니다.

라우팅 예제

다음은 간단한 라우팅 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Routing Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

위의 예제에서는 MaterialApp 위젯의 routes 맵에 경로와 해당 화면을 설정합니다. Navigator.pushNamed(context, '/details')를 통해 DetailsScreen 으로 이동하고, Navigator.pop(context)를 통해 이전 화면으로 돌아갑니다.

정리

플러터(Flutter)에서의 라우팅은 앱에서 다른 화면으로 이동하는 것을 의미합니다. Navigator 클래스를 사용해서 화면을 이동하고, push()와 pop() 메서드를 이용합니다. 이를 통해 사용자 인터페이스를 관리하고 일관된 경험을 제공할 수 있습니다.