[Flutter][TIL] Scaffold 이해(화면 밀림)

문제

개발하다가 제대로 버튼 위젯을 넣은 것 같은데 화면이 밀리는 현상이 나타났다.

버튼 위젯에 문제가 있나 해서 봤는데 너무 Scaffold를 마구잡이로 쓰던 버릇때문이었다.

 

import 'package:flutter/material.dart';
import 'package:snack_party/screen/add_party_screen.dart';

class AddPartyButton extends StatefulWidget {
  const AddPartyButton({Key? key}) : super(key: key);

  @override
  State<AddPartyButton> createState() => _AddPartyButtonState();
}

class _AddPartyButtonState extends State<AddPartyButton> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text('+'),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (c) => AddPartyScreen()));
        },
      ),
    );
  }
}

버튼 위젯을 Scaffold로 감싸는 바람에 레이아웃으로 만들어져서 이런 문제가 생긴 것 같았다.

---

해결

버튼 위젯을 감싸고 있던 Scaffold를 없애주었더니 원하는 대로 동작하는 모습이다.

import 'package:flutter/material.dart';
import 'package:snack_party/screen/add_party_screen.dart';

class AddPartyButton extends StatefulWidget {
  const AddPartyButton({Key? key}) : super(key: key);

  @override
  State<AddPartyButton> createState() => _AddPartyButtonState();
}

class _AddPartyButtonState extends State<AddPartyButton> {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        child: Text('+'),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (c) => AddPartyScreen()));
        },
      );

  }
}

무엇을 return 해주고 다른 파일에서 그걸 불러오는지 잘 보고 개발할 필요가 있겠다.