[ FLUTTER ] ScrollToTop 구현 예제

 

---

목차

1. 프로젝트 생성 및 리스트뷰 생성
2. 애니메이션 구현
3. 스크롤 이동 (완성)

---

 

1. 프로젝트 생성 및 리스트뷰 생성

* 소스코드 import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Example',       debugShowCheckedModeBanner: false,       theme: ThemeData(primarySwatch: Colors.blue),       home: const MyHomePage(),     );   } } class MyHomePage extends StatefulWidget {   const MyHomePage({     Key? key,   }) : super(key: key);   @override   State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('Scroll To Top Example')),       body: Center(         child: ListView(           children: <Widget>[             for (int i = 0; i < 20; i++)               Container(                 width: 200, height: 200,                 color: Colors.red[((i % 4) + 1) * 100],               ),           ],         ),       ),       floatingActionButton: FloatingActionButton(         onPressed: () {},         child: const Icon(Icons.arrow_upward_rounded),       ),     );   } }

* 실행화면

 

---

2. 애니메이션 구현

* 소스코드 import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Example',       debugShowCheckedModeBanner: false,       theme: ThemeData(primarySwatch: Colors.blue),       home: const MyHomePage(),     );   } } class MyHomePage extends StatefulWidget {   const MyHomePage({     Key? key,   }) : super(key: key);   @override   State<MyHomePage> createState() => _MyHomePageState(); }    class _MyHomePageState extends State<MyHomePage> {   final ScrollController scrollController = ScrollController();   double _opacity = 0.0;   @override   void initState() {     // Scroll Event     scrollController.addListener(() {       scrollListener();     });     super.initState();   }   @override   void dispose() {     scrollController.dispose();     super.dispose();   }   // Scroll Method   scrollListener() async {     if (scrollController.offset > 0) {       // Show Button       setState(() {         if (_opacity != 1.0) _opacity = 1.0;       });     } else {       // Hide Button       setState(() {         if (_opacity != 0.0) _opacity = 0.0;       });     }   }   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('Scroll To Top Example')),       body: Center(         child: ListView(           // Link           controller: scrollController,           children: <Widget>[             for (int i = 0; i < 20; i++)               Container(                 width: 200, height: 200,                 color: Colors.red[((i % 4) + 1) * 100],               ),           ],         ),       ),       floatingActionButton: AnimatedOpacity(         duration: const Duration(milliseconds: 700),         curve: Curves.easeIn,         // View         opacity: _opacity,         child: FloatingActionButton(           onPressed: () {},           child: const Icon(Icons.arrow_upward_rounded),         ),       ),     );   } }

* 실행화면

---

 

3. 스크롤 이동 (완성)

* 소스코드 import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({Key? key}) : super(key: key);   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Example',       debugShowCheckedModeBanner: false,       theme: ThemeData(primarySwatch: Colors.blue),       home: const MyHomePage(),     );   } } class MyHomePage extends StatefulWidget {   const MyHomePage({     Key? key,   }) : super(key: key);   @override   State<MyHomePage> createState() => _MyHomePageState(); }    class _MyHomePageState extends State<MyHomePage> {   final ScrollController scrollController = ScrollController();   double _opacity = 0.0;   @override   void initState() {     // Scroll Event     scrollController.addListener(() {       scrollListener();     });     super.initState();   }   @override   void dispose() {     scrollController.dispose();     super.dispose();   }   // Scroll Method   scrollListener() async {     if (scrollController.offset > 0) {       // Show Button       setState(() {         if (_opacity != 1.0) _opacity = 1.0;       });     } else {       // Hide Button       setState(() {         if (_opacity != 0.0) _opacity = 0.0;       });     }   }   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: const Text('Scroll To Top Example')),       body: Center(         child: ListView(           // Link           controller: scrollController,           children: <Widget>[             for (int i = 0; i < 20; i++)               Container(                 width: 200, height: 200,                 color: Colors.red[((i % 4) + 1) * 100],               ),           ],         ),       ),       floatingActionButton: AnimatedOpacity(         duration: const Duration(milliseconds: 700),         curve: Curves.easeIn,         // View         opacity: _opacity,         child: FloatingActionButton( !@#    onPressed: () {             setState(() {                     scrollController.animateTo(                 0,                 duration: const Duration(milliseconds: 500),                 curve: Curves.easeIn,               );             });           },           child: const Icon(Icons.arrow_upward_rounded),         ),       ),     );   } }

* 실행화면