[flutter] cupertino_icons를 사용하여 아이콘에 화면 전환 효과 추가하기

30 Nov 2023

flutter

앱 개발을 할 때, 화면 전환 효과는 중요한 요소 중 하나입니다. 사용자가 버튼을 누르면 다른 화면으로 자연스럽게 전환될 수 있도록 하는 것이 사용자 경험을 향상시키는 열쇠입니다.

Flutter에서는 다양한 아이콘을 제공하는 cupertino_icons 패키지를 사용할 수 있습니다. 이 패키지를 통해 아이콘에 화면 전환 효과를 추가하는 방법을 알아보겠습니다.

1. 패키지 추가하기

먼저, cupertino_icons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 항목에 다음 라인을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.1

저장한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치하세요.

2. 아이콘에 화면 전환 효과 추가하기

먼저, 화면 전환될 대상 화면을 생성해야 합니다. 이 예시에서는 새로운 페이지로 전환될 SecondPage 클래스를 생성하겠습니다.

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

이제 FlatButton 위젯을 생성하여 아이콘을 추가하고, 화면 전환 효과를 부여하겠습니다.

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: FlatButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(),
              ),
            );
          },
          child: Icon(
            CupertinoIcons.arrow_right_circle_fill,
            size: 50.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

여기서 FlatButton의 onPressed 속성에 있는 코드가 화면 전환을 담당하는 부분입니다. Navigator.push 함수를 사용하여 SecondPage 클래스로 전환하도록 하였습니다.

이제 앱을 실행하고 홈 페이지에서 아이콘을 누르면, 새로운 페이지로 자연스럽게 전환되는 것을 확인할 수 있습니다.

참고: 위 예시는 일반적인 상황을 기반으로 작성되었습니다. 여러 가지 추가 설정이 필요한 경우, 공식 문서나 기타 자료를 참고해주세요.

결론

cupertino_icons 패키지를 사용하여 Flutter 앱에서 아이콘에 화면 전환 효과를 추가하는 방법을 살펴보았습니다. 이를 통해 사용자 경험을 향상시키고, 앱을 더욱 직관적이고 사용자 친화적으로 만들 수 있습니다.