[Flutter] Basic - ScaffoldMessenger

이번에는 ScaffoldMessenger 에 대해서 알아보겠습니다.

ScaffoldMessenger 를 이용하면 스낵바를 다음 화면에까지 보여줄수도 있고 싫다면 다음화면 이동시 바로 사라지게 처리할수도 있습니다.

 

먼저 다음화면까지 이어지게 표시하고 싶다면 아래 화면을 참고하세요.

좋아요 클릭 >> 스낵바 표시(버튼 클릭) >> 2번째 페이지로 이동(스낵바 계속 표시) >> 5초후 스낵바 사라짐

 

 

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstPage(), // push
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scaffold Messenger'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.thumb_up),
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text('"좋아요"가 추가 되었습니다'),
              duration: const Duration(seconds: 5),
              action: SnackBarAction(
                label: '취소하기',
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => const ThirdPage()));
                },
              ),
            ),
          );
        },
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go to the Second page'),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const SecondPage()));
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: const Center(
        child: Text(
          '"좋아요"가 추가 되었습니다',
          style: TextStyle(fontSize: 20, color: Colors.redAccent),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Third Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '"좋아요"를 취소하시겠습니까?',
              style: TextStyle(fontSize: 20, color: Colors.redAccent),
            ),
            const SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('"좋아요"가 취소되었습니다'),
                    duration: Duration(seconds: 3),
                  ),
                );
              },
              child: const Text('취소하기'),
            )
          ],
        ),
      ),
    );
  }
}

 

좋아요 클릭 >> 스낵바 표시 >> 2번째 페이지로 이동(스낵바 계속 표시) >> 5초후 스낵바 사라짐

 

먼저 다음화면으로 이동하면 바로 스낵바를 없애고 싶다면 아래 화면을 참고하세요.

좋아요 클릭후 보여지는 스낵바에서 취소하기 클릭하면 3번째 페이지로 이동합니다.

(수정전 ) 취소하기 클릭 >> 스낵바 표시(back 버튼 클릭) >> 최초 페이지로 이동(스낵바 계속 표시)

 

 

(수정후 ) 취소하기 클릭 >> 스낵바 표시(back 버튼 클릭) >> 최초 페이지로 이동(스낵바 바로 사라짐)

 

 

수정부분은 아래와 같습니다. ScaffoldMessenger, Builder 부분이 추가되었습니다.

ScaffoldMessenger 를 추가하여 상위의 ScaffoldMessenger 와 다른 영역을 만들어 준 후, Builder 를 새로 만들어서 context 를 분리하면 된다.

 

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

  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger( // ------------- ScaffoldMessenger 로 감싸기
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Third Page'),
        ),
        body: Builder( // ------------------------------ Builder 로 감싸기
          builder: (context) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    '"좋아요"를 취소하시겠습니까?',
                    style: TextStyle(fontSize: 20, color: Colors.redAccent),
                  ),
                  const SizedBox(height: 20,),
                  ElevatedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('"좋아요"가 취소되었습니다'),
                          duration: Duration(seconds: 3),
                        ),
                      );
                    },
                    child: const Text('취소하기'),
                  )
                ],
              ),
            );
          }
        ),
      ),
    );
  }
}

 

 

[참고자료] 코딩셰프 -

[https://www.youtube.com/watch?v=IKpOAQJbADk&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=28]