Flutter에서 Form 데이터를 저장하고 성공 페이지로 이동하는 과정은 다음과 같습니다.
이를 위해 Form, TextFormField, Navigator 등을 사용합니다.
단계별 설명
1. Form 생성: 사용자로부터 입력을 받을 Form을 생성합니다.
2. Form 데이터 저장: 사용자가 입력한 데이터를 저장합니다.
3. 성공 페이지로 이동: 데이터가 성공적으로 저장되면 성공 페이지로 이동합니다.
전체 코드 예제
1. main.dart 파일
main.dart 파일에서는 초기 화면을 설정하고, 라우트를 정의합니다.
import 'package:flutter/material.dart';
import 'form_page.dart';
import 'success_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => MyHomePage(),
'/success': (context) => SuccessPage(),
},
);
}
}2. form_page.dart 파일
form_page.dart 파일에서는 Form을 정의하고, 데이터를 저장한 후 성공 페이지로 이동합니다.
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _key = GlobalKey<FormState>();
late String _username, _email;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Form Page"),
),
body: Container(
padding: const EdgeInsets.all(15),
child: Form(
key: _key,
child: Column(
children: [
usernameInput(),
const SizedBox(height: 15),
emailInput(),
const SizedBox(height: 15),
submitButton()
],
),
),
),
);
}
Widget usernameInput() {
return TextFormField(
autofocus: true,
validator: (val) {
if (val == null || val.isEmpty) {
return 'The input is empty';
} else {
return null;
}
},
onSaved: (username) => _username = username ?? '',
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Input your username',
labelText: 'username',
labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
);
}
Widget emailInput() {
return TextFormField(
autofocus: true,
validator: (val) {
if (val == null || val.isEmpty) {
return 'The input is empty';
} else {
return null;
}
},
onSaved: (email) => _email = email ?? '',
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Input your email address',
labelText: 'email address',
labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
);
}
Widget submitButton() {
return ElevatedButton(
onPressed: () {
if (_key.currentState!.validate()) {
_key.currentState!.save();
Navigator.pushNamed(
context,
'/success',
arguments: {'username': _username, 'email': _email},
);
}
},
child: Container(
padding: const EdgeInsets.all(15),
child: const Text('Submit'),
),
);
}
}3. success_page.dart 파일
success_page.dart 파일에서는 성공적으로 데이터를 저장한 후 이동하는 페이지를 정의합니다.
import 'package:flutter/material.dart';
class SuccessPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Map<String, String> args =
ModalRoute.of(context)!.settings.arguments as Map<String, String>;
return Scaffold(
appBar: AppBar(
title: const Text("Success Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Username: ${args['username']}"),
Text("Email: ${args['email']}"),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back to Home'),
),
],
),
),
);
}
}주요 단계 설명
1. Form 위젯 사용: Form 위젯을 사용하여 사용자 입력을 받습니다. GlobalKey<FormState>를 사용하여 Form의 상태를 관리합니다.
2. Validator 및 onSaved 사용: TextFormField 위젯의 validator 속성을 사용하여 입력 검증을 수행하고, onSaved 속성을 사용하여 데이터를 저장합니다.
3. Navigator 사용: Navigator.pushNamed를 사용하여 성공 페이지로 이동합니다. 이때 arguments를 사용하여 입력된 데이터를 성공 페이지로 전달합니다.
4. 성공 페이지에서 데이터 표시: 성공 페이지에서 ModalRoute.of(context)!.settings.arguments를 사용하여 전달된 데이터를 받아 표시합니다.
요약
이 과정은 Flutter에서 Form 데이터를 저장하고, 성공 페이지로 이동하는 일반적인 방법을 설명합니다. 이를 통해 사용자로부터 입력을 받고, 입력된 데이터를 다음 페이지로 전달하여 표시할 수 있습니다.
'프론트엔드 > Flutter' 카테고리의 다른 글
| flutter scrollview pagination 예제 및 정리 (2) | 2024.07.22 |
|---|---|
| flutter mvvm 패턴 정리 및 예제 (0) | 2024.07.22 |
| flutter webview 사용방법 (0) | 2024.07.22 |
| flutter local notifications - 알림 (0) | 2024.07.22 |
| flutter get_it 패턴 (1) | 2024.07.22 |
