Flutter에 스낵바 추가하기

네덜란드어 스낵바(아래 이미지 참조)를 의미하는 것이 아니라 사용자에게 피드백을 제공하는 데 사용할 수 있는 토스트와 같은 메시지입니다.



모바일 앱에서 스낵바를 사용하는 것은 귀중한 피드백을 제공하는 완벽한 방법이므로 매우 일반적입니다.

오늘 기사에서는 myFlutter hello world app를 시작점으로 사용하겠습니다.

Flutter 스낵바 요구 사항

멋진 부분은 Flutter에서 스낵바를 사용하기 위한 유일한 요구 사항은 스캐폴드에 애플리케이션을 래핑하는 것입니다.
어쨌든 우리가 대부분의 시간에 하는 일.

그런 다음 ScaffoldMessenger라는 것을 사용하여 특정 작업에 대한 메시지를 보낼 수 있습니다.

스낵바 자체에는 우리가 살펴볼 옵션이 있을 수 있습니다.

Flutter에서 스낵바 호출

스낵바를 호출하는 데 사용할 수 있도록 애플리케이션에 버튼을 추가해 보겠습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Open the snackbar'),
      ),
    );
  }
}

이 코드는 빈 버튼을 제공합니다.



이 버튼 안에는 액션 시트를 바인딩하는 데 사용할 onPressed 메서드가 있습니다.

onPressed: () {
  final snackbar = SnackBar(
    content: const Text('Hello world, Snackbar here!'),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackbar);
},

이제 버튼을 클릭하면 화면 하단에 스낵바가 표시됩니다.

Flutter 스낵바에 작업 추가

스낵바를 사용하여 사용자 작업을 제공할 수도 있습니다.
이것은 그들이 방금 한 일을 되돌리기 위한 것일 수 있습니다.

예를 들어 사용자가 행을 변경하면 스낵바에 다음과 같이 표시됩니다. x행을 성공적으로 수정했습니다. 그런 다음 실행 취소 버튼을 사용하여 이 변경 사항을 다시 되돌릴 수 있습니다.

해당 코드는 다음과 같습니다.

onPressed: () {
  final snackbar = SnackBar(
    content: const Text('Successfully modified row x'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // Add your undo code here
      },
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackbar);
},

onPressed 콜백에서 방금 수행한 작업을 실행 취소하는 코드를 구현해야 합니다.

Note: A snackbar is designed only to have one action. For multiple actions, we should use a dialog.

소스 코드를 보려면 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나