[flutter] 23강 | Navigator 와 pushName 메소드 이해하기

✅ 이번 시간에는 배운게 많은 시간이었다.

특히나 오타로 슬래시랑 역슬래시 오타로 인해서 한참을 헤매었는데 찬찬히 살펴보도록 하자.

 

또한 파일을 드디어 나누어서 작업했는데 이 부분도 눈여겨볼 부분이다.

파일을 나누면 import를 또다시 해주어야한다.

💡 생각할 점 import가 너무 많으면 관리가 불편하니까 헤더파일 처럼 모을 수 있는 방법이 있는지 알아보기

 

 

✅ 코드 리뷰

 - main.dart

// main.dart 

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키
import 'package:untitled/ScreenA.dart';

import 'ScreenB.dart';
import 'ScreenC.dart'; // 프로젝트 제목을 잡아야 함


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/', // home은 단일 initailRoute는 여러 페이지 근데 그냥 계속 쓰면 될듯
      routes: {
        '/' : (context) => ScreenA(), // 화면이동의 컨텍스트 key : value로 저장
        '/b' : (context) => ScreenB(),
        '/c' : (context) => ScreenC()
      },
    );
  }
}

 - ScreenA.dart

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenA'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {
              Navigator.pushNamed(context, '/b'); // 우리가 route에서 지정해준 키값으로 이동해
            }, child: Text('Go to Screen B')),
            ElevatedButton(onPressed: () {
              Navigator.pushNamed(context, '/c');
            }, child: Text('Go to Screen C')),
          ],
        ),
      ),
    );
  }
}

 - ScreenB.dart

import 'package:flutter/material.dart';

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenB'),
      ),
      body: Center(
        child: Text('ScreenB', style: TextStyle(fontSize: 24.0)),
      ),
    );
  }
}

- ScreenC.dart

import 'package:flutter/material.dart';

class ScreenC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenC'),
      ),
      body: Center(
        child: Text('ScreenC', style: TextStyle(fontSize: 24.0)),
      ),
    );
  }
}

 

결과물