import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("로그인페이지"),
),
body: ElevatedButton(
onPressed: () {},
child: Text("로그인"),
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HOME"),
),
body: ElevatedButton(
onPressed: () {},
child: Text("돌아가기"),
),
);
}
}
해당 페이지에서 로그인 버튼을 누르면
HOME이라고 적힌 페이지로 이동하는 기능을 구현해보겠습니다.
이동 방법 구현 전에 ….
구현 전에 버튼의 위치를 화면 가운데에 위치하도록 변경하겠습니다.
ElevatedButton 을 Align 위젯으로 감싸고,
Align위젯의 속성을 이용하여 위치를 옮길 수 있습니다.
※ Align 위젯의 alignment 속성을 통해
alignment: Alignment(0, 0) 로그인 버튼이 가운데로 위치함이동 방법
이제 페이지 이동을 구현하겠습니다.
먼저 라우터를 구현한 다음,
Navigator 사용 를 사용하면 됩니다.
라우터는 제일 메인이 되는 위젯에서 설정합니다.
메인 위젯에 라우터를 설정한 코드입니다.
라우터
UI 흐름 컨트롤러로 생각했습니다.
버튼에서 구현
버튼의 onPressed에 Navigator를 사용하고,
네비게이터에서 다음 페이지로 넘어가는 PUSH 기능을 사용해야 합니다.
사용한 코드
Navigator.pushNamed(context, "/home");Push 구현된 모습
로그인 페이지에서 HOME 페이지로 넘어가면 appbar 에 히스토리백 버튼이 자동으로 구현되어있다.
Home에서 로그인 페이지로 되돌아가기 구현
되돌아가기 버튼을 누르면
이전 페이지로 POP 되는 것을 구현하겠습니다.
PUSH와 마찬가지로 네비게이터를 이용하면 되겠습니다.
되돌아 오는 것까지 구현했습니다.
Share article
