Flutter_20. TextField with Button, keyboardType, FocusScope, SnackBar

이번 포스팅에서는 Button과 함께 사용하는 TextField를 메모해보려 한다.

버튼을 클릭하면, 입력한 값은 SnackBar로 출력해보겠다.

 

2023.05.02 - [개발하기] - Flutter_07. ScaffoldMessenger, SnackBar, Function

Flutter_07. ScaffoldMessenger, SnackBar, Function

 

 

 

 

 

 

TextField, Button, SnackBar

 

 

1) 변수 선언 및 초기화

class _HomeState extends State<Home> {
  // Field
  late TextEditingController textEditingController;
  late String inputValue;

  // Init
  @override
  void initState() {
    super.initState();
    textEditingController = TextEditingController();
    inputValue = '';
  }

  // Dispose
  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

 

 

 

2) TextField

❊ TextField
- controller : TextEditingController
- decoration : InputDecoration(border, labelText)
- keyboardType : TextInputType
//- obscureText : 문자 숨김 처리(ex 비밀번호 입력)
//- onSubmitted : (String value) async{ await... }

 

 

 

3) Button : TextEditingController.text.trim()

Case1. 텍스트필드가 공백인 경우
Case2. 텍스트필드에 입력된 값이 있지만, 문자가 아닌 경우(ex. 스페이스바 : "    abc")
Case3. 텍스트필드에 입력된 값이 정상적으로 있는 경우

---------
- Case1 또는 Case2의 경우, errorSnackBar(context) 함수 호출
- Case3의 경우, showSnackBar(context) 함수 호출

 

#참고 : https://api.flutter.dev/flutter/dart-core/String/trim.html

trim method - String class - dart:core library - Dart API

 

 

 

 

4) SnackBar Function 정의

❊ ScaffoldMessenger.of(context).showSnackBar
SnackBar
- content: 문구,
- duration: 출력 지속 시간
- backgroundColor: 스낵마 칼라,

// --- Func SnackBar
  showSnackBar(BuildContext context){
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('입력한 글자는 $inputValue 입니다.'),
        duration: const Duration(seconds: 2),
        backgroundColor: Colors.blue,
        )
    );//함수니까 ";" 추가!
  }

  errorSnackBar(BuildContext context){
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('글자를 입력하세요.'),
        duration: Duration(seconds: 2),
        backgroundColor: Colors.red,
        )
    );//함수니까 ";" 추가!
  }

 

 

 

5) 저장하고 기능 확인

 

 

 

 

 

 

 

keyboard, FocusScope

 

 

 

키보드 출력 후(키보드 출력 : Command + K), 키보드 외의 다른 영역을 클릭해도 키보드는 내려가지 않는다.

이럴때 FocusScope를 사용하여, 키보드 외 다른 영역을 클릭 할 경우 키보드가 내려가도록 할 수 있다.

 

https://api.flutter.dev/flutter/widgets/FocusScope-class.html

FocusScope class - widgets library - Dart API

 

 

1) Scaffold에 Widget 추가

 

 

2) GestureDetector : onTap으로 FocusScope

FocusScope.of(context).unfocus();

 

 

 

3) 저장하고 기능 확인

 

 

반응형