import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';
class UsernameScreen extends StatefulWidget {
const UsernameScreen({super.key});
State<UsernameScreen> createState() => _UsernameScreenState();
}
class _UsernameScreenState extends State<UsernameScreen> {
final TextEditingController _usernameController = TextEditingController();
String _username = "";
void initState() {
super.initState();
_usernameController.addListener(() {
setState(() {
_username = _usernameController.text;
});
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"Sign up",
),
),
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: Sizes.size36,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Gaps.v40,
const Text(
"Create username",
style: TextStyle(
fontSize: Sizes.size24,
fontWeight: FontWeight.w700,
),
),
Gaps.v8,
const Text(
"You can always change this later.",
style: TextStyle(
fontSize: Sizes.size16,
color: Colors.black54,
),
),
Gaps.v16,
TextField(
controller: _usernameController,
decoration: InputDecoration(
hintText: "Username",
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.shade400,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.shade400,
),
),
),
cursorColor: Theme.of(context).primaryColor,
),
Gaps.v28,
FractionallySizedBox(
widthFactor: 1,
child: AnimatedContainer(
padding: const EdgeInsets.symmetric(
vertical: Sizes.size16,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Sizes.size5),
color: _username.isEmpty
? Colors.grey.shade300
: Theme.of(context).primaryColor,
),
duration: const Duration(milliseconds: 500),
child: const Text(
'Next',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
),
);
}
}TextEditingController
final TextEditingController _usernameController = TextEditingController();- 이 줄은
TextEditingController의 인스턴스를 생성하고_usernameController변수에 할당합니다. TextEditingController는 편집 가능한 텍스트 필드의 컨트롤러로, 텍스트 필드에서 사용자의 입력을 감시하고 제어합니다.
상태 변수
String _username = "";- 여기에서
_username이라는 이름의String변수가 선언되고 빈 문자열로 초기화됩니다. 이 변수는 텍스트 필드에서 사용자의 입력 값을 저장하기 위한 것입니다.
initState 메서드
initState는 상태 저장 위젯의 생명주기 메서드입니다. 위젯이 생성될 때 처음으로 호출되는 메서드입니다(생성자 이후,build이전).super.initState();는 상위 클래스의initState메서드를 호출합니다. 상속받은initState기능이 실행되도록 보장하기 위해 필요합니다.
TextEditingController에 리스너 추가
initState내에서_usernameController에addListener를 사용하여 리스너를 추가합니다._usernameController.addListener(() { ... });는 텍스트 필드의 텍스트가 변경될 때마다 호출될 함수를 설정합니다.- 리스너 함수는
setState를 사용하여 위젯을 새 데이터로 다시 빌드하는 것을 트리거합니다. setState내에서_username = _usernameController.text;는 텍스트 필드의 현재 텍스트로_username변수를 업데이트합니다.TextEditingController는 텍스트 필드의 변경 사항을 감지하여_username상태 변수를 그에 따라 업데이트합니다.- 사용자가 연관된 텍스트 필드에서 텍스트를 입력하거나 변경할 때마다,
_username변수가 이 입력을 반영하도록 업데이트되며, 위젯은 이 변경 사항을 반영하도록 다시 빌드됩니다. 이 메커니즘은 위젯의 상태가 항상 텍스트 필드의 현재 값을 포함하도록 보장합니다.
TextField
-
TextField(controller: _usernameController, ...): 이TextField는 사용자로부터 사용자 이름을 입력받는 데 사용됩니다. -
_usernameController: 이는TextEditingController의 인스턴스로, 사용자가TextField에 입력하는 텍스트를 관리합니다. 사용자가 입력한 텍스트는 이 컨트롤러를 통해_username변수에 동기화됩니다. -
decoration: InputDecoration(...): 텍스트 필드의 외관을 꾸미는 데 사용됩니다.
-
hintText: "Username": 사용자에게 입력 필드의 목적을 알려주는 힌트 텍스트입니다.
-
enabledBorder와 focusedBorder: 텍스트 필드의 테두리 스타일을 정의합니다. 여기서는 사용 가능하고 포커스된 상태일 때 모두 동일한 회색 테두리를 사용합니다.
이 코드 조각은 Flutter에서 AnimatedContainer 위젯을 사용하여 동적인 UI를 생성하는 방법을 보여줍니다. 구체적으로, 사용자가 텍스트 필드에 입력하는 내용에 따라 AnimatedContainer의 색상이 변경되는 방식을 사용합니다. 세부 내용을 살펴보겠습니다:
Decoration
color: _username.isEmpty ? Colors.grey.shade300 : Theme.of(context).primaryColor: 컨테이너의 배경색을 결정합니다. 사용자 이름이 비어 있으면 회색으로, 아니면 앱의 기본 색상으로 설정됩니다.
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.shade400,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.shade400,
),
),이 코드 조각은 Flutter에서 TextField 위젯의 decoration 속성 내에 있는 enabledBorder와 focusedBorder를 사용하여 텍스트 필드의 테두리 스타일을 정의하는 방법을 보여줍니다.
-
enabledBorder: UnderlineInputBorder(...): 텍스트 필드가 활성화되었지만 포커스되지 않았을 때의 테두리 스타일을 정의합니다. -
UnderlineInputBorder: 텍스트 필드의 밑줄 형태의 테두리를 생성합니다. -
borderSide: BorderSide(color: Colors.grey.shade400, ...): 테두리의 색상과 스타일을 정의합니다. 여기서는 회색 계열의 색상을 사용하고 있습니다. -
focusedBorder: UnderlineInputBorder(...): 텍스트 필드가 포커스되었을 때의 테두리 스타일을 정의합니다. -
이 역시
UnderlineInputBorder를 사용하여 밑줄 형태의 테두리를 지정합니다. -
focusedBorder의borderSide도enabledBorder와 동일한 색상을 사용합니다. 이는 텍스트 필드가 포커스를 받더라도 테두리 색상이 변경되지 않음을 의미합니다.
이 설정은 텍스트 필드가 활성화 상태이든 포커스 상태이든 관계없이 일관된 테두리 스타일을 유지하도록 합니다. 사용자가 필드를 선택하거나 입력을 시작할 때 테두리의 시각적 변화를 최소화하려는 디자인 선택일 수 있습니다. 일반적으로, focusedBorder를 사용하여 사용자가 텍스트 필드를 선택했을 때 시각적인 피드백을 제공하는 것이 일반적입니다. 그러나 이 경우에는 테두리 스타일을 동일하게 유지하여 UI의 단순함과 일관성을 강조합니다.
상호작용에 따른 색상 변화
- 이
AnimatedContainer는_username변수의 내용에 따라 색상이 변경됩니다. - 사용자가 아무것도 입력하지 않았을 때는 회색으로 표시되고, 사용자가 텍스트를 입력하기 시작하면 앱의 기본 색상으로 변경됩니다.
- 이러한 색상 변화는
AnimatedContainer의duration속성에 의해 부드럽게 전환됩니다.
이 코드는 사용자의 입력에 따라 인터페이스 요소의 시각적 피드백을 제공하는 좋은 예시입니다. 사용자가 입력을 하는 동안 UI가 동적으로 반응하여 사용자 경험을 향상시킵니다.
요약
이 코드에서 TextField와 TextEditingController는 사용자 이름 입력을 받아서 처리하고, 사용자가 입력을 마치면 'Next' 버튼의 상태를 업데이트합니다. 사용자가 텍스트를 입력하면, AnimatedContainer의 색상이 변경되어 사용자가 'Next' 단계로 넘어갈 준비가 되었음을 시각적으로 나타냅니다. 이러한 방식으로, 사용자 인터페이스는 동적이고 상호작용적인 경험을 제공합니다.
TextField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
onEditingComplete: _onSubmit,
decoration: InputDecoration(
hintText: "Email",
errorText: _isEmailValid(),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.grey.shade400,
),
),
),
)
이 코드 조각은 Flutter 애플리케이션의 일부로, 이메일 입력을 처리하기 위한 TextField 위젯을 설정하는 부분입니다. 각 기능을 자세히 살펴보겠습니다:
TextField 위젯
- 컨트롤러:
controller: _emailController는_emailController라는TextEditingController를 사용합니다. 이 컨트롤러는 필드에 입력된 텍스트를 관리합니다. - 키보드 타입:
keyboardType: TextInputType.emailAddress는 이메일 입력에 최적화된 키보드 타입을 설정합니다. 이는 보통 '@' 기호와 '.com' 버튼을 포함합니다. - onEditingComplete:
onEditingComplete: _onSubmit은 사용자가 텍스트 편집을 마칠 때 호출될 함수를 지정합니다(예: 키보드의 '완료' 버튼을 누를 때)._onSubmit은 다른 곳에서 정의된 함수로, 사용자가 이메일 입력을 마친 후 처리할 작업을 다룹니다.
InputDecoration
- 힌트 텍스트:
hintText: "Email"은 필드가 비어 있을 때 그 안에 회색으로 표시되는 텍스트를 제공하여 사용자에게 무엇을 입력해야 하는지 안내합니다. - 에러 텍스트:
errorText: _isEmailValid()는 입력된 이메일이 유효하지 않을 경우 에러 텍스트를 표시합니다._isEmailValid()함수(아마도 코드의 다른 부분에서 정의됨)는 이메일이 유효하지 않을 경우 에러 메시지를 반환하고, 유효하면null을 반환합니다(errorText에null을 표시하면 에러 메시지가 표시되지 않습니다). - 활성화된 테두리:
enabledBorder: UnderlineInputBorder(...)는 텍스트 필드가 활성화되었지만 포커스되지 않았을 때의 테두리를 정의합니다. 여기서는 회색의 밑줄 테두리입니다.Colors.grey.shade400으로 설정된 borderSide는 이 밑줄 테두리의 색상과 스타일을 설정합니다.
요약
이 TextField는 이메일 입력에 맞게 조정되어 있으며, 특정한 키보드 타입, 편집이 완료되었을 때 수행할 동작, 힌트 텍스트 및 이메일의 유효성에 따라 변화하는 동적 에러 처리를 포함한 맞춤형 외관을 가지고 있습니다. TextEditingController는 프로그래밍 방식으로 텍스트 필드의 내용을 읽거나 변경할 수 있게 해줍니다.
