[Flutter] 플러터에서 화면이동 하기!

데이터 청년 캠퍼스에서 하는 프로젝트에서 페이지간 이동이 너무 많아서
페이지끼리 자연스럽게 이동하는 것 처럼 보이는 경로를 지정하는데도 개발하는 내내 고민이 되었다🥹

 

Navigator.push 활용

플러터에서 다양한 페이지 전환 방법이 있는 것으로 알고 있는데, 우선 가장 쉽게 사용할 수 있었던 방법을 먼저 정리해보고자 한다.

Navigator.push	원하는 페이지로 이동하는 것
Navigator.pop	이전 화면으로 되돌아오는 것

 

 Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const HomePage(),
            ),

 

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class HomePageState extends State<HomePage> { ... }

 

이 코드를 버튼과 같은 곳에 넣어주면, 버튼을 클릭했을 때 HomePage로 이동하게 되는 것이다.

여기서 HomePage는 class 이름을 말하고, HomePage class가 들어있는 dart파일을 import해주면 끝이다. 

이동하려고 하는 파일만 import하는 것만 잊지 않으면 된다. 

 

 Navigator.pop(context);

Navigator.pop은 바로 이전의 페이지를 띄우는 것이기 때문에 코드가 더 간단하다. 

 

named Routes 활용 

MaterialApp 부분에서 routes를 이용할 수 있다.

MaterialApp(
      home: const HomePage(),
      routes: {
        '/home': (context) => const HomeScreen(),
        '/diagnosis': (context) => const DiagnosisScreen(),
        '/profile': (context) => const LoginPage(),
      },
    );

이렇게 미리 명명해두면

  Navigator.pushNamed(context, '/home');

더 간단하게 코드를 작성할 수 있다.

 

위의 내용은 자주 쓰이니까 잘 숙지하도록 해야겠다.

이렇게 간단한 페이지 이동 말고도 데이터를 받아 그 값을 전달하는 화면 이동에 대해서도 공부해야 한다.