[flutter] Row 위젯에서의 버튼 사용하기

07 Dec 2023

flutter

Flutter에서 UI를 구성할 때, 여러 위젯들을 가로 방향으로 배치해야 할 때가 있습니다. 이때 Row 위젯을 사용하면 간편하게 위젯들을 가로로 배치할 수 있습니다. 이번에는 Row 위젯에서 버튼을 사용하는 방법에 대해 알아보겠습니다.

1. 기본적인 Row 위젯 생성하기

먼저 Row 위젯을 생성해보겠습니다. 아래 예제 코드를 참고해주세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              FlatButton(
                onPressed: () {
                  // 버튼 클릭 시 동작 정의
                },
                child: Text('버튼 1'),
              ),
              FlatButton(
                onPressed: () {
                  // 버튼 클릭 시 동작 정의
                },
                child: Text('버튼 2'),
              ),
              FlatButton(
                onPressed: () {
                  // 버튼 클릭 시 동작 정의
                },
                child: Text('버튼 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. 버튼 스타일링하기

위 예제 코드에서는 FlatButton 위젯을 사용하여 버튼을 생성했습니다. 하지만 FlatButton은 기본적으로 평평한 스타일을 가지고 있습니다. 원하는 스타일로 버튼을 꾸밀 수도 있습니다. 예를 들어, Raised 버튼 스타일을 적용해보겠습니다. 아래 예제 코드를 참고해주세요.

FlatButton(
  onPressed: () {
    // 버튼 클릭 시 동작 정의
  },
  child: Text('버튼 1'),
  color: Colors.blue, // 버튼 배경색 지정
  textColor: Colors.white, // 버튼 텍스트 색상 지정
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // 버튼 모서리 둥글게 처리
  ),
),

3. 버튼 간격 설정하기

기본적으로 Row 위젯 내에서 버튼들은 붙어서 표시됩니다. 만약 버튼 간격을 조정하고 싶다면, Row 위젯의 mainAxisAlignment 속성을 사용할 수 있습니다. 이 속성을 통해 Row 안에서 위젯들의 정렬 방식을 설정할 수 있습니다. 아래 예제 코드에서는 버튼들 사이에 간격을 설정하고 있습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 버튼들 사이 간격 조정
  children: <Widget>[
    // 버튼 위젯들
  ],
),

4. 추가적인 설정

Row 위젯 외에도 다양한 설정을 할 수 있습니다. 예를 들어, Row 위젯의 너비를 화면에 맞게 조정하려면 Expanded 위젯을 사용할 수 있습니다. 아래 예제 코드를 참고해주세요.

Row(
  children: <Widget>[
    Expanded(
      child: FlatButton(
        // 버튼 설정
      ),
    ),
    Expanded(
      child: FlatButton(
        // 버튼 설정
      ),
    ),
    Expanded(
      child: FlatButton(
        // 버튼 설정
      ),
    ),
  ],
),

이렇게 Row 위젯을 사용하여 가로로 버튼을 배치할 수 있습니다. 필요에 따라 버튼의 스타일링이나 간격 조정 등을 자유롭게 설정해보세요.