[flutter/dart] 페이지 이동 & 데이터 전달

1. 페이지 이동하기

​

페이지를 이동하기 위해서는 이동할 페이지를 미리 만들어 두어야 합니다.

저는 기존에 있던 'first'에서 'datapage'로 이동하기 위해 datapage.dart 파일을 만들어주었습니다.

​
first 화면에서 버튼을 눌렀을 경우에 페이지 이동이 작동하도록 하기 위해

first 화면에 ElevatedButton을 만들어 주었습니다.

ElevatedButton(
    style: ElevatedButton.styleFrom(
    elevation: 0.0,
    backgroundColor: Colors.white,
    ),
    onPressed: () {},
    child: Text("다음 페이지로",style: TextStyle(color: Colors.black,fontSize: 15)),
),

버튼을 작동했을 때 페이지를 이동시키기 위해서는

onPressed: () {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => const datapage()));
},

onPressed 부분에 위의 코드를 사용하여 이동시키면 됩니다.

​

위의 코드로 페이지 이동을 했다가 다시 돌아가는 버튼에는

onPressed: () {
    Navigator.pop(context);
},

간단하게 pop을 시켜주면 바로 전에 있었던 화면으로 돌아가게 됩니다.

첫 번째 화면에서 버튼을 누르면 두 번째 화면으로 이동하게 되고

'뒤로' 버튼을 누르면 다시 첫 번째 화면으로 이동하게 됩니다.

​

2. 다음 페이지로 데이터 옮기기

​

먼저 첫 번째 화면의 버튼 onPressed에 전달할 데이터를 추가해줍니다.

onPressed: () {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => datapage(data: "안녕하세요")));
},

'안녕하세요'라는 문자를 data에 담아서 보내줍니다.

​

그리고 다음 페이지에 받아올 정보를 입력해 주면 됩니다.

class datapage extends StatefulWidget {
  const datapage({super.key, required this.data});

  final String data;

  @override
  State<datapage> createState() => _datapageState();
}

마지막으로 데이터를 표시하고 싶은 곳에 출력해 주시면 됩니다.

Text('${widget.data}'),

실행화면

저는 이 코드를 응용하여 어떤 데이터가 넘어오는지에 따라 출력값이 달라지는 코드도 한번 짜보았습니다.

​

​

first.dart 전체 코드

import 'package:blog/datapage.dart';
import 'package:flutter/material.dart';

class first extends StatelessWidget {
  const first({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            IconButton(
                iconSize: 40,
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context)=>datapage(data: 'mood_bad',)
                      )
                  );
                }, icon: Icon(Icons.mood_bad)),
            IconButton(
                iconSize: 40,
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context)=>datapage(data: 'mood',)
                      )
                  );
                }, icon: Icon(Icons.mood)),
            Container(
              margin: EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: IconButton(
                  iconSize: 40,
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context)=>datapage(data: 'favorite',)
                        )
                    );
                  }, icon: Icon(Icons.favorite)),
            )
          ],
        ),
      ),
    );
  }
}

datapage.dart 전체 코드

import 'package:flutter/material.dart';

class datapage extends StatefulWidget {
  const datapage({super.key, required this.data});

  final String data;

  @override
  State<datapage> createState() => _datapageState();
}

class _datapageState extends State<datapage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("datapage"),
      ),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                //decoration: BoxDecoration(color: Colors.amber),
                child: (() {
                  switch (widget.data) {
                    case 'mood_bad':
                      return Icon(Icons.mood_bad,
                        size: 50,
                      );
                    case 'mood':
                      return Icon(Icons.mood,
                        size: 50,
                      );
                    case 'favorite':
                      return Icon(Icons.favorite,
                        size: 50,
                      );
                  }
                })(),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  elevation: 0.0,
                  backgroundColor: Colors.grey,
                ),
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text("뒤로",style: TextStyle(color: Colors.black,fontSize: 15)),
              ),
            ],
          )
      ),
    );
  }
}