Flutter로 무작위 색상 배경 앱 만들기: 애니메이션 효과 추가하기

안녕하세요! 스테디빌더입니다. 😁
 
이번에는 Flutter에서 무작위 색상 배경 앱을 만들어볼 거예요. 터치할 때마다 배경색이 무작위로 변경되고, 애니메이션 효과를 추가해 조금 더 생동감 있는 앱을 만들어보려고 합니다. 이 프로젝트는 애니메이션과 상태 관리를 배우기에 적합한 초보자용 예제입니다.
 

 

 

목차

1. 무작위 색상 배경 앱 개요
2. Flutter에서 색상 변경 구현하기
3. 애니메이션 효과 추가하기
4. Flutter 초보자의 시행착오
5. 다음 단계: 다양한 애니메이션 효과로 발전시키기

 

 

1. 무작위 색상 배경 앱 개요

 
이 앱은 간단한 구조를 가지고 있어요.

• 사용자가 화면을 터치하면 배경색이 무작위로 바뀝니다.
• 색상이 변경될 때 부드러운 전환 애니메이션이 추가됩니다.
• Flutter의 Random 클래스와 AnimatedContainer 위젯을 활용합니다.

 
 

2. Flutter에서 색상 변경 구현하기

실행 가능한 코드: 색상 변경 앱 기본 구조

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

void main() => runApp(RandomColorApp());

class RandomColorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RandomColorScreen(),
    );
  }
}

class RandomColorScreen extends StatefulWidget {
  @override
  _RandomColorScreenState createState() => _RandomColorScreenState();
}

class _RandomColorScreenState extends State<RandomColorScreen> {
  Color _backgroundColor = Colors.white; // 초기 배경색

  void _changeColor() {
    setState(() {
      _backgroundColor = Color.fromARGB(
        255,
        Random().nextInt(256), // Red 값
        Random().nextInt(256), // Green 값
        Random().nextInt(256), // Blue 값
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _changeColor, // 화면 터치 시 색상 변경
      child: Container(
        color: _backgroundColor,
        child: Center(
          child: Text(
            "화면을 터치하세요!",
            style: TextStyle(fontSize: 24, color: Colors.black),
          ),
        ),
      ),
    );
  }
}

이 코드를 실행하면 화면을 터치할 때마다 배경색이 무작위로 바뀝니다.
 

 

728x90

 

 

3. 애니메이션 효과 추가하기

 
배경색이 변경될 때 부드러운 전환 효과를 추가하면 앱이 훨씬 더 세련되어 보입니다. Flutter의 AnimatedContainer 위젯을 사용해 애니메이션 효과를 추가해 봅시다.

실행 가능한 코드: 애니메이션 효과 추가

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

void main() => runApp(AnimatedColorApp());

class AnimatedColorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedColorScreen(),
    );
  }
}

class AnimatedColorScreen extends StatefulWidget {
  @override
  _AnimatedColorScreenState createState() => _AnimatedColorScreenState();
}

class _AnimatedColorScreenState extends State<AnimatedColorScreen> {
  Color _backgroundColor = Colors.white; // 초기 배경색

  void _changeColor() {
    setState(() {
      _backgroundColor = Color.fromARGB(
        255,
        Random().nextInt(256), // Red 값
        Random().nextInt(256), // Green 값
        Random().nextInt(256), // Blue 값
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _changeColor, // 화면 터치 시 색상 변경
      child: AnimatedContainer(
        duration: Duration(seconds: 1), // 애니메이션 지속 시간
        color: _backgroundColor,
        child: Center(
          child: Text(
            "화면을 터치하세요!",
            style: TextStyle(fontSize: 24, color: Colors.black),
          ),
        ),
      ),
    );
  }
}

주요 변경점

1. AnimatedContainer 사용
   • Container 대신 AnimatedContainer를 사용해 애니메이션 효과를 추가했습니다.
2. duration 설정
   • Duration을 이용해 애니메이션 지속 시간을 설정했습니다.

이제 화면을 터치할 때 배경색이 부드럽게 변경됩니다.

 

4. 다음 단계: 다양한 애니메이션 효과로 발전시키기

 
더 많은 애니메이션 효과를 추가해 볼 수도 있겠죠? 여기에선 직접 다루진 않았지만 웹에서 찾아보시면 더 많은 애니메이션 효과를 확인하실 수 있습니다. 😁

• 색상 변경과 함께 크기 변경
  • 컨테이너의 크기를 터치할 때마다 랜덤하게 변경.
• 배경색과 텍스트 색상 동기화
  • 배경색에 따라 텍스트 색상이 자동으로 변경되도록 설정.
• 화려한 전환 애니메이션
  • 여러 색상이 연속적으로 전환되는 애니메이션 추가.

 

 

마무리

 
Flutter에서 애니메이션 효과와 랜덤(무작위) 데이터를 활용해 간단한 앱을 만들어봤어요. 배경색 변경이라는 단순한 기능이지만, 애니메이션 효과를 추가하면서 앱이 훨씬 더 영감을 줄 수 있게 되었네요. 단순하다는 것은 많은 변형이 가능하다는 것이니까요. 😅
혹시 이 앱을 만들며 궁금한 점이 있거나 추가 아이디어가 있다면 댓글로 공유해주세요!
다음에는 더 재미있는 프로젝트로 돌아오겠습니다. 😊