ElevatedButton의 배경색을 그라데이션으로 만들기

디자이너의 요구에 맞추다 보니 버튼에 그라데이션을 넣으라는 미션이 있었다.

편하게 InkWell로 처리하면 될것같지만 그렇지않다.

만약 컨테이너의 모서리가 둥글다면 InkWell은 둥글게 하지못하기때문에 어색하게 보이는 문제가보인다.

이를 해결하기위해서 나는 ElevatedButton을 사용하기로했다.

ElevatedButton에 곧바로 적용을 할수는없었고 대신에 컨테이너를 밖에 감싸 배경색을 주고

ElevatedButton의 배경을 투명하게 만들어 적절한 효과를 줄수있었다. 

 Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Color(0xffE73863), Color(0xff849DC7)]),
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.transparent,
            shadowColor: Colors.transparent,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
          ),
          onPressed: onPressed,
          child: Container(
            width: width,
            height: height,
            alignment: Alignment.center,
            child: Text(
              text,
              textScaleFactor: 1,
              style: TextStyle(color: Colors.white, fontFamily: "Bold", fontSize: 14),
            ),
          )),
    );