[flutter] 애니메이션과 리퀴드 스와이프를 이용한 유용한 사용자 동작 예시

18 Dec 2023

flutter

Flutter는 아름다운 사용자 인터페이스를 구축할 수 있는 강력한 기능들을 제공합니다. 여기에는 애니메이션과 리퀴드 스와이프를 활용하여 유용한 사용자 동작을 만들 수 있는 몇 가지 예시를 살펴보겠습니다.

애니메이션을 활용한 위젯 전환

애니메이션을 활용하여 전환 효과를 부여하면 사용자 경험을 향상시킬 수 있습니다. 다음은 간단한 위젯 전환을 애니메이션과 함께 구현하는 예시입니다.

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: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('다음 페이지로 이동'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('다음 페이지')),
      body: Center(
        child: Text('이것은 다음 페이지입니다.'),
      ),
    );
  }
}

이 예시에서는 Navigator를 사용하여 다음 페이지로 이동할 때 애니메이션을 적용했습니다.

리퀴드 스와이프를 이용한 리스트 항목 삭제

리퀴드 스와이프를 활용하면, 리스트 항목을 사용자가 스와이프하여 삭제할 수 있는 기능을 구현할 수 있습니다.

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 StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['항목 1', '항목 2', '항목 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('리퀴드 스와이프 예시')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: Key(items[index]),
            onDismissed: (direction) {
              setState(() {
                items.removeAt(index);
              });
            },
            background: Container(color: Colors.red),
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      ),
    );
  }
}

이 예시에서는 Dismissible 위젯을 사용하여 리스트 항목을 스와이프하여 삭제할 수 있는 기능을 구현했습니다.

이러한 기능들은 사용자 인터페이스를 보다 흥미롭고 유용하게 만들어줍니다. Flutter를 사용하여 이러한 동작을 구현하는 데 도움이 되길 바라며, 계속해서 Flutter에 대해 자세히 배우시기를 권장드립니다.

참고 자료

Flutter 공식 홈페이지: https://flutter.dev
Flutter 위젯 카탈로그: https://flutter.dev/docs/development/ui/widgets
Flutter 애니메이션 가이드: https://flutter.dev/docs/development/ui/animations

목차

애니메이션을 활용한 위젯 전환

리퀴드 스와이프를 이용한 리스트 항목 삭제

참고 자료