1. 값 받기 기능 구현
기존 html의 input 태그처럼 값을 입력하고 받아 사용하는 간단한 예제입니다.
클릭하면 전체 코드를 확인할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
LoginPage({super.key});
final username = TextEditingController();
final userPW = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: ListView(
children: [
TextFormField(
controller: username,
),
TextFormField(
controller: userPW,
),
ElevatedButton(
onPressed: () {
fetch(username.text.trim(), userPW.text.trim()); // trim() : 공백 문자 삭제
},
child: Text("로그인")),
],
),
);
}
}
void fetch(String username, String userPW) {
print("${username}과 ${userPW}를 전송하였습니다.");
}
TextEditingController
TextEditingController는 Flutter에서 제공하는 클래스입니다. 이 클래스는 텍스트 필드를 제어하고, 텍스트 필드의 값이나 상태를 관리하는 데 사용됩니다.
TextField또는TextFormField와 함께 사용되며, 텍스트 입력 필드의 값을 읽거나 수정할 수 있습니다. 예를 들어, 사용자 입력을 가져오거나 초기 값을 설정할 때 유용합니다.
TextFormField(controller: username)
TextFormField는 Flutter에서 텍스트 입력을 위한 위젯입니다. 폼(Form)과 함께 사용되며, 입력된 텍스트에 대해 검증(validation) 기능을 제공합니다.
- 사용자로부터 텍스트 입력을 받을 때 사용되며,
TextEditingController를 사용하여 입력된 값을 제어할 수 있습니다. 여기서controller속성에username이라는 컨트롤러를 설정하여TextFormField의 값을 관리합니다.
username.text.trim()
- TextFormField에 입력한 값을 가져올 때 사용하는 메서드입니다.
trim()은 Dart의 문자열 메서드로, 문자열의 앞뒤 공백을 제거합니다.
요약
final username = TextEditingController();와 같이 텍스트 필드를 제어하기 위해TextEditingController인스턴스를 생성합니다.
TextFormField(controller: username)와 같이TextFormField의controller속성에 생성한 컨트롤러를 할당합니다.
username.text.trim()메서드를 통해 입력된 텍스트의 앞뒤 공백을 제거한 값을 사용합니다.
값 받기 심화 예제
위의 예제에서 TextFormField를 재사용 할 수 있도록 위젯으로 분리한 내용입니다. (약간의 데코레이션 포함)
클릭하면 전체 코드를 확인할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
LoginPage({super.key});
String? username;
final password = TextEditingController();
final email = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: ListView(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
onChanged: (value) {
username = value;
},
),
),
CustomInput(password, "패스워드를 입력하세요", obsecure: true),
CustomInput(email, "이메일을 입력하세요"),
ElevatedButton(
onPressed: () {
fetch(username!.trim(), password.text.trim());
},
child: Text("로그인"),
),
],
),
],
),
);
}
}
class CustomInput extends StatelessWidget {
CustomInput(this.controller, this.hint, {this.obsecure = false});
final controller;
final hint;
final obsecure;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: controller,
obscureText: obsecure,
decoration: InputDecoration(
hintText: "${hint}",
suffixIcon: Icon(Icons.password),
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
),
),
);
}
}
void fetch(String username, String password) {
print("$username과 $password를 전송하였습니다");
}- username만 필드 구성이 다른 이유는 TextEditingController 클래스를 사용하지 않고도 값을 받을 수 있는 예제를 구성하기 위함입니다.
출력 이미지
- 위의 이미지와 같이 텍스트를 입력한 뒤 로그인 버튼을 누르면
- 입력한 값이 콘솔 창에 출력 되는 것을 확인할 수 있습니다.
2. 페이지 이동 기능 구현
클릭하면 전체 코드를 확인할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: "/login", // 첫 페이지 설정
routes: {
"/login": (context) => LoginPage(),
"/home": (context) => HomePage(),
},
);
}
}
class LoginPage extends StatelessWidget {
LoginPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("LoginPage")),
body: Align(
alignment: Alignment(0, 0), // -1, -1 ~~ 1, 1 까지 범위 지정 가능
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, "/home");
//Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage())); 내가 직접 new 하면서 페이지를 넘기고 싶을 때
},
child: Text("로그인"))),
);
}
}
class HomePage extends StatelessWidget {
HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("HomePage")),
body: Align(
alignment: Alignment(0, 0), // -1, -1 ~~ 1, 1 까지 범위 지정 가능
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("돌아가기"))),
);
}
}
1. initialRoute: "/login"
- 설명: Flutter의
MaterialApp또는CupertinoApp위젯의 속성으로, 애플리케이션이 시작될 때 처음으로 표시할 경로를 설정합니다.
- 용도: 애플리케이션이 시작되면
/login경로에 해당하는LoginPage위젯이 첫 화면으로 표시됩니다.
2. routes
- 설명: 애플리케이션 내에서 사용되는 모든 경로와 해당하는 위젯을 정의하는 속성입니다. 경로는 문자열로 지정되고, 각 경로에 대한 빌더 함수는 해당 경로가 활성화될 때 호출됩니다.
- 용도: 경로를 통해 네비게이션할 수 있도록 설정합니다. 예를 들어,
/login경로는LoginPage위젯을,/home경로는HomePage위젯을 표시합니다.
3. alignment: Alignment(0, 0)
- 설명: Flutter의
Alignment클래스를 사용하여 위젯의 정렬을 설정합니다.Alignment(x, y)형식으로 사용하며,x와y값은 -1.0에서 1.0까지의 범위를 가집니다.
- 용도: 위젯을 컨테이너 안에서 특정 위치에 배치할 때 사용됩니다.
Alignment(0, 0)은 컨테이너의 중심에 위젯을 배치합니다.
4. Navigator.pushNamed(context, "/home")
- 설명: 네비게이터 스택에 새로운 페이지를 푸시하는 메서드입니다. 지정된 경로(
/home)로 네비게이션하여 해당 경로에 매핑된 위젯을 표시합니다.
- 용도: 새로운 화면으로 이동할 때 사용됩니다. 예를 들어, 현재 화면에서
HomePage로 이동합니다.
5. Navigator.pop(context)
- 설명: 네비게이터 스택의 맨 위에 있는 페이지를 제거하고, 이전 페이지로 되돌아갑니다.
- 용도: 현재 화면을 닫고 이전 화면으로 돌아갈 때 사용됩니다.
참고 : 페이지는 스택 형식으로 쌓입니다.
출력 이미지
- 기본 화면은 로그인 페이지이며, 로그인 버튼을 누르게 되면 아래의 화면으로 이동하게 됩니다.
- 홈 화면에서 돌아가기 버튼을 누르면 다시 로그인 화면으로 돌아갈 수 있습니다.
Share article