본문 바로가기

: IT/Flutter

Navigator.pushNamed와 routes로 페이지 이동

반응형

1. main.dart

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

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

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

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

initialRoute 는 홈 루트 주소를 가르킨다
routes는 Map형식으로 값을 넣는다. <String, WigetBuilder> 형태

2.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: [
              RaisedButton(
                color: Colors.red,
                child:const Text('Go to ScreenB'),
                onPressed: (){
                  Navigator.pushNamed(context, '/b');
                }
              ),
              RaisedButton(
                color: Colors.red,
                child: const Text('Go to ScreenC'),
                onPressed: (){
                  Navigator.pushNamed(context, '/c');
                }
              )
            ],
          )
        )
    );
  }
}

Navigator.pushNamed함수를 이용해서 버튼 클릭하면 /b, '/c 주소로 이동한다

3.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: const Text('ScreenB'),
        ),
        body: const Center(
            child: Text(
                'ScreenB',
                style: TextStyle(
                    fontSize: 24.0
                )
            )
        )
    );
  }
}

ScreenB 텍스트만 표시

4.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: const Text('ScreenC'),
      ),
      body: const Center(
        child: Text(
          'ScreenC',
          style: TextStyle(
            fontSize: 24.0
          )
        )
      )
    );
  }
}

ScreenC 텍스트만 표시

반응형