[flutter] 스택드 위젯을 사용하여 페이지 스크롤 구현하기
안녕하세요! Flutter를 사용하여 페이지 스크롤을 구현하는 방법을 알아보겠습니다. 이때 Stacked Widget을 사용해서 페이지의 스크롤을 부드럽게 만들 수 있습니다.
Step 1: Stacked Widget 생성
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ScrollPage(),
);
}
}
class ScrollPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scroll Page'),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
height: 200,
child: Card(
child: Center(child: Text('Item $index')),
),
);
},
),
);
}
}
Step 2: Stacked 위젯을 사용하여 페이지 스크롤 구현
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ScrollPage(),
);
}
}
class ScrollPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stacked Scroll Page'),
),
body: Stack(
children: <Widget>[
ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
height: 200,
child: Card(
child: Center(child: Text('Item $index')),
),
);
},
),
Positioned(
bottom: 10,
right: 10,
child: FloatingActionButton(
onPressed: () {
// Add your action here
},
child: Icon(Icons.add),
),
),
],
),
);
}
}
위 코드를 통해 Stacked Widget을 사용하여 페이지 스크롤을 구현할 수 있습니다. 스크롤뷰의 위에 원하는 위젯을 겹쳐서 표시할 수 있으며, 페이지의 내용과 함께 추가적인 요소를 표시하는 데 유용합니다.
튜토리얼이 도움이 되었기를 바라며, Flutter 개발을 즐기시길 바랍니다!