Custom Button으로 Drawer 여는법

https://www.youtube.com/watch?v=WRj86iHihgY 

Custom Drawer를 만드는 방법

해당 영상을 보다보면 Drawer를 다른 버튼에서 열어야 할 때

Scaffold.of(context).openDrawer(); 라는 메소드를 사용해서 열면 된다고 알려준다.

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      body: SafeArea(
        child: Center(
          child: TextButton(onPressed: (){
            Scaffold.of(context).openDrawer();
          }, child: Text('Open Drawer')),
        ),
      ),
    );
  }
}

이런 간단한 앱이 있다고 가정할 때 해당 버튼을 눌러보면 Drawer가 열리지 않는다.

심지어 Scaffold.of(context).hasDrawer 메소드를 사용해보면 false가 찍히는 걸 볼 수 있다.

 

이유는 단순하다. Scaffold 위젯을 찾아오지 못하기 때문.

 

.of(context) 메소드는 해당 BuildContext로부터 widget tree를 위로 따라 올라가면서 원하는 위젯을 찾는다.

Scaffold.of(context) 는 Scaffold를 찾고, Navigator.of(context) 메소드는 Navigator를 찾는다.

 

해당 코드에서 Scaffold.of(context)에서 context는 build메소드의 BuildContext이다. 우리가 찾고싶은 Scaffold는 build 메소드 아래에(widget tree관점에서) 있기 때문에 찾지 못하는것.

이럴 때 사용할 수 있는 위젯이 Builder 위젯이다.

 

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      body: SafeArea(
        child: Center(
          child: Builder(
            builder: (context) {
              return TextButton(
                  onPressed: () {
                    Scaffold.of(context).openDrawer();
                  },
                  child: Text('Open Drawer'));
            },
          ),
        ),
      ),
    );
  }
}

이렇게 Builder위젯으로 감싸줌으로써 Scaffold.of 메소드에서 사용하는 context는 build메소드의 BuildContext가 아니라 Builder 위젯의 BuildContext를 사용한다.

결과적으로 Builder 위젯에서부터 위로 가면서 Scaffold를 찾기 때문에 우리가 원하는 Scaffold를 찾아올 수 있다.

 

 

**잘못된 내용이 있다면 언제든지 답글 달아주세요.