Flutter Router

Flutter에서는 route와 navigation을 통해 페이지를 이동할 수 있다.
Web까지 한 번에 개발할 것이라고 한다면 route를 적극적으로 사용해야 한다.

route를 사용

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class GoToRouteButton extends StatelessWidget {
  const GoToRouteButton(
      {super.key, required this.text, required this.routeName});

  final String text;
  final String routeName;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        child: Text(text),
        onPressed: () {
          Navigator.of(context).pushNamed(routeName);
          debugPrint('Open Route \'$routeName\'');
        },
      ),
    );
  }
}

props = 버튼에 표시할 텍스트를 String 타입의 text를, route의 주소를 String 타입의 routeName를 받아온다.

Navigation 사용

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class GoToNavButton extends StatelessWidget {
  const GoToNavButton(
      {super.key, required this.text, required this.screenWidget});

  /// 버튼에 표시될 텍스트
  final String text;

  /// 이동할 스크린 단위의 위젯
  final dynamic screenWidget;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(30),
      child: ElevatedButton(
        child: Text(text),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => screenWidget));

          debugPrint('Open Navigator.push \'${screenWidget.toString()}\'');
        },
      ),
    );
  }
}

위와 달리 props로 위젯을 받는다.

이후, 적용 방법

네비게이션 방식

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_ex/components/go_to_nav_button.dart';
import 'package:flutter_ex/screen/ex/navigation/nav_show_screen.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Navigation ex'),
      ),
      body: ListView(
        children: const [
          SizedBox(
            height: 10,
          ),
          Center(
            child: Text('Route 기능을 사용하여 현재 페이지에 도착하였습니다.'),
          ),
          GoToNavButton(
              text: 'Navigation 통해 다른 페이지로 이동', screenWidget: NavShowScreen()),
        ],
      ),
    );
  }
}

라우팅 방식

root에서 먼저 설정
import 'package:flutter/material.dart';
import 'package:flutter_ex/screen/ex/navigation/navigation_ex_screen.dart';
import 'package:flutter_ex/screen/main_screen.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter ex",
      initialRoute: '/index',
      routes: {
        '/index': (context) => const Home(),
        '/route_navigation_ex': (context) => const NavigationExScreen(),
      },
      home: const Home(),
    );
  }
}

//실제 버튼 추가
body: ListView(children: const [
        GoToRouteButton(
          text: 'Route & Navigation',
          routeName: '/route_navigation_ex',
        )
      ]),