[flutter] FlatButton을 사용한 버튼 그룹을 만드는 방법은?

26 Dec 2023

flutter

Flutter에서는 FlatButton을 사용하여 버튼 그룹을 만들 수 있습니다. 버튼 그룹은 사용자가 선택할 수 있는 여러 버튼으로 구성됩니다. FlatButton은 터치할 때 효과가 없는 버튼을 만들 때 사용되며, 버튼 텍스트에 특정 스타일이 필요한 경우에 적합합니다.

다음은 FlatButton을 사용하여 버튼 그룹을 만드는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ButtonGroup(),
    );
  }
}

class ButtonGroup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        FlatButton(
          onPressed: () {
            // 버튼 클릭 시 실행할 동작
          },
          child: Text('버튼 1'),
        ),
        FlatButton(
          onPressed: () {
            // 버튼 클릭 시 실행할 동작
          },
          child: Text('버튼 2'),
        ),
        FlatButton(
          onPressed: () {
            // 버튼 클릭 시 실행할 동작
          },
          child: Text('버튼 3'),
        ),
      ],
    );
  }
}

위의 예제 코드를 실행하면 사용자가 버튼을 누를 때마다 각 버튼에 지정된 동작이 실행됩니다.

버튼 그룹을 만들 때에는 Row 위젯을 사용하여 버튼들을 가로로 나란히 나타낼 수 있습니다. 버튼의 간격을 조절하기 위해서는 mainAxisAlignment 속성을 사용하여 정렬을 설정할 수 있습니다.

버튼 그룹을 만드는 방법에서 고려해야 할 사항은 사용성과 디자인입니다. 사용자가 쉽게 버튼을 인식하고 터치할 수 있도록 적절한 크기와 간격을 설정해야 합니다. 또한, 버튼의 텍스트와 색상은 사용자에게 명확한 정보를 전달할 수 있도록 디자인되어야 합니다.

더 많은 정보를 원하시면 Flutter 공식 문서에서 자세한 내용을 확인할 수 있습니다.