하고 싶은 일

Flutter의 Button 구성 요소에 배경 이미지를 설정하여 이미지 버튼을 만들고 싶습니다.



이 이미지를 배경으로 Button을 만듭니다.



(어째서 젠켄인가는 비밀)

어떻게

Background와 같은 옵션은 보이지 않았으므로 child에 이미지를 설정하여 구현합니다.

구현

import 'package:flutter/material.dart';
import 'package:janken/gen/assets.gen.dart';

typedef void IncrementCallback();

class IncrementButton extends StatelessWidget {
  const IncrementButton(this._increment);

  final IncrementCallback _increment;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: this._increment,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      color: Colors.orange,
      child: Container(
        width: 180,
        height: 180,
        decoration: BoxDecoration(
          image: DecorationImage(
　　　　　　　　// Assets.images.janken.trianglePng.path には 画像Path が入る
              image: AssetImage(Assets.images.janken.trianglePng.path), 
              fit: BoxFit.scaleDown),
        ),
      ),
    );
  }
}

한 가지

이해하면 '그렇게'일지도 모르지만, 이해할 때까지는 방향성이 잡히지 않고 고생할 것 같다.