[flutter] FloatingActionButton을 사용하여 통계 및 분석 기능 구현하기
플러터 앱에 더 많은 기능을 추가하고 싶다면 FloatingActionButton을 활용하여 사용자에게 통계 및 분석 기능을 제공할 수 있습니다.
이 튜토리얼에서는 FloatingActionButton을 만들고, 클릭 이벤트를 처리하여 통계 화면으로 이동하는 기능을 구현하는 방법에 대해 알아보겠습니다.
목차
FloatingActionButton 추가
import 'package:flutter/material.dart';
class StatsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('통계 및 분석'),
),
body: Center(
child: Text('여기에 통계 및 분석 내용이 표시됩니다.'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 클릭 이벤트 처리
},
child: Icon(Icons.insert_chart),
tooltip: '통계 보기',
),
);
}
}
StatsScreen 위젯에서 floatingActionButton 속성을 사용하여 FloatingActionButton을 추가합니다. 클릭 이벤트 처리 및 이벤트 핸들러를 추가하면 됩니다.
클릭 이벤트 처리
floatingActionButton: FloatingActionButton(
onPressed: () {
// 클릭 이벤트 처리
Navigator.push(
context,
MaterialPageRoute(builder: (context) => StatsPage()),
);
},
child: Icon(Icons.insert_chart),
tooltip: '통계 보기',
),
onPressed 콜백을 사용하여 클릭 이벤트를 처리하고, Navigator.push를 사용하여 통계 화면으로 이동합니다.
통계 화면으로 이동
import 'package:flutter/material.dart';
class StatsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('통계'),
),
body: Center(
child: Text('통계 및 분석 화면입니다.'),
),
);
}
}
StatsPage 위젯을 만들어 원하는 통계 및 분석 화면을 구성합니다. Navigator.push를 사용하여 해당 페이지로 이동할 수 있습니다.
이제 FloatingActionButton을 사용하여 사용자에게 통계 및 분석 기능을 제공하는 방법에 대해 알아보았습니다.