Flutter - ScaffoldMessenger, SnackBar, Banner, 앱 알림 띄우기

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 ScaffoldMessenger에 대해서 배워보겠습니다.  ScaffoldMessenger는 Scaffold에서 사용자에게 손 쉽게 알림 들을 띄울 수 있는 위젯입니다. 앱을 개발하다 보면 사용에게 작은 안내를 보내야 할 많은데, Scaffold를 사용하는건 일반적이니 ScaffoldMessenger를 이용하면 알림을 아주 쉽게 띄울 수 있습니다.

 

ScaffoldMessenger는 Scaffold 하위 트리의 루트에 알림을 표시합니다. 만약 내부의 중첩된 Scaffold에 대한 알림을 표시하려면 중첩 수준 사이에 새 ScaffoldMessenger를 인스턴스화하여 새 범위를 설정해야 합니다..

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Scaffold(
        body: FirstRoute(),
      ),
    );
  }
}

일단 위 처럼 main.dart를 생성하겠습니다. 이전 포스트와 차이를 말하자면 MaterialApp의 home을 바로 FirstRoute로 설정하는 것이 아니라 Scaffold를 한 번 거친다는 것입니다. 그래야 ScaffoldMessenger를 사용할 수 있습니다.

 

Flutter ScaffoldMessenger SnackBar 띄우기

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("스낵바 버튼"),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('이것은 스낵바 입니다. 두 번째 페이지로 이동 합니다.'),
              ),
            );
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

FirstRoute은 위와 같습니다. Scaffold의 루트로 있는 위젯이지 ScaffoldMessenger를 사용할 수 있습니다. ScaffoldMessenger를 사용하는 방법은 아주 간단합니다.

 

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: MYWIDGET()))

위와 같이 작성하고 MYWIDGET() 부분에 스낵바에 표시할 텍스트를 설정해주시면 됩니다.

 

 

Flutter ScaffoldMessenger Banner 띄우기

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("배너 버튼"),
          onPressed: () {
            ScaffoldMessenger.of(context).showMaterialBanner(
              const MaterialBanner(
                content: Text('이것은 배너 입니다. 첫 번째 페이지로 이동 합니다.'),
                actions: [
                  TextButton(
                    onPressed: null,
                    child: Text('확인'),
                  ),
                ],
              ),
            );
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const FirstRoute()),
            );
          },
        ),
      ),
    );
  }
}

SecondRoute은 위와 같습니다. 배너를 띄우는 건 스낵바와 크게 다르지 않습니다. showSnackBar를 showMaterialBanner로 바꾸시고 안에 SnackBar도 MaterialBanner로 바꾸시기만 하면 됩니다.

 

ScaffoldMessenger.of(context).showMaterialBanner(
              const MaterialBanner(
                content: Text('이것은 배너 입니다. 첫 번째 페이지로 이동 합니다.'),
                actions: [
                  TextButton(
                    onPressed: null,
                    child: Text('확인'),
                  ),
                ],
              ),
            );

배너와 스낵바의 차이는 직접 확인해보시면 될 것 같습니다. 전체 코드는 아래에 담아두겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Scaffold(
        body: FirstRoute(),
      ),
    );
  }
}

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("스낵바 버튼"),
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(
                content: Text('이것은 스낵바 입니다. 두 번째 페이지로 이동 합니다.'),
              ),
            );
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("배너 버튼"),
          onPressed: () {
            ScaffoldMessenger.of(context).showMaterialBanner(
              const MaterialBanner(
                content: Text('이것은 배너 입니다. 첫 번째 페이지로 이동 합니다.'),
                actions: [
                  TextButton(
                    onPressed: null,
                    child: Text('확인'),
                  ),
                ],
              ),
            );
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const FirstRoute()),
            );
          },
        ),
      ),
    );
  }
}