Text
Text(
'Hello World',
style: TextStyle(
fontSize: 30.0, // 글자 크기
fontStyle: FontStyle.italic, // 이탤릭체
fontWeight: FontWeight.bold, // 볼드체
color: Colors.blue, // 색상
letterSpacing: 4.0, // 자간
),
),
SelectableText
💬 드래그 할 수 있는 텍스트를 만들고 싶을 때 Text 위젯 대신 SelectableText로 변경하면 된다.
TextSpan
💬 서로 다른 스타일을 가진 Text를 한 문단으로 화면에 그리도록 만든다.
Text.rich(
TextSpan(
children: [
TextSpan(
text: "Flutter ",
style: textTheme().bodyText1,
),
TextSpan(
text: "Hello ",
style: textTheme().bodyText2,
),
TextSpan(
text: "World",
style: textTheme().subtitle1,
),
]
)
)
TextFormField
💬 Form과 TextFormField 위젯을 사용하여 입력값을 검증할 수 있다.
💬 TextField에 입력한 값을 얻을 수 있는 TextEditingController를 연결한다.
💬 검증할 내용 전체를 Form 위젯으로 감싸며, Form 위젯에는 GlobalKey<FormState> 인스턴스로 키를 지정해야 한다.
💬 TextFormField의 validator 프로퍼티에 입력된 값을 인수로 받는 함수를 작성하며, 이 곳에서 에러 메시지를 문자열로 반환하거나 검증 통과시 null을 반환하는 로직을 작성한다.
💬 폼의 검증은 formKey.currentState.validate()로 수행하며, true 혹은 false를 반환한다.
class _HomePageState extends State<HomePage> {
final _formKey = GlobalKey<FormState>(); 🔑
final _nameController = TextEditingController(); 🔑
@override
void dispose() {
_nameController.dispose(); 🔑
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Module')),
body: Container(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey, 🔑
child: Column(
children: <Widget>[
TextFormField( 🔑
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: '이름',
),
controller: _nameController, 🔑
validator: (value) { 🔑
if (value!.trim().isEmpty) {
return '이름을 입력해 주세요';
}
return null;
},
),
const SizedBox(height: 16.0,),
Container(
margin: const EdgeInsets.only(top: 16.0),
alignment: Alignment.bottomCenter,
child: OutlinedButton(
onPressed: () {
if (_formKey.currentState!.validate()) { 🔑
print('이름 입력 확인');
}
},
child: const Text('검증 결과'),
),
)
],
),
),
),
);
}
}
'Flutter > Concept' 카테고리의 다른 글
[ Flutter ] 리스트 (0) | 2022.02.27 |
---|---|
[ Flutter ] 화면 표시 (0) | 2022.02.27 |
[ Flutter ] 플랫폼 대응 (0) | 2022.02.24 |
[ Flutter ] 이미지 (0) | 2022.02.22 |
[ Flutter ] BottomNavigationBar (0) | 2022.02.19 |