SnackBar 표시하기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 10번째.

SnackBar는 화면 아래쪽에서 위로 미끄러져 올라오고 약 4초 후 저절로 사라지는 짧은 메시지입니다. 앱에서는 작업이 성공했음을 알리는 데 사용합니다. 저장됨, 전송됨, 삭제됨처럼 말이죠.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Sent')),
);

안쪽부터 읽어 보세요. SnackBar(...)는 메시지이고, showSnackBar는 메시지를 화면에 표시하며, ScaffoldMessenger.of(context)는 메시지를 표시하는 앱의 부분을 찾습니다.

context는 트리에서 위젯이 위치한 곳이며, build가 전달받는 값입니다. .of(context)는 그 위치에서 트리를 따라 위쪽을 검색합니다. 메신저는 MaterialApp에서 제공되므로 현재 위치보다 위에 있어야 합니다. HomePage는 MaterialApp 아래에 있으므로 그 컨텍스트로 메신저를 찾을 수 있습니다. MyApp의 컨텍스트는 메신저보다 위에 있으므로, 그곳에서 SnackBar를 표시하면 "No ScaffoldMessenger widget found" 오류가 발생합니다. 이것이 화면에 자체 클래스가 있는 또 다른 이유입니다.

챌린지

쉬움

Save을 누르면 Note saved라고 표시되는 SnackBar를 보여 주세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Notes')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Save'),
        ),
      ),
    );
  }
}