Flutter - Page 이동하기 (Navigator.push, Navigator.pushNamed) [7]

1.Navigator.push

 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('MainPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: Center(
          child: RaisedButton(
            child: Text('SubPage로 이동'),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SubPage()),
              );
            },
          ),
        )
    );
  }
}

class SubPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('SubPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: Center(
          child: RaisedButton(
            child: Text('MainPage로 이동'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        )
    );
  }
}

MainPage

​ : 버튼을 누르면 서브페이지로 이동한다.

​ Navigator.push: Navigator에서 관리되는 route 스택에 추가한다.

​ - MaterialPageRoute: route이동시 플랫폼에 특화된 애니메이션을 사용하기 좋다.

SubPage

​ : 버튼을 누르면 메인페이지로 돌아간다.

​ Navigator.pop: 현재 Route스택을 제거 한다. (즉, 이전페이지로 돌아간다.)

 

 

 

 

2.Navigator.pushpushNamed

 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      initialRoute: '/',
      routes: {
        // "/" route로 이동하면, Mainpage 위젯을 생성합니다.
        '/': (context) => MainPage(),
        // "/subpage" route로 이동하면, SubPage 위젯을 생성합니다.
        '/subpage': (context) => SubPage(),
      },
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('MainPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: Center(
          child: RaisedButton(
            child: Text('SubPage로 이동'),
            onPressed: () {
              Navigator.pushNamed(context, '/subpage');
            },
          ),
        )
    );
  }
}

class SubPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.menu),
          title: Text('SubPage'),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: Center(
          child: RaisedButton(
            child: Text('MainPage로 이동'),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        )
    );
  }
}

MyApp

​ : 앱을 정의하고 routes를 정의한다.

​ initialRoute: 앱의 시작점을 나타낸다.

​ routes: route할 이름과 Widget을 정의한다.

MainPage

​ : 버튼을 누르면 서브페이지로 이동한다.

​ Navigator.pushNamed: Navigator에서 관리되는 route 스택에 추가한다. (앞에서 정의한 routes 에서 찾아서 Widget을 생성함)

SubPage

​ : 버튼을 누르면 메인페이지로 돌아간다.

​ Navigator.pop: 현재 Route스택을 제거 한다. (즉, 이전페이지로 돌아간다.)