프로그래밍 공부 메모/flutter

Navigator.pushNamed() 다중 화면 전환

jjs815 2022. 5. 29. 22:26

1. initalRoute / routes 속성 값을 꼭 사용 해야함

2. 웹사이트 주소 체계와 유사함 ( map 값으로 표현)

[앱 실행후 route 설정 코드]

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/', //initialRoute ->다중 페이지 이동시 첫번째 페이지가 무엇인지 알려주기 위한 속성값
      routes: {
        // 다중 페이지 이동시 initialRoute, routes 속성을 꼭 사용해야 한다
        // 웹사이트 주소 체계와 유사함
        '/': (context) => ScreenA(), // '/' 웹사이트 접속시 첫번째로 실행되는 index 파일과 같음
        '/b': (context) => ScreenB(),
        '/c': (context) => ScreenC(), 
      },
    );
  }
}

[첫 스크린 코드]

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('screen A'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context,
                      '/b'); //pushNamed -> 각 페이지 붙여진 이름을 통해 push하여 화면 전환을 한다는 의미
                },
                child: Text('Go to Screen B')),
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/c');
                },
                child: Text('Go to Screen C')),
          ],
        ),
      ),
    );
  }
}
반응형