[flutter] FlatButton을 사용하여 화면 내비게이션을 구현하는 방법은?

26 Dec 2023

flutter

먼저, 두 번째 화면의 내용을 담고 있는 새로운 위젯을 만듭니다. 이 예제에서는 SecondScreen이라는 StatelessWidget을 생성합니다.

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(
          'This is the second screen',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

다음으로, 첫 번째 화면에 FlatButton을 추가하고, 해당 버튼이 클릭되었을 때 두 번째 화면으로 이동하도록 설정합니다.

import 'package:flutter/material.dart';
import 'second_screen.dart'; // SecondScreen 위젯을 import

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

위의 예제에서는 FlatButton을 이용하여 “Go to Second Screen”이라는 텍스트가 보이는 버튼을 만들었습니다. 버튼이 클릭되면 Navigator 클래스의 push 메서드를 사용하여 새로운 화면으로 이동합니다. MaterialPageRoute 클래스를 사용하여 두 번째 화면으로 이동하도록 설정했습니다.

이제 FirstScreen 위젯을 앱의 홈 화면으로 지정하고 앱을 실행하면, FlatButton을 클릭하면 두 번째 화면으로 이동하는 것을 확인할 수 있습니다.

이것으로 Flutter에서 FlatButton을 사용하여 화면 간의 내비게이션을 구현하는 방법에 대해 알아보았습니다.