[flutter] FloatingActionButton을 사용한 네비게이션 기능 구현 방법

11 Dec 2023

flutter

Flutter에서는 FloatingActionButton을 사용하여 화면 전환 및 네비게이션 기능을 구현할 수 있습니다. 이 게시물에서는 FloatingActionButton을 이용하여 다른 화면으로의 간단한 네비게이션을 구현하는 방법을 살펴보겠습니다.

코드 작성

기본 구조 작성

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton 네비게이션'),
      ),
      body: Center(
        child: Text('메인 화면'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: 다른 화면으로 이동하는 기능 작성
        },
        child: Icon(Icons.arrow_forward),
      ),
    );
  }
}

화면 이동 기능 추가

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

floatingActionButton 위젯의 onPressed 콜백 안에 Navigator를 이용하여 새로운 화면으로 이동하는 코드를 작성했습니다. 이때, MaterialPageRoute를 통해 이동할 두 번째 화면을 지정합니다.

결론

이렇게 FloatingActionButton을 사용하여 간단한 네비게이션 기능을 구현할 수 있습니다. 앱을 개발하면서 더 다양한 기능을 추가하고 싶다면, 공식 문서 및 다양한 커뮤니티 자료를 참고하면 좋습니다.

목차

코드 작성

기본 구조 작성

화면 이동 기능 추가

결론

참고 자료