[Flutter] Filled #shape #buttonstyle

Expanded로 넓혀진 공간을 Row, Column위젯을 사용해서 꽉차고 비율있게 만들었다.

그리고 내부에 TextButton위젯을 넣어주었는데, onPressed이벤트 발생시 Text위젯 크기만큼만 리플되었다.

 

하지만, 내가 원하는 것은 저 공간만 리플 이벤트가 발생하는 것이 아닌,

꽉~차게 리플 이펙트가 표현되는 것을 원했다.

 

첫 번째 문제로 1 부터 3까지는 Row위젯의 children들이다.

Row위젯의 위/아래를 넓혀주어야 꽉찰 수 있다.

 

그렇게 하기 위해서 다음과 같이 crossAxisAlignment 파라메터에 값을 정의해준다.

 Expanded(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(child: TextButton(
          onPressed: () {
          ...

 

그럼 위/아래가꽉차게 되며 children위젯들이 부모의 높이를 constraints하여 따라가게 된다.

 

 

여기서 만족해도 되지만,

shape의 radius가 둥그스름한 것을 고치고 싶었고,

네모난 모습으로 꽉차게 고치고 싶었다.

 

그렇게 하기 위해서는 TextButton위젯의 스타일을 바꿔주어야 했다.

style파라메터에 ButtonStyle클래스를 정의해준다.

그리고 shape파라메터에 RoundedRectangleBorder클래스로 radius를 zero상태로 만들어준다.

    Expanded(child: TextButton(
      onPressed: () {

      },
      style: ButtonStyle(
        shape: MaterialStateProperty.all(const RoundedRectangleBorder(borderRadius: BorderRadius.zero))
      ),
      child: Text("1",
        style: TextStyle(

        ),
      ),
    ))

 

 

네모난 모양으로 꽉차게 리플 이펙트가 표현되는 것을 확인할 수 있다.

 

 

2024-05-06-월 : 어린이날 대체휴일 ButtonStyle을 꾸며주고 싶었다.

특히 지폐모양으로 ~ !

ElevatedButton(
  onPressed: () => addPoint(50000),
  style: ButtonStyle(
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(6.0),
      side: BorderSide(color: Theme.of(context).colorScheme.primary)
    ))
  ),
  child: Text("50000"),
)