본문 바로가기

Develop/Flutter

[Flutter] Navigator.pushNamed로 다른페이지에 변수값 넘겨주기

반응형

flutter 기본으로 생성된 페이지가 있다라고 가정하고, 새로운 dart파일을 생성한다음에 제일 기본적인 화면이 띄워지게끔 아래와같이 코드 설정

import 'package:flutter/material.dart';

class SelectedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("New Page"),
      ),
      body: Container(
        color: Colors.white, // Set your desired background color
      ),
    );
  }
}

 

flutter에서 기본으로 생성된 페이지에서는 아래와같이 route 설정과, page navigator를 추가작업 진행 (자세한 코드는 생략을 했습니다)

  • 아래는 기본으로 생성된 페이지에서의 MyApp class부분에 작성 (route부분)
Widget build(BuildContext context) {
	...
    routes: {
        '/selectedPage' : (context) => SelectedPage(),
      },
}
  • 아래는 특정 위젯 클릭시 navigator로 페이지 넘기는 위젯부분. 저는 Inkwell를 사용했습니다.
    • 넘겨주려는 값을 arguments에 세팅합니다.
child: InkWell(
              onTap: () async {
                await Navigator.pushNamed(context, '/selectedPage', arguments: animal);
              },

 

다시 새로생성한 dart파일로 넘어가서 아래와같이 코드를 업데이트 합니다.

  • passed_animal에 해당 값이 저장되어있습니다.
  • 값이 저장될때는 Object data type이기 떄문에 뒤에 toString()함수를 사용해서 문자열로 치환해줍니다
import 'package:flutter/material.dart';

class SelectedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final passed_animal = (ModalRoute.of(context)?.settings.arguments);

    return Scaffold(
      appBar: AppBar(
        title: Text(passed_animal.toString()),
      ),
      body: Container(
        color: Colors.white, // Set your desired background color
      ),
    );
  }
}
반응형