Flutter 앱을 개발하면서 FloatingActionButton의 기본 스타일을 사용하지 않고 사용자 정의 스타일을 적용하고 싶을 때가 있습니다. 특히 FloatingActionButton의 배경색과 투명도를 변경하고 싶을 때는 다음과 같이 할 수 있습니다.

배경색 변경하기

우선 FloatingActionButton의 배경색을 변경하는 방법에 대해 알아보겠습니다. FloatingActionButton 위젯을 생성할 때, backgroundColor 속성을 사용하여 배경색을 지정할 수 있습니다.

FloatingActionButton(
  backgroundColor: Colors.red, // 원하는 색으로 변경
  onPressed: () {},
  child: Icon(Icons.add),
),

위 예제에서 backgroundColor를 Colors.red로 지정하여 빨간색 배경을 가진 FloatingActionButton을 생성했습니다.

투명도 변경하기

FloatingActionButton의 투명도를 변경하기 위해서는 Theme을 사용하여 테마를 설정하는 방법이 있습니다. 먼저 MaterialApp 또는 WidgetsApp의 theme 속성을 사용하여 전체적인 테마를 설정합니다.

MaterialApp(
  theme: ThemeData(
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      splashColor: Colors.transparent, // 투명도 설정
    ),
  ),
  home: MyHomePage(),
);

또는 특정한 FloatingActionButton의 테마만을 변경하고 싶으면 Theme 위젯을 사용하여 해당 FloatingActionButton을 감싸고 테마를 설정할 수 있습니다.

Theme(
  data: ThemeData(
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      splashColor: Colors.transparent, // 투명도 설정
    ),
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
),

위 예제에서 splashColor를 Colors.transparent로 설정하여 FloatingActionButton의 투명도를 조절했습니다.

이렇게 하면 다양한 배경색과 투명도를 가진 FloatingActionButton을 만들어 사용할 수 있습니다.

참고: Flutter 공식 문서