[flutter] FloatingActionButton을 부모 위젯에 배치하는 방법

11 Dec 2023

flutter

Flutter에서 FloatingActionButton은 일반적으로 스크롤 가능한 목록 및 앱의 주요 화면과 같은 메인 위젯에 추가됩니다. 이 글에서는 FloatingActionButton을 부모 위젯에 배치하는 방법에 대해 알아보겠습니다.

1. Scaffold의 body에 FloatingActionButton 직접 추가하기

Scaffold 위젯의 body 속성에 FloatingActionButton 위젯을 직접 추가할 수 있습니다.

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton 예제'),
      ),
      body: Center(
        child: Text('내용'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 버튼 클릭 시 수행할 작업
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      )
    );
  }
}

위 코드에서 Scaffold의 body에 Center 위젯과 텍스트를 추가한 후, floatingActionButton 속성에 FloatingActionButton을 정의했습니다.

2. CustomScrollView 위젯 내에서 FloatingActionButton 사용하기

CustomScrollView를 사용하여 복잡한 스크롤 동작을 가진 위젯을 만들 수 있습니다. 이 경우 CustomScrollView 내에 FloatingActionButton을 배치할 수 있습니다.

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton 예제'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildListDelegate([
              // 리스트 아이템들
            ]),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 버튼 클릭 시 수행할 작업
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

위 코드에서 CustomScrollView를 사용하여 SliverList를 만든 후, floatingActionButton을 추가했습니다.

FloatingActionButton을 부모 위젯에 배치하는 방법에 대해 알아보았습니다. 이제 적합한 방식을 선택하여 앱에 맞는 디자인을 구현할 수 있을 것입니다.

Flutter 공식 문서 - FloatingActionButton

Flutter 공식 문서 - Scaffold