flutter form 제출 및 라우터 이동

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 데이터를 저장하고, 성공 페이지로 이동하는 일반적인 방법을 설명합니다. 이를 통해 사용자로부터 입력을 받고, 입력된 데이터를 다음 페이지로 전달하여 표시할 수 있습니다.