[flutter] FloatingActionButton을 사용하여 스크롤 탑 버튼 구현하기

11 Dec 2023

flutter

안녕하세요! Flutter로 모바일 앱을 개발하는데 필요한 코드를 공유하는 데 도움드립니다. 이번에는 스크롤 탑 버튼을 구현하는 방법에 대해 알아보겠습니다.

1. FloatingActionButton 추가하기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scroll Top Button'),
        ),
        body: MyListView(),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Implement scrolling to the top of the list view
          },
          child: Icon(Icons.arrow_upward),
        ),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}

2. 스크롤 탑 기능 추가

ScrollController _scrollController = new ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(_scrollListener);
}

void _scrollListener() {
  if (_scrollController.offset >= 300) {
    // Show floating action button
  } else {
    // Hide floating action button
  }
}

스크롤 이벤트를 감지하여 리스트 뷰가 일정 이상 스크롤되면 FloatingActionButton을 표시하는 방법입니다.

이제 당신의 Flutter 앱에 스크롤 탑 버튼을 추가할 수 있습니다. 부디 도움이 되길 바라며 이번 포스팅을 마칩니다.

참고 문헌: Flutter 공식 문서

감사합니다.