그냥 호기심😋

여러 가지 위젯에 대해 공부를 하던 중, AnimatedContainer를 학습하게 되었다. 터치하면 이미지의 사이즈가 랜덤으로 변하도록 하는 예제였다. 이미지 말고도 다른 위젯들도 해보던 중, 갑자기 '터치할 때마다 색깔도 같이 변하면 더 볼만 하겠는데?' 생각이 들어 찾아보게 되었다.

3가지 방법🎨

랜덤으로 색상을 생성하는 방법엔 총 세 가지 방법이 있다. 글을 보고 마음에 드는 방법을 사용해보자.

1. Colors.primaries 와 Random class

Colors 클래스는 18개의 견본 머터리얼 디자인 색상 팔레트를 제공한다.
Random 클래스에는 0부터 지정된 최대값까지 범위에서 임의의 정수를 생성할 수 있는 nextInt라는 메서드 이름이 함께 제공된다.

랜덤한 색상을 다음과 같이 생성할 수 있다.

Color _randomColor = Colors.primaries[Random().nextInt(Colors.primaries.length)];

만약 더욱 랜덤성을 주고 싶으면 다음과 같이 작성한다.

Color _randomColor = Colors.primaries[Random().nextInt(Colors.primaries.length)]
	[Random.nextInt(9) * 100];

📌반드시 ‘package:flutter/material.dart’ 와 ‘dart:math’. 를 import 해줘야 한다.

전체 코드

import 'package:flutter/material.dart';
import 'dart:math';
(중략)

class _MyHomePageState extends State<MyHomePage> {
  var _size = 100.0;
  final _random = Random();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            final random = Random();
            setState(() {
              _size = random.nextInt(200).toDouble() + 100;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _size,
            height: _size,
            child: Container(
              color: Colors.primaries[_random.nextInt(Colors.primaries.length)]
                  [_random.nextInt(9) * 100],
            ),
            curve: Curves.linearToEaseOut,
          ),
        ),
      ),
    );

2. Color class 와 Random class

Colors 클래스는 아름답고 표준적인 컬러를 제공하지만, 컬러의 수가 많지 않다는 점이 있다.
Color 클래스를 사용하면 다음과 같은 수백만 개의 랜덤 색상을 생성할 수 있다.

// 생략
child: Container(
  color: Color.fromARGB(
    _random.nextInt(256), 
    _random.nextInt(256), 
    _random.nextInt(256), 
    _random.nextInt(256),
    ),
),

3. third-party package

랜덤 색상을 생성하는 데 플러그인을 사용할 필요까진 없을 것이다. 하지만 플러그인 만의 장점이 있다.
예를 들어 random-color 패키지는 랜덤으로 생성되는 색상의 범위나 스타일을 지정하여 해당하는 조건에 맞는 색상만 얻을 수 있다.

설치

dependencies:
  random_color: ^1.0.5

간단한 예제

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(colorHue: ColorHue.red);

위 코드는 붉은 계열의 색상만 반환한다.

마치며

오늘은 랜덤으로 색상을 생성하는 방법에 대해 알아보았다. 실제 개발을 하며 사용할 일은 그렇게 많지는 않겠지만 다양한 해결 방법을 알 수 있는 좋은 경험이었다.

개인적으론 조금 귀찮아도 random-color 패키지를 받아 사용하는게 좋을 것 같다.🥴