Flutter 화면 전환(복수 파일 이용)
02 Jun 2020 | FlutterFlutter에서의 화면 전환 예제를 여러 개의 파일로 나누어서 호출하도록 변경했습니다.
다른 파일을 가져올 때 다음과 같이 두 가지 방식으로 import 할 수 있습니다.
import 'first_screen_widget.dart'; import 'package:snowdeer_hello_flutter/second_screen_widget.dart';
main.dart
import 'package:flutter/material.dart';
import 'first_screen_widget.dart';
void main() => runApp(SnowDeerApp());
class SnowDeerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SnowDeer App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.deepPurple,
),
home: FirstScreenWidget(),
);
}
}
first_screen_widget.dart
import 'package:flutter/material.dart';
import 'package:snowdeer_hello_flutter/second_screen_widget.dart';
class FirstScreenWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.amber,
child: Center(
child: RaisedButton(
child: Text('Move to Second Screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreenWidget()),
);
},
))),
);
}
}
second_screen_widget.dart
import 'package:flutter/material.dart';
class SecondScreenWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.green,
child: Center(
child: RaisedButton(
child: Text('Back to First Screen'),
onPressed: () {
Navigator.pop(context);
},
))),
);
}
}