728x90
Flutter로 사용자의 키보드 입력을 받는 간단한 기능을 구현해보자.
파일은 mian.dart와 home_page.dart로 간단히 구성하였다.
+ 디자인은 알아보기 쉽게 촌스럽게 만들었습니다.
Main.dart
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import 'package:flutter/material.dart';
import 'package:pomodoro/pages/home_page.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
|
cs |
home_page.dart
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextEditingController _textController = TextEditingController();
String inputText = "";
//텍스트를 저장하고 컨트롤러를 초기화하는 함수
void sendText() {
if (_textController.text.isNotEmpty) {
setState(() {
inputText = _textController.text;
});
}
_textController.clear();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
//입력받은 텍스트를 표시
Expanded(
child: SizedBox(
child: Container(
color: Colors.green[100],
child: Center(
child: Container(
width: 300,
height: 100,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.grey,
),
child: Text(
inputText,
style: const TextStyle(
color: Colors.black,
fontSize: 30,
),
),
),
),
),
),
),
//키보드 입력을 받는 widget
_textInput(),
],
),
);
}
Widget _textInput() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _textController,
//입력되는 텍스트 스타일
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
//텍스트 필드 디자인
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
),
fillColor: Colors.blue[200],
filled: true,
hintText: '텍스트 입력',
),
),
),
//보내기 버튼
IconButton(
onPressed: sendText,
icon: const Icon(
Icons.send_sharp,
size: 40,
),
)
],
),
);
}
}
|
cs |
여기서 _textInput을 따로 빼내어 코드를 깔끔하게 만들거나,
_textInput 안의 TextField를 더욱 쉽게 커스텀 할 수 있게 만들 수 있다.
Ex)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import 'package:flutter/material.dart';
class MyTextField extends StatelessWidget {
final TextEditingController controller;
final String hintText;
final bool obscureText;
const MyTextField({
super.key,
required this.controller,
required this.hintText,
required this.obscureText,
});
@override
Widget build(BuildContext context) {
return TextField(
controller: controller,
obscureText: obscureText,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.shade200),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
filled: true,
fillColor: Colors.white,
hintText: hintText,
hintStyle: const TextStyle(color: Colors.grey),
),
);
}
}
|
cs |
좀 더 정확히 보고싶으면 https://github.com/jsjin7371/ChatApp/tree/main/lib 참고
728x90
'코딩 > Flutter' 카테고리의 다른 글
| TextField 사용 시 Overflow 발생 해결 방안 (0) | 2023.09.13 |
|---|---|
| Flutter로 Midi 입력(피아노 등)을 받는 앱 만들기 (0) | 2023.08.17 |
