[Flutter] 화면 이동과 pushName의 종류

7. 화면 이동과 pushName의 종류

하세연

Oct 02, 2024

Contents

1. 화면 구성과 이해 3. 홈 화면으로 이동

1. 화면 구성과 이해

왼쪽의 로그인 화면과 오른쪽의 홈 화면을 구성할 예정이다.

html에서의 <input type=”text”> 와 같은 역할을 하는 텍스트 상자 두 개와 로그인을 누르면 홈으로 넘어가는 로직이 필요할 것이다.


import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/login",
      routes: {
        "/login": (context) => LoginPage(),
        "/home": (context) => HomePage(),
      },
    );
  }
}

해당 화면으로 넘어가기 위해 url이 필요하기 때문에 각각의 주소를 “/login”, “/home”으로 설정할 때 위와 같이 설정을 해주면 로그인 페이지와 홈 페이지로 화면이 설정된다.

여기서 initialRoute : “/login” 의 역할은 처음 프로그램을 실행시켰을 때 초기에 뜨는 화면을 설정해주는 것이다.

💡

(참고) Hot Reload 기능은 Scaffold 안에서 수정했을 경우에만 가능하고, initialRoute와 같이 바깥 공간에서 작업을 하게 되면 서버를 정지했다가 다시 실행시켜야만 적용이 가능하다.

2. 로그인 화면


// LoginPage
class LoginPage extends StatelessWidget {
  final username = TextEditingController();
  final password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            height: 500,
            color: Colors.yellow,
          ),
          TextFormField(
            controller: username,
            decoration: InputDecoration(
              hintText: "Username",
              prefixIcon: Icon(Icons.person),
            ),
          ),
          TextFormField(
            controller: password,
            obscureText: true,
            decoration: InputDecoration(
              hintText: "Password",
              prefixIcon: Icon(Icons.password),
            ),
          ),
          ElevatedButton(
              onPressed: () {
                // 1. 값 가져오기
                String un = username.text;
                String pw = password.text;
                print(un);
                print(pw);
                // 2. 통신하기

                // 3. 화면 이동 (A->B)
                // [A,B] pushName 둘 다 스택에 쌓이면서 화면이 생기는 것
                // [B] pushReplaceName 전 화면만 날리고 대신 들어가는것
                // [B] pushNamedAndRemoveUntil 이전 화면은 다 날림
                Navigator.pushNamed(context, "/home");
              },
              child: Text("로그인")),
        ],
      ),
    );
  }
}

1) TextFormField

여기서 input 타입 text의 역할을 하는 것이 바로 TextFormField 이다.

placehold 의 역할은 decoration의 InputDecoration에서 hintText 가 하고, prefixIcon 을 설정해주면 해당 칸의 처음에 아이콘이 생성된다.

2) TextEditingController();

final username = TextEditingController(); 변수와 TextFormField 에서 이를 controller : username 으로 설정해주면 해당 칸에서 입력하는 텍스트를 매핑해준다.

3) String ex = 변수.text;

String un = username.text; String pw = password.text; 를 사용하면 Controller에서 설정해준 텍스트 데이터를 가져온다. 나중에 서버 통신을 이용해 데이터를 읽고 로그인을 하는 로직을 구현하면 된다.

3. 홈 화면으로 이동

화면 이동을 할 때에는 새로운 화면을 가지고 오면서 스택에 쌓아 나가는데 이를 저장하거나 날리는 방식으로 3가지가 있다.

예시로 로그인 A 화면과 로그인 이후 메인 페이지로 이동하는 B 화면이 있을 때이다.

1) A → B → A : pushNamed

로그인에서 메인 페이지로 그리고 뒤로 가기를 통해 다시 로그인 화면을 이동할 때, 화면 데이터를 전부 스택에 저장해 나가는 방식이다.

Navigator.pushNamed(context, "/login");

2) A → A : pushReplacementNamed

로그인 하고 메인 페이지로 넘어 갔다가 다시 로그인 화면으로 돌아가면, 이전 페이지를 날리고 그 자리에 대신해서 들어가는 방식이다.

Navigator.pushReplacementNamed(context, "/login");

3-1) A : pushNamedAndRemoveUntil

로그인하고 메인 페이지에서 다시 뒤로 가기를 눌렀을 때, 이전의 화면 데이터들을 전부 날리고 마지막 페이지의 데이터만 스택에 남게 하는 방식이다.

Navigator.pushNamedAndRemoveUntil(context, "/login", (route)=>true);

이 방식은 로그인을 했던 기록이 남아있지 않는 화면 reloading 방식이다.

3-2) A : pop

위와 같이 이전 화면들의 데이터를 전부 날리고 새로운 화면의 스택을 쌓는 방식은 똑같지만,

로그인 기록이 남는 history back 방식이다.

Navigator.pop(context);

이 방식은 화면 이동을 하는 특정 상황에서 appBar를 생성하면 자동으로 leading 자리에 pop 특성을 가지는 뒤로 가기 버튼이 생긴다.

텍스트 부분을 바인딩 해주는 역할

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, initialRoute: "/login", routes: { "/login": (context) => LoginPage(), "/home": (context) => HomePage(), }, ); } }

// LoginPage class LoginPage extends StatelessWidget { final username = TextEditingController(); final password = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( body: ListView( children: [ Container( height: 500, color: Colors.yellow, ), TextFormField( controller: username, decoration: InputDecoration( hintText: "Username", prefixIcon: Icon(Icons.person), ), ), TextFormField( controller: password, obscureText: true, decoration: InputDecoration( hintText: "Password", prefixIcon: Icon(Icons.password), ), ), ElevatedButton( onPressed: () { // 1. 값 가져오기 String un = username.text; String pw = password.text; print(un); print(pw); // 2. 통신하기 // 3. 화면 이동 (A->B) // [A,B] pushName 둘 다 스택에 쌓이면서 화면이 생기는 것 // [B] pushReplaceName 전 화면만 날리고 대신 들어가는것 // [B] pushNamedAndRemoveUntil 이전 화면은 다 날림 Navigator.pushNamed(context, "/home"); }, child: Text("로그인")), ], ), ); } }