Flutter 버튼 배경색 변경하기

안녕하세요.
이번 포스팅에서는 Flutter 버튼의 배경색을 변경하는 방법에 대해서 알아보겠습니다.

이 포스팅에서는 이전 포스팅의 버튼 크기 변경과 동일하게 style을 수정하는 방법입니다. 다만 그냥 색상을 변경하는 방법과 theme data를 이용해서 변경하는 방법에 대해서 알아보겠습니다.

Flutter에서 버튼 크기 변경하기

먼저 style을 수정하는 방법에 대해서 알아보겠습니다.
방법은 간단합니다. 버튼의 style에 background 값을 변경해주면 됩니다.

기본 FilledButton에 backgroundColor 색상을 black으로 변경을 해보겠습니다.

FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.black),
  ),
  child: Text('Click Button'),
),

위와 같이 코드를 작성하거나 아래와 같이 styleFrom을 이용해서 작성을 하게 되면

FilledButton(
  onPressed: () {},
  style: FilledButton.styleFrom(
    backgroundColor: Colors.black,
  ),
  child: Text('Click Button'),
),

아래와 같이 보이게 됩니다.

다음으로 MaterialApp의 theme의 colorScheme을 변경하는 방법입니다.

MaterialApp(
  theme: ThemeData(
  	colorScheme: ColorScheme(
      primary: Colors.black,
      seconday: Colors.blue,
      ...
    ),
  ),
),

MaterialApp에 위와 같이 primary와 seconday 색상을 지정을 해준 뒤

FilledButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(
      Theme.of(context).colorScheme.secondary,
    ),
  ),
  child: Text('Click Button'),
),

위와 같이 코드를 작성하거나 아래와 같이 styleFrom을 이용해서 작성을 하게 되면,

FilledButton(
  onPressed: () {},
  style: FilledButton.fromStyle(
    backgroundColor: Theme.of(context).colorScheme.secondary,
  ),
  child: Text('Click Button'),
),

아래와 같이 보이게 됩니다.

여기까지 부족한 글 읽어주셔서 감사합니다.
제가 잘못 작성한 내용이나 부족한 부분이 있다면 알려주시면 보완 수정하겠습니다.

감사합니다💛