[flutter] FlatButton을 사용하여 정보 입력 폼을 만드는 방법은?

26 Dec 2023

flutter

Flutter에서 정보 입력 폼을 만들 때, FlatButton을 사용하여 간단하고 사용하기 편한 UI를 디자인할 수 있습니다. 이 문서에서는 Flutter에서 FlatButton을 사용하여 정보 입력 폼을 만드는 방법에 대해 알아보겠습니다.

1. RaisedButton 위젯 import 하기

FlatButton을 사용하기 위해선, 다음과 같이 RaisedButton 위젯을 import 해야 합니다.

import 'package:flutter/material.dart';

2. FlatButton 생성하기

다음으로, 다음과 같이 FlatButton을 생성할 수 있습니다.

FlatButton(
  onPressed: () {
    // 버튼을 눌렀을 때 실행할 로직 작성
  },
  child: Text('저장'),
),

위의 예시에서 onPressed 핸들러 안에는 버튼을 눌렀을 때 실행할 로직을 작성할 수 있습니다. 또한, child 속성을 사용하여 버튼에 표시될 텍스트를 설정할 수 있습니다.

3. FlatButton에 스타일 적용하기

FlatButton에 스타일을 적용하여 UI를 더욱 개선할 수 있습니다. 다음은 버튼에 스타일을 적용하는 예시입니다.

FlatButton(
  onPressed: () {
    // 버튼을 눌렀을 때 실행할 로직 작성
  },
  child: Text('저장'),
  color: Colors.blue,
  textColor: Colors.white,
  padding: EdgeInsets.all(10),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(5),
  ),
),

4. FlatButton을 사용한 정보 입력 폼 예시

다음은 FlatButton을 사용하여 간단한 정보 입력 폼을 만드는 예시입니다.

Container(
  padding: EdgeInsets.all(16.0),
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: '이름'),
      ),
      SizedBox(height: 20),
      TextFormField(
        decoration: InputDecoration(labelText: '이메일'),
      ),
      SizedBox(height: 20),
      FlatButton(
        onPressed: () {
          // 저장 버튼을 눌렀을 때 실행할 로직 작성
        },
        child: Text('저장'),
        color: Colors.blue,
        textColor: Colors.white,
      ),
    ],
  ),
),

위의 예시에서는 TextFormField를 사용하여 이름과 이메일을 입력받는 정보 입력 폼을 만들고, 그 아래에 FlatButton을 이용하여 저장 버튼을 추가했습니다.

이렇게 Flutter에서 FlatButton을 사용하여 간단하고 사용하기 편한 정보 입력 폼을 만들 수 있습니다.

참고: https://api.flutter.dev/flutter/material/FlatButton-class.html