Flutter 스터디 7 스낵바와 BuildContext, Builder 위젯 없이 스낵바 만들기와 토스트 메세지

순한맛 18 스낵바(Snack bar)와 BuildContext

 

스낵바(Snack bar) : 하단에 간단한 메세지를 띄우는 기능

 

Scaffold.of(context) method : 현재 주어진 context에서 위로 올라가면서 가장 가까운 Scaffold를 찾아서 반환하라

> something.of(context) 메소드는 위로 거슬러 올라가면서 가장 가까운 something을 찾아서 반환해라

 

Scaffold.of(context).showScackBar(),

>> Scaffold.of 메소드를 이용해서 Scaffold 위치를 참조한 후, showScackBar() 메소드를 이용해서 구현해야한다.

>> ScaffoldMessenger로 변경

---

왜 ScaffoldMessenger 로 변경 되어야 했는가?

 

기존

Scaffold.of(context) 은 위로 거슬러 올라가며 Scaffold 찾아서 반환하는 과정.

이 과정에서 Scaffold.of(context)로는 Scaffold를 찾을 수 없었음.

이를 해결하게 위해서 Builder 위젯을 생성해서 새로운 context를  Scaffold.of 메소드가 전달받게 한 후, 위젯들을 거슬러 올라가면서 Scaffold를 찾아나서는 방식을 사용 했었음.

 

이 때 생겨나는 문제점이 SnackBar가 새로운 페이지로 가면 BuildContext가 바뀌게 되고 바로 직전 페이지에서 표시되던 SnackBar를 사용할수 없게 됨.

 

 

신규

이를 해결하기 위해서 그림처럼 위젯 트리 최상위 위치에서 흩어져있는 작은 Scaffold를 등록해서 언제라도 SnackBar를 수신할 수 있도록 한 곳에 묶어서 관리하는 것. == ScaffoldMessenger

---

 

 

 

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar'),
        centerTitle: true,
      ),
      // body: HomeBody(), 
      floatingActionButton: FloatingActionButton( // 플로팅 버튼(오른쪽 하단) 배치 
        child: Icon(Icons.thumb_up),
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar( // 스캐폴드메신저 만들기
            // 가장 가까운 Scaffold 찾아서 반환
            SnackBar( // 스낵바
              content: Text('Like a new Snack Bar!'),
              duration: Duration(seconds: 3),
            ),
          );
        },
      ),
    );
  }
}

 

다른 분들 블로그에 FlatButton을 이용해서 작동까진 되었다는데 나는 뭐가 문제인지 FlatButton은 아예 작동이 되지 않았고 순한맛 26강을 통해서 같은 페이지에서 버튼을 클릭하면 스낵바 띄우기만 학습했다. 

Body 안에 버튼을 넣고 스낵바를 띄우고 싶었는데 시간을 너무 많이 허비해서 집중이 잘 안 되기도 했고 강의를 듣고 싶은 부분만 짤라서 봐서 그런 것 같다. 우선 급한데로 빠르게 실습할 수 있는 것을 위주로 진행했음

 

***** 순한맛 26강 스낵바와 ScaffoldMessenger 패치강좌를 다시 듣고 정리를 해야할듯하다.

 

---

 

순한맛 19 Builder 위젯 없이 스낵바 만들기, 토스트 메세지

 

Builder 없이 스낵바 구현

 

위젯 트리에서 Scaffold 밑에 MySnackBar라는 커스텀 위젯을 생성해서 Scaffold.of 함수가 MySnackBar의 context를 가지고 Scaffold를 찾아서 올라오는 방식

 

class MySnackBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton( //RaisedButton에서 변경 됨
        child: Text('Show me'),
        onPressed: (){
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Hello',
            textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white
            ),
            ),
            backgroundColor: Colors.teal,
            duration: Duration(seconds: 1), //1초동안 유지
          )
          ,);
        },
      )
    );
  }
}

 

 

toast 메시지 

 

toast 메세지를 사용하기 위해선 fluttertoast 라이브러리 다운 필요

1. pubspec.yaml 이동

2. [탭1번]fluttertoast: ^8.0.9 붙여넣기 (들여쓰기 주의!!)

3. main.dart로 가서 import 

 

(이때 import가 안 되는 경우가 있음.

1) Terminal 에서 flutter clean 입력

2. 페이지 상단에 pub get 클릭 or Terminal에 fluuter pub get 입력)

 

 

Toast 메세지는 위젯트리와 상관 없어서 함수를 만들어 onPressed 함수에서 불러오면 됨

결과 및 코드 ▼

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Message'),
        centerTitle: true,
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            flutterToast();
          },
          style: TextButton.styleFrom( //textButton styld을 만들려면 stylefrom을 사용해야함
            primary: Colors.black, //textButton의 글자색
            backgroundColor: Colors.blue, //textButton의 배경색
          ),
          child: Text('Toast'),
        ),
      ),
    );
  }
}

void flutterToast(){
  Fluttertoast.showToast(msg: 'Flutter',
  gravity: ToastGravity.BOTTOM,
  backgroundColor: Colors.red,
  fontSize: 20.0,
  textColor: Colors.white,
  toastLength: Toast.LENGTH_SHORT);
}