(코딩쉐프) 23강 Navigator2 , route

route는 하나의 페이지라고 생각하면 된다.

이번에는 다른 파일의 페이지를 여는 방식을 살펴볼 것이다. Navigator1에서 다룬 내용은 싱글 페이지에서 페이지 연결하는 방식? 이라 생각됨(아직은 잘 몰라서 ..)

MaterialApp에서 home을 사용하는게 아니라 initialRoute와 routes를 이용해서 페이지 구조를 연결함

Navigator의 pushNamed를 사용

즉, home과는 다른 방식

4개의 파일 구조는 아래와 같다.

 

main. dart

import 'package:flutter/material.dart';
import 'package:flutter_1229/ScreenA.dart';
import 'package:flutter_1229/ScreenB.dart';
import 'package:flutter_1229/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(),
      },
    );
  }
}

 

 

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(
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                onPressed: () {
                  Navigator.pushNamed(context, '/b');
                },
                child: Text('Go to ScreenB')),
            ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                onPressed: () {
                  Navigator.pushNamed(context, '/c');
                },
                child: Text('Go to ScreenC'))
          ],
        ),
      ),
    );
  }
}

 

ScreenB.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',
            style: TextStyle(fontSize: 24),
          ),
        ));
  }
}

 

ScreenC.dart

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',
            style: TextStyle(fontSize: 24),
          ),
        ));
  }
}