플러터에서 ImageShader 위젯 사용법과 다양한 옵션 가이드

 

Flutter의 ImageShader는 강력한 도구로, 이미지를 패턴으로 사용하여 다양한 시각적 효과를 만들 수 있습니다.

ImageShader를 활용하면 이미지를 그라디언트처럼 활용하거나, 디자인에 독특한 시각적 요소를 추가할 수 있습니다.

이 포스트에서는 ImageShader 위젯의 기본 사용법과 주요 옵션을 상세히 설명하고, 실습 예제를 통해 이해를 돕겠습니다.

1. ImageShader 위젯이란?

ImageShader는 이미지를 텍스처로 사용하여 패턴을 생성하거나, 그라디언트와 비슷한 효과를 주는 데 사용됩니다.

이 위젯은 Shader의 일종으로, 이미지의 픽셀 데이터를 사용하여 다양한 시각적 효과를 만들 수 있습니다.

주요 특징

• 이미지 기반 텍스처: 이미지를 텍스처로 사용하여 다양한 디자인 패턴을 생성할 수 있습니다.
• 패턴 반복: 이미지가 컨테이너의 크기에 맞게 반복될 수 있습니다.
• 스케일 조정: 이미지의 스케일을 조정하여 다양한 크기의 패턴을 만들 수 있습니다.

2. ImageShader 기본 사용법

ImageShader를 사용하려면, ShaderMask와 같은 위젯을 통해 이미지를 텍스처로 사용하는 것이 일반적입니다.

다음은 ImageShader를 사용하는 기본 예제입니다

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ImageShader 예제'),
        ),
        body: Center(
          child: FutureBuilder<ui.Image>(
            future: _loadImage('assets/sample_image.jpg'),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return ShaderMask(
                  shaderCallback: (bounds) {
                    return ui.ImageShader(
                      snapshot.data!,
                      ui.TileMode.repeated,
                      ui.TileMode.repeated,
                      Matrix4.identity().scaled(0.5).storage,
                    );
                  },
                  child: Container(
                    width: 300,
                    height: 300,
                    color: Colors.transparent,
                    child: Center(
                      child: Text(
                        'ImageShader 패턴',
                        style: TextStyle(color: Colors.white, fontSize: 24),
                      ),
                    ),
                  ),
                );
              } else if (snapshot.hasError) {
                return Text('이미지 로드 오류');
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

  Future<ui.Image> _loadImage(String path) async {
    final Completer<ui.Image> completer = Completer();
    final ImageStream stream = AssetImage(path).resolve(ImageConfiguration());
    final ImageStreamListener listener = ImageStreamListener(
      (ImageInfo info, bool _) {
        completer.complete(info.image);
      },
      onError: (exception, stackTrace) {
        completer.completeError(exception!);
      },
    );
    stream.addListener(listener);
    return completer.future;
  }
}

2. 주요 옵션

2.1. TileMode

TileMode는 이미지가 반복되는 방식을 결정합니다. 다음은 가능한 옵션입니다:

• TileMode.repeated: 이미지를 반복하여 텍스처를 생성합니다.
• TileMode.clamp: 이미지를 확장하여 텍스처를 생성합니다. 가장자리에서 이미지를 클램프합니다.
• TileMode.mirror: 이미지를 반사하여 텍스처를 생성합니다.

예를 들어, TileMode.repeated를 사용하면 이미지가 반복되어 패턴을 생성합니다.

2.2. Matrix4

Matrix4는 텍스처의 변환을 정의합니다. 이미지를 스케일하거나 회전할 때 사용됩니다. 기본적으로 Matrix4.identity()는 단위 행렬을 생성하여 변환을 적용하지 않습니다.

• Matrix4.identity().scaled(0.5): 이미지를 절반 크기로 스케일링합니다.
• Matrix4.rotationZ(math.pi / 4): 이미지를 45도 회전시킵니다.

3. 다양한 예제

3.1. 이미지를 클램프하여 확장하기

return ShaderMask(
  shaderCallback: (bounds) {
    return ui.ImageShader(
      snapshot.data!,
      ui.TileMode.clamp,
      ui.TileMode.clamp,
      Matrix4.identity().scaled(1.0).storage,
    );
  },
  child: Container(
    width: 300,
    height: 300,
    color: Colors.transparent,
    child: Center(
      child: Text(
        '클램프 텍스처',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
);

 

3.2. 이미지를 미러링하여 패턴 만들기

return ShaderMask(
  shaderCallback: (bounds) {
    return ui.ImageShader(
      snapshot.data!,
      ui.TileMode.mirror,
      ui.TileMode.mirror,
      Matrix4.identity().scaled(0.5).storage,
    );
  },
  child: Container(
    width: 300,
    height: 300,
    color: Colors.transparent,
    child: Center(
      child: Text(
        '미러링 텍스처',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
);

 

결론

ImageShader는 Flutter에서 복잡한 이미지 텍스처를 적용할 때 매우 유용한 도구입니다.

TileMode를 통해 이미지를 반복하거나 확장할 수 있으며, Matrix4를 사용하여 이미지를 변환할 수 있습니다.

위의 예제와 옵션을 참고하여 다양한 시각적 효과를 적용해 보세요.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱