[Toy] 혈압 기록 노트(3) - 페이지 이동, 복귀

페이지 이동에는 크게 2가지 방법이 있다. 일전에 한번 기록한 적이 있다. 

route에 모든 페이지를 등록 한 후 이동하는 방법과, 그때그때 바로 호출하여 이동하는 방법이 있다. 

즉, 이동 경로를 미리 한곳에 몰아두고 이동하는 방법과, 상황에따라 이동하는 방법이다.

 

여기서는, 상황에따라 바로 이동하는 방식을 사용하였고, 데이터 전달 및 복귀시 결과값 수신을 하였다. 

 

1. 페이지 이동

    - MaterialPageRoute를 이용하여 페이지 전환 애니메이션 효과를 줄 수 있다. 

    - 이동할 페이지의 클래스를 생성함으로서 페이지 이동을 하고, 데이터 전달은 해당 클래스 생성자에 전달한다.

Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) =>
                  ChartForm(originList: _listItems),
            ))
            
            ...
            
            

class ChartForm extends StatefulWidget {
  List<PressureClass> originList = List.empty(growable: true);

  ChartForm({super.key, required this.originList});

  @override
  State<StatefulWidget> createState() {
    return ChartFormState();
  }
}

 

2. 페이지 복귀

     - pop 을 통해 페이지 복귀를 하고, 리턴할 인자값을 넣는다

     - 받는 쪽에서는 push로 호출시 await 을 사용하여, 결과값을 받는다.

...

Navigator.pop(context,PressureClass(time,widget.inputMax,widget.inputMin,createTime)); 

...


resultItem = await Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) =>
                                    AddForm(historyItem: item))),
                                    
...