Flutter 질감 디자인 의 폼 입력

FormField 컨트롤 은 단일 폼 필드 입 니 다.이 컨트롤 은 폼 필드 의 현재 상 태 를 유지 하고 인증 오 류 를 UI 에서 볼 수 있 도록 합 니 다.TextField 컨트롤 은 FormField 에 Input 컨트롤(뒤의 글 설명)을 포장 한 것 입 니 다.FormField 는 입력 한 현재 값 을 관리 하지 않 아 도 됩 니 다.한 번 에 저장 하거나 리 셋 하거나 여러 필드 를 검증 하기 쉽 습 니 다.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
 @override
 _MyApp createState() => new _MyApp();
}

class _MyApp extends State<MyApp> {

 String _lastName;
 String _firstName;
 GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

 void _showMessage(String name) {
  showDialog<Null>(
   context: context,
   child: new AlertDialog(
    content: new Text(name),
    actions: <Widget>[
     new FlatButton(
      onPressed: () {
       Navigator.pop(context);
      },
      child: new Text('  ')
     )
    ]
   )
  );
 }

 @override
 Widget build(BuildContext context) {
  return new Scaffold(
   appBar: new AppBar(
    title: new Text('    ')
   ),
   // Form：                 
   body: new Form(
    key: _formKey,
    child: new Column(
     children: <Widget> [
      // TextFieldd：         ，          FormField   
      new TextField(
       labelText: '  ',
       // onSaved：   Form.save()          
       onSaved: (InputValue value) {
        _lastName = value.text;
       }
      ),
      new TextField(
       labelText: '  ',
       onSaved: (InputValue value) {
        _firstName = value.text;
       }
      ),
      new Row(
       children: <Widget> [
        new RaisedButton(
         child: new Text('  '),
         onPressed: () {
          // reset()：  Form    TextField       
          _formKey.currentState.reset();
          _showMessage('        ');
         }
        ),
        new RaisedButton(
         child: new Text('  '),
         onPressed: () {
          // save()：  Form    TextField
          _formKey.currentState.save();
          _showMessage('     '+_lastName+_firstName);
         }
        )
       ]
      )
     ]
    )
   )
  );
 }
}

void main() {
 runApp(new MaterialApp(
  title: 'Flutter Demo',
  home: new MyApp()
 ));
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.