Flutter 앱을 개발하다 보면 FloatingActionButton에 의해 화면에 올라오는 레이어가 부족할 수 있습니다. 그렇다면 이것을 개선하여 더 나은 사용자 경험을 제공하고자 할 때가 있습니다. 이때 그림자 효과를 추가하여 FloatingActionButton이 더 돋보이도록 만들 수 있습니다.

그림자 효과 추가하기

import 'package:flutter/material.dart';

class ShadowedFloatingActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 4.0,
      shape: CircleBorder(),
      child: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

위 코드는 그림자 효과를 추가한 ShadowedFloatingActionButton 위젯을 나타냅니다. Material 위젯을 사용하여 그림자를 넣고, elevation 속성을 통해 그림자의 크기를 조절할 수 있습니다.

결론

그림자 효과를 추가하여 FloatingActionButton이 눈에 더 잘 띄도록 만들었습니다. 사용자가 버튼의 위치를 쉽게 파악할 수 있게끔 하여 전반적인 앱 경험을 향상시킬 수 있습니다.

더 많은 Flutter 위젯과 효과에 대해 알고 싶다면 Flutter 공식 문서를 참고하세요.

다음 내용: ListView에서 아이템 간 구분선 제거하기