[flutter] 플러터 Column을 이용한 모션 이펙트 구현하기

20 Dec 2023

flutter

Flutter의 Column 위젯을 사용하여 모션 이펙트를 구현하는 방법에 대해 알아보겠습니다. 이 예제에서는 Column을 사용하여 화면 상에서 위로 스크롤할 때 위젯을 부드럽게 이동시키는 효과를 구현하는 방법을 다루겠습니다.

요구 사항

이 예제를 따라하기 위해서는 다음 사항이 필요합니다.

Flutter SDK가 설치된 환경
텍스트 에디터 또는 IDE

구현

먼저, 앱의 시작 지점인 main.dart 파일을 열고 아래의 코드를 사용하여 Column에 모션 이펙트를 적용해 보겠습니다.

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('모션 이펙트 구현 예제'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: List.generate(
            10,
            (index) => MyAnimatedWidget(index: index),
          ),
        ),
      ),
    );
  }
}

class MyAnimatedWidget extends StatefulWidget {
  final int index;

  const MyAnimatedWidget({Key? key, required this.index}) : super(key: key);

  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  late double _offset;

  @override
  void initState() {
    super.initState();
    _offset = 0.0;
  }

  void _handleScroll() {
    setState(() {
      _offset = 50 * widget.index.toDouble();
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPadding(
      duration: Duration(milliseconds: 300),
      padding: EdgeInsets.only(top: _offset),
      child: Container(
        height: 50,
        color: Colors.blue,
        child: Center(child: Text('위젯 ${widget.index}')),
      ),
    );
  }
}

위 코드에서는 MyHomePage 위젯에서 SingleChildScrollView와 Column을 사용하여 스크롤 가능한 리스트를 생성하고, MyAnimatedWidget 위젯을 통해 위젯을 동적으로 생성합니다. MyAnimatedWidget은 각각의 인덱스에 따라 애니메이션을 적용하여 위로 스크롤할 때 위젯을 부드럽게 이동시키는 효과를 구현하도록 설계되었습니다.

이제 앱을 실행하고 화면을 위로 스크롤하여 모션 이펙트가 적용된 위젯을 확인해 보세요.

마무리

이제 당신은 Flutter의 Column을 사용하여 모션 이펙트를 구현하는 방법을 배웠습니다. 위 예제를 기반으로, 더 다양하고 창의적인 애니메이션 효과를 구현해 보세요.

참고: Flutter 공식 문서