[flutter] FloatingActionButton과 다른 위젯들의 조합 사용 방법

11 Dec 2023

flutter

Flutter 앱을 개발하다 보면 FloatingActionButton을 다른 위젯과 함께 사용해야 할 때가 있습니다. 이번 포스트에서는 FloatingActionButton과 다른 주요 위젯들을 어떻게 조합하여 사용하는지에 대해 알아보겠습니다.

1. FloatingActionButton과 Raised 버튼의 조합

Raised 버튼과 함께 FloatingActionButton을 사용하여 복잡한 화면을 만들 수 있습니다. 예를 들어, 사용자가 특정 작업을 수행하기 위해 FloatingActionButton을 탭할 수 있고, 더 많은 작업을 하기 위해 Raised 버튼을 사용할 수 있습니다.

다음은 FloatingActionButton과 Raised 버튼의 조합을 사용한 예시입니다.

Scaffold(
  appBar: AppBar(
    title: Text('FloatingActionButton with Raised Button'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FloatingActionButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          child: Icon(Icons.add),
        ),
        SizedBox(height: 20),
        RaisedButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          child: Text('Next'),
        ),
      ],
    ),
  ),
);

2. FloatingActionButton과 아이콘 버튼의 조합

아이콘 버튼을 사용하여 FloatingActionButton과 함께 간결한 디자인을 만들 수 있습니다. 이를 통해 사용자가 쉽게 이해하고 상호작용할 수 있습니다.

다음은 FloatingActionButton과 아이콘 버튼의 조합을 사용한 예시입니다.

Scaffold(
  appBar: AppBar(
    title: Text('FloatingActionButton with Icon Button'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FloatingActionButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          child: Icon(Icons.add),
        ),
        SizedBox(height: 20),
        IconButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          icon: Icon(Icons.edit),
        ),
      ],
    ),
  ),
);

3. FloatingActionButton과 텍스트 버튼의 조합

FloatingActionButton을 텍스트 버튼과 조합하여 필요한 경우 편리하게 사용자와 상호작용할 수 있습니다.

다음은 FloatingActionButton과 텍스트 버튼의 조합을 사용한 예시입니다.

Scaffold(
  appBar: AppBar(
    title: Text('FloatingActionButton with Text Button'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FloatingActionButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          child: Icon(Icons.add),
        ),
        SizedBox(height: 20),
        TextButton(
          onPressed: () {
            // Add your onPressed functionality here
          },
          child: Text('Okay'),
        ),
      ],
    ),
  ),
);

위와 같이, FloatingActionButton을 다른 위젯들과 조합하여 다양한 화면을 만들 수 있습니다.

더 많은 정보를 알고 싶다면 Flutter 공식 문서를 참고하세요.