[Flutter] 플러터 화면 이동

 GestureDetector로 컴포넌트를 감싼다.

해당 으로 컴포넌트 당 클릭이나 이벤트가 발생할때 동작하는지 보자.

해당으로 하게 되면, 컨테이너를 클릭하면 gd가 프린트 된다.

GestureDetector(
              onTap: (){print('gd');},
              child: Container(
                // autogroupnhff9QD (GhkWyreBLNBRcThyFanhFF)
                width: double.infinity,
                height: 60*fem,
                decoration: BoxDecoration (
                  color: Color(0xffca3c3c),
                ),
                child: Center(

                  child: Text(
                    'Login',
                    style: SafeGoogleFont (
                      'Inter',
                      fontSize: 12*ffem,
                      fontWeight: FontWeight.w400,
                      height: 1.2125*ffem/fem,
                      color: Color(0xff131010),
                    ),
                  ),
                ),
              ),
            )

 

자 그러면 이제 눌렸을때 다음 화면으로 이동해보자

이동은 핵심적으로 2가지만 구현해보자

1. Push 

페이지 스택에 쌓는것이다.

GestureDetector(
  onTap: (){
    Navigator.push(context, MaterialPageRoute(builder: (context) =>  Scene2()),);
    },

back Button 클릭시 아래와 같이 돌아가면 된다.

 GestureDetector(
              onTap: (){Navigator.pop(context);},
            child: Container(

 

 

2. 새로운 페이지 시작

스택을 쌓다가 너무많으면 문제가 발생한다.

따라서 해당 스택을 다시 시작할 수 있다.

 

Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
Navigator.push(context, MaterialPageRoute(builder: (context) => Scene2()),);

 

 

3.라우터 등록

실무에서 가장 많이 쓰이지 않을까 싶다.

라우터로 리스트를 정리하고, 해당 페이지로 이동하는 것이다.

 

  return MaterialApp(
      routes: {
        '/first':(context) => Scene(),
        '/second':(context) => Scene2()
      },

      GestureDetector(
              onTap: (){
                Navigator.pushNamed(context, '/second');
                },

 

사실 이건 이동에 가까워서 이동할때 모습이 맘에 안들면

Push, pop과 섞어서 쓰면 좋을 듯하다.

 

무튼 이렇게 3가지인데, 사용은 거의 2가지만 할것같다.