Flutter Navigator와 pushName 메소드 알아보기

Flutter Navigator와 pushName 메소드 알아보기

 

특히 오타로 인한 슬래시(/)와 역슬래시(\) 문제 때문에 한참 헤맸던 경험이 있음.

그리고 파일을 나눠서 작업하면서 import 관리의 중요성도 느낄 수 있었음.

 

생각할 점: import가 너무 많으면 관리가 불편하다.

→ C/C++처럼 헤더 파일처럼 한 곳에서 모아서 관리할 수 있는 방법을 찾아보면 좋음.

코드 샘플

 

• 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)),
      ),
    );
  }
}

 

결과물