Flutter 강좌 - [Form] 텍스트필드 생성 및 스타일 적용

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

지난 강좌에서 폼과 텍스트폼필드의 사용법에 대해서 살펴보았다. 이번에는 텍스트필드에 스타일을 적용하는 방법에 대해서 알아본다.

Flutter에서는 사용자로부터 텍스트의 입력을 받기 위해 TextField와 TextFormField를 제공한다. 이 두 텍스트 필드는 거의 유사한데 TextFormField 의 경우 폼 안에 넣어 사용하면서 추가적으로 입력값을 유효성 검증이나 다른 폼필드와의 연동 등의 기능을 제공한다.

지난 강좌에서 이용한 소스코드를 활용해서 다음과 같이 수정한다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(title: Text(appTitle)),
        // StatefulWidget인 MyCustomForm을 body로 설정
        body: MyCustomForm(),
      ),
    );
  }
}

// 커스텀 폼 위젯을 정의
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// 펌 위젯에 상응하는 상태 클래스
class MyCustomFormState extends State<MyCustomForm> {
  // 폼에 부여할 수 있는 유니크한 글로벌 키를 생성한다.
  // MyCustomFormState의 키가 아닌 FormState의 키를 생성해야함을 유의
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // 폼 위젯 생성
    // 폼 위젯은 컨테이너처럼 동작하면서, 복수의 폼 필드를 그룹화하고 적합성을 확인함
    return Form(
      // 필드에 부여했단 글러벌키를 폼에 할당함
      key: _formKey,
      child: Column(
        // 컬럼내 위젯들을 왼쪽부터 정렬함
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // 텍스트폼필드 추가
          TextFormField(
            // 텍스트폼필드에 validator 추가
            validator: (value) {
              // 입력값이 없으면 메시지 출력
              if (value.isEmpty) {
                return 'Enter some text';
              } else
                return null;
            },

            // 텍스트폼필드에 스타일 적용
            decoration: InputDecoration(
                // 텍스트필드의 외각선
                border: InputBorder.none,
                // 텍스트필드상에 출력되는 텍스트. 실제 값이 되진 않음
                hintText: 'Enter a search term',
                // 텍스트필드의 상단에 출력되는 레이블 텍스트
                labelText: "Enter your username"),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // 텍스트폼필드의 상태가 적함하는
                if (_formKey.currentState.validate()) {
                  // 스낵바를 통해 메시지 출력
                  Scaffold.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              // 버튼에 텍스트 부여
              child: Text('Submit'),
            ),
          )
        ],
      ),
    );
  }
}

 

수정된 부분은 line 58부터 64까지 이다. TextFormField의 decoration 항목에 InputDecoration 위챗을 구현하여 스타일을 적용할 수 있다.

border는 텍스트필드의 외각선을 설정하는 항목이고, hintText는 텍스트필드에 출력되는 안내문구이다. hintText는 실제 텍스트 입력값이 되진 않는다. labelText는 텍스트필드 상단에 출력되는 레이블로서 포커싱 될 때 출력된다.

실행화면은 다음과 같다.

 

앱이 실행되면 텍스트필드에 hintText로 설정한 'Enter a search term'이란 문구가 출력된다. 또한 border값을 InputBorder.none으로 설정하였기 때문에 밑줄이 생략되어 출력된다.

텍스트필드를 누르면 가상키보드가 올라오고, 텍스트필드 상단에 labelText로 설정한 Enter your username'이란 문구가 파란색으로 출력된다. 이 상태에서 Submit 버튼을 누르면 labelText 문구가 빨간색으로 변경되고, 텍스트필드 하단에 에러 메시지가 출력된다.

정상적으로 텍스트를 입력한 후 다시 Submit 버튼을 누르면 labeText 문구가 다시 파란색으로 변경되면서 스낵바가 나타난다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱