반응형
Screen Naviation | 화면(라우트)간 이동
https://here4you.tistory.com/111?category=787559
라우트(Route)란?
-Flutter 앱에서는 스크린이나 페이지를 라우트라고 부른다.
라우트간에 네비게이션을 하는 방법
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title: "Navigation Basics",
home: FirstRoute(), //FirstRoute를 홈으로 설정
));
}
//첫번째 라우트
class FirstRoute extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('First Route')
),
body: Center(
//RaisedButton을 자식으로 등록
//RaisedButton: 평평한 레이아웃 위에 올라와있는 형태의 버튼
//반대로 평평한 모양을 가지는 FlatButton 도 존재함.
child: RaisedButton(
child: Text('Open second route'),
onPressed: (){ //버튼이 눌렀을 때 처리
//push 함수를 통해 라우트 스택에 새로운 라우트를 적재함
Navigator.push(
context, //기본 파라미터, SecondRoute로 전달
MaterialPageRoute(builder: (context)=>SecondRoute()) //SecondRoute를 생성하여 적재
);
},
),
),
);
}
}
//두번째 라우트
class SecondRoute extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Second Route'),
),
body: Center(
//RaisedButton등록
child: RaisedButton(
child:Text('go back!'),
onPressed: (){
Navigator.pop(context); //현재 라우트를 pop 하여 제거함
},
),
),
);
}
}
반응형
'Flutter & Dart' 카테고리의 다른 글
Flutter - 레이아웃 구성 (0) | 2022.10.22 |
---|---|
[Flutter] 다국어 지원 (0) | 2022.10.22 |
플러터 튜토리얼 앱 (0) | 2022.10.22 |
플러터 커스텀 위젯 추가 (0) | 2022.10.22 |
플러터 스트림 (0) | 2022.10.22 |