[flutter] Navigator를 사용하여 화면 이동

 

 

 

안녕하세요, 

 

오늘은 Navigator를 사용하여 화면을 이동하는 예제를 만들어 보겠습니다. 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(), // 첫 번째 화면을 기본으로 설정
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('첫 번째 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 버튼 클릭 시 두 번째 화면으로 이동
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('두 번째 화면으로 이동'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 버튼 클릭 시 첫 번째 화면으로 돌아가기
            Navigator.pop(context);
          },
          child: Text('첫 번째 화면으로 돌아가기'),
        ),
      ),
    );
  }
}

 

시연 영상 입니다.