Flutter

[Flutter] SnackBar

전자기린 2021. 12. 31. 10:50

페이지 변경 시에 팝업이 유지되는 SnackBar

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [

          // #region 페이지가 변경되어도 팝업을 유지
          SizedBox(height: 15),
          ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    "123",
                    textAlign: TextAlign.center,
                  ),
                  duration: Duration(seconds: 1),
                  backgroundColor: Colors.teal,
                ),
              );
            },
            child: const Text(
              "ScaffoldMessenger\n페이지가 변경되어도 팝업을 유지",
              textAlign: TextAlign.center,
            ),
          ),
          // #endregion
          
        ],
      ),
    );
  }
}

 

페이지 변경 시에 팝업 제거되는 SnackBar

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
        
          // #region 페이지가 변경되면 팝업이 제거 됨
          SizedBox(height: 15),
          ScaffoldMessenger(
            child: ElevatedButton(
              child: const Text(
                "ScaffoldMessenger\n페이지가 변경되면 팝업이 제거 됨",
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(
                      "Hello - SnackBar",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white),
                    ),
                    backgroundColor: Colors.teal,
                    duration: Duration(seconds: 1),
                  ),
                );
              },
            ),
          ),
          // #endregion
   
        ],
      ),
    );
  }
}

 

내부에 버튼이 있는 SnackBar

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [

          // #region SnackBar 내부에 버튼 생성
          SizedBox(height: 15),
          ElevatedButton(
            child: const Text(
              "SnackBarAction\nSnackBar 안에 버튼 생성",
              textAlign: TextAlign.center,
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    "SnackBarAction 예제",
                    textAlign: TextAlign.center,
                  ),
                  duration: Duration(seconds: 2),
                  backgroundColor: Colors.teal,
                  action: SnackBarAction(
                    label: "Click",
                    textColor: Colors.white,
                    onPressed: () {
                      debugPrint("SnackBarAction 클릭됨.");
                    },
                  ),
                ),
              );
            },
          )
          // #endregion
          
        ],
      ),
    );
  }
}