Flutter 앱을 개발하는 도중, FloatingActionButton을 터치할 때 다른 화면으로 전환하는 기능을 구현하고 싶을 때가 있습니다. 이 기능을 구현하는 방법에 대해 알아보겠습니다.

화면 전환 기능 구현

먼저, FloatingActionButton을 터치했을 때 화면을 전환하기 위해 다음과 같이 코드를 작성합니다.

floatingActionButton: FloatingActionButton(
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SecondScreen()),
        );
    },
    child: Icon(Icons.navigation),
    backgroundColor: Colors.green,
),

위 코드에서 onPressed 속성은 플로팅 액션 버튼을 터치했을 때 실행될 함수를 지정합니다. Navigator.push를 사용하여 새로운 화면으로 전환하고, MaterialPageRoute를 통해 새로운 화면을 지정합니다.

두 번째 화면 구현

두 번째 화면인 SecondScreen은 다음과 같이 구현할 수 있습니다.

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),
        ),
      ),
    );
  }
}

위 코드에서 Scaffold 위젯을 사용하여 두 번째 화면을 구성하고, AppBar를 적용하여 화면 상단에 제목을 표시합니다.

이제 FloatingActionButton을 터치했을 때 두 번째 화면으로 전환되는 기능을 구현했습니다.

결론

FloatingActionButton을 사용하여 화면 전환 기능을 구현하는 방법을 살펴보았습니다. 이를 활용하여 사용자 경험을 향상시키고, Flutter 앱의 다양한 기능을 구현할 수 있습니다.

많은 도움이 되시길 바라며, 더 궁금한 점이 있다면 언제든지 질문해주시기 바랍니다.