Flutter Routes 사용하기

바다구름·2023년 3월 30일
0

Flutter

목록 보기
18/19

1. Navigator.push 사용

		IconButton(
              onPressed: (){
                Navigator.push(context,
                  MaterialPageRoute(builder: (context) => Upload())
                );
              },
              icon: Icon(Icons.add_box_outlined),
              iconSize: 30,
        ),
  • 아이콘 버튼 클릭시 커스텀 위젯 화면이 덮어 씌어짐.

1-1. 띄운 화면에 또 다른 화면을 띄우고 싶다면?

// 위에서 띄운 커스텀위젯 코드임.

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

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('이미지업로드화면'),
            IconButton(
                onPressed: (){
                  //Navigator.pop(context); 화면 닫는 코드.
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => Upload())
                  );
                },
                icon: Icon(Icons.close)
            ),
          ],
        )
    );
  }
}
  • 이러면 계~속 Upload() 위젯이 쌓임


2. initialRoute 코드 사용하기

void main() {
  runApp(
      MaterialApp(
        theme: style.theme,
        initialRoute: '/', // 앱 로드시 어떤 경로 보여줄지.
        routes: {
          '/' : (c) => Text('첫페이지'),
          '/detail' : (c) => Text('두페이지'),
        },
        //home:  MyApp()
      )
  );
}
  • 각 key의 value값에 커스텀 위젯을 넣어서 페이지를 관리할 수 있다.
  • home은 사용하지말아야함.

2-1. 위젯안에 버튼 클릭시 '/detail' 보여주고 싶다면

  • Navigator.pushNamed(context,'/경로'); 코드 사용.
class Upload extends StatelessWidget {
  const Upload({Key? key}) : super(key: key);
  

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('이미지업로드화면'),
            IconButton(
                onPressed: (){
                  // Navigator.pop(context);
                  //Navigator.push(context, MaterialPageRoute(builder: (context) => Upload()));
                  Navigator.pushNamed(context,'/detail'); // 클릭시 url 이동
                },
                icon: Icon(Icons.close)
            ),
          ],
        )
    );
  }
}
profile
안녕하세요.

0개의 댓글