전제: 안녕 RaisedButton

Flutter로 버튼을 구현하는데 있어서 대단히 신세를 졌던 것이 RaisedButton이라는 Widget이었습니다.・・・하지만, 이하에도 있는 대로 폐지되어 버렸습니다.
대신 사용하도록 권장되는 것이 ElevatedButton입니다.
htps : // 아피. fぅ r. 로 v/fぅ는 r/마테리아 l/라이세 d부트톤-cぁs. HTML

This class is obsolete, please use ElevatedButton instead.

ElevatedButton으로 흔한 버튼 만들기

그래서, ElevatedButton으로 버튼을 만들고 싶습니다.
RaisedButton과 비교하면 추가하는 속성이 다소 증가하지만 패턴을 기억해 버리면 무섭지 않다.

일반 버튼

            ElevatedButton(
              onPressed: () {},
              child: Text(
                "1.Normal Button",
              ),
            ),

배경이 검은 색 버튼

            ElevatedButton(
              onPressed: () {},
              child: Text(
                "2.BackGround Button",
                style: TextStyle(
                  color: Colors.yellow,
                  fontSize: 30,
                ),
              ),
              style: ElevatedButton.styleFrom(
                primary: Colors.black, //ボタンの背景色
              ),
            ),

style 속성을 사용합니다.

눌렀을 때 배경이 검은 색 버튼

            // 3.押したときの背景が黒色のボタン
            ElevatedButton(
              onPressed: () {},
              child: Text(
                "3.onPressed Color Button",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              style: ElevatedButton.styleFrom(
                onPrimary: Colors.black, //押したときの色！！
              ),
            ),

이전처럼 스타일을 사용합니다.
primary가 배경색, onPrimary가 눌렀을 때의 배경색이 됩니다. primary와 이름이 비슷하기 때문에 주의.

버튼 비활성화

            ElevatedButton(
              onPressed: null, // onPressedをnullにする
              child: Text(
                "4.Untouchable button",
              ),
            ),

onPressed를 null로 설정하면 실현할 수 있습니다.

크기 변경

            SizedBox(
              // 5.SizedBoxで囲んでwidth/heightをつける
              width: 330,
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text(
                  "5.330 x 100 Size Button",
                ),
                style: ButtonStyle(),
              ),
            ),

다른 방법도 있지만 SizedBox에서 ElevatedButton을 감싸 보았습니다.

테두리를 붙인다

            ElevatedButton(
              onPressed: () {},
              child: Text(
                "6.Button",
              ),
              style: ElevatedButton.styleFrom(
                side: BorderSide(
                  color: Colors.black, //枠線!
                  width: 3, //枠線！
                ),
              ),

배경을 변경했을 때와 같은 style 속성을 사용합니다.
side에 BorderSide를 쓰면 테두리의 색과 두께를 지정할 수 있습니다.