BuildContext, Scaffold.of(), Snack Bar

jehjong·2020년 11월 12일
0

flutter

목록 보기
3/4

코딩셰프 순한맛 17강
코딩셰프 순한맛 18강

context란?

BuildContext의 인스턴스라고 이해하면 된다
context 이름은 마음대로 지정해도 된다

BuildContext 공식문서 정의

1. A handle to the location of a widget in the widget tree

위젯트리에서 현재 위젯의 위치를 알 수 있는 정보

🥊 설명

Build 함수는 Scaffold라는 위젯을 리턴하는데 이 때, 위젯트리 상에서 어디에 위치하는가에 대한 정보를 가지고 있는 context라는 것을 넣어서 리턴을 해준다

2. Each widget has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget.build or State.build function.

이 BuildContext는 stateless 위젯이나 state 빌드 메서드에 의해서 리턴된 위젯의 부모가 된다

🥊 설명

  • 커스텀 위젯으로 MyPage stateless 위젯을 생성
  • MyPage 위젯도 자신만의 BuildContext 타입의 context를 가지고 있다
  • build 메서드를 통해 Scaffold 위젯이 리턴되는데 이것의 부모인 MyPage의 context를 그대로 물려받는다

BuildContext 에러

"Scaffold.of() called with a context that does not contain a Scaffold"

에러가 뜨는 경우

위젯트리상에서 Scaffold 위치가 필요한 경우 Scaffold의 context를 참조하면 위 에러가 뜬다

  • Scaffold 위젯의 context는 위젯트리에서 Scaffold가 어디에 위치하고있는지에 관한 정보를 가지고 있지 않다
  • Scaffold 위젯에서 build 메서드로 어떤 위젯을 리턴하면 그 리젯은 부모인 Scaffold 위젯의 진짜 context를 물려받게된다

SnackBar

Scaffold.of(context) .showSnackBar()
  • SnackBar를 구현하기 위해서는 위 코드를 사용해야한다고 공식문서에 나와있다

Scaffold.of()

  • 현재 주어진 context에서 위로 올라가면서 가장 가까운 Scaffold를 찾아서 반환하라

    • content - 스낵바에 표시될 내용을 입력하는 곳
  • 바로 Scaffold 안에 Scaffold.of(context)를 하면 MyPage의 context위로 가장 가까운 Scaffold를 찾는다.

    • 하지만 MyPage위에 Scaffold가 없어서 BuildContext에러가 뜬다
  • Scaffold.of() 메서드가 위젯트리에서 Scaffold보다 밑에 있는 context를 사용할 수 있게 해야한다 => Builder 메서드 사용!

Builder()

  • Builder 위젯은 지금까지 사용했던 context가 무엇이었든 간에 다 무시하고 새로운 context로 새로운 위젯을 만드는 것
  • Builder 위젯에 builder 아규먼트를 넣어 사용
Builder(builder: (BuildContext context){
	return (
    	...
        Scaffold.of(context)...
        ...
    );
},)
  • Scaffold.of()가 builder의 context를 가지고 출발해 그 위쪽의 Scaffold를 찾는다

구현 코드

class MyPage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Snack Bar'),
          centerTitle: true,
        ),
        body: Builder(
          builder: (BuildContext ctx) {
            return Center(
              //Flat button, Raised button, Floating action button 디자인과 모양만 다를 뿐 기능상으론 비슷
              child: FlatButton(
                child: Text(
                  'Show me',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
                onPressed: () {
                  Scaffold.of(ctx).showSnackBar(SnackBar(
                    content: Text('Hello'),
                  ));
                },
              ),
            );
          },
        ));
  }
}
  • 스낵바 구현 성공
    • 아래 뜬 것
profile
개발기록

0개의 댓글