[Flutter] 17. 다중 페이지 이동 실습

 

 

 

 

🙆‍♂️ 다중 페이지 이동

---

먼저 코드들을 확인해보겠습니다.

🪐main.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/ScreenA.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScreenA(),
    );
  }
}

 

 

🪐ScreenA.dart

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {
  const ScreenA({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScreenA"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                child: Text("Go to ScreenB"),
                onPressed: (){},
                style: ElevatedButton.styleFrom(
                  primary: Colors.red
                ),
              ),
              ElevatedButton(
                child: Text("Go to ScreenC"),
                onPressed: (){},
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue
                ),
              ),
            ]
          ),
        ),
      );
  }
}

 

 

🪐ScreenB.dart와 ScreenC.dart

import 'package:flutter/material.dart';

class ScreenB extends StatelessWidget {
  const ScreenB({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScreenB"),
      ),
      body: Center(
        child: Text("ScreenB")
      ),
    );
  }
}

import 'package:flutter/material.dart';

class ScreenC extends StatelessWidget {
  const ScreenC({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScreenC"),
      ),
      body: Center(
        child: Text("ScreenC")
      ),
    );
  }
}

 

 

다중 페이지 이동 기능을 구현하기 위해서는 Push를 적절히 잘 해야합니다.

 

 

🚀initialRoute

---

initialRoute는 다중 페이지 이동을 할 때 화면에 제일 먼저 출력되는 화면으로 home 속성과 비슷합니다.

initialRoute와 home 속성이 같이 있다면 오류가 납니다. 그래서 home 대신에 initialRoute를 사용합니다.

 

 

 

🚀routes

---

routes 속성은 이동할 페이지들의 이름을 지정하고 생성하는 역할을 합니다.

 

MaterialApp(
      initialRoute: '/',
      routes: {
        '/' : (context) => ScreenA(),
      },
);

그래서 맨 위의 main.dart 코드에서 home: ScreenA() 대신 위의 코드처럼 짜서 진행할 수 있습니다.

 

🪐최종 main.dart 코드

import 'package:flutter/material.dart';
import 'package:flutter_application_1/ScreenA.dart';
import 'package:flutter_application_1/ScreenB.dart';
import 'package:flutter_application_1/ScreenC.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/' : (context) => ScreenA(),
        '/b' : (context) => ScreenB(),
        '/c' : (context) => ScreenC()
      },
    );
  }
}

이렇게 initialRoute와 routes를 구현했습니다.

 

🪐업데이트된 ScreenA.dart 코드 부분

ElevatedButton(
                child: Text("Go to ScreenB"),
                onPressed: (){
                  Navigator.pushNamed(context, '/b');
                },
                style: ElevatedButton.styleFrom(
                  primary: Colors.red
                ),
              ),
              ElevatedButton(
                child: Text("Go to ScreenC"),
                onPressed: (){
                  Navigator.pushNamed(context, '/c');
                },
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue
                ),
              ),

onPressed 부분에 Navigator.pushNamed 함수를 사용했습니다.

Navigator.push 보다 사용법이 엄청 간단합니다!