TextField in Flutter





import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyFieldTutorial(),
    title: "TextField Tutorial",
  ));
}

class MyFieldTutorial extends StatefulWidget {
  @override
  _MyFieldTutorialState createState() => _MyFieldTutorialState();
}

class _MyFieldTutorialState extends State<MyFieldTutorial> {
  TextEditingController tname = TextEditingController();
  TextEditingController temail = TextEditingController();
  TextEditingController tpass = TextEditingController();
  var _key = GlobalKey<FormState>();
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField Tutorial"),
      ),
      body: Container(
        child: Column(
          children: [
            SizedBox(
              height: 20,
            ),
            Text(
              "TextFormField Example Here",
              style: TextStyle(fontSize: 25),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              margin: EdgeInsets.only(left: 20, right: 20),
              child: TextField(
                decoration: InputDecoration(
                  hintText: "Enter Name",
                  labelText: "Enter Name",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                  prefixIcon: Icon(Icons.edit),
                ),
                keyboardType: TextInputType.text,
                controller: tname,
              ),
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  if (tname.text.isEmpty) {
                    print("please enter name");
                  } else {
                    print(tname.text);
                  }
                },
                child: Text("Submit Here")),
            SizedBox(
              height: 20,
            ),
            Text(
              "TextFormField Example Here",
              style: TextStyle(fontSize: 25),
            ),
            SizedBox(
              height: 20,
            ),
            Form(
                key: _key,
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(
                        left: 20,
                        right: 20,
                      ),
                      child: TextFormField(
                        validator: (value) =>
                            (value.isEmpty) ? "please enter email" : null,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.edit),
                          labelText: "Enter Email",
                          hintText: "Enter Email",
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                        ),
                        controller: temail,
                        keyboardType: TextInputType.emailAddress,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Container(
                      margin: EdgeInsets.only(
                        left: 20,
                        right: 20,
                      ),
                      child: TextFormField(
                        obscureText: visible,
                        obscuringCharacter: '@',
                        validator: (value) =>
                            (value.isEmpty) ? "please enter password" : null,
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.edit),
                          labelText: "Enter password",
                          hintText: "Enter password",
                          suffixIcon: IconButton(
                            icon: Icon((visible)
                                ? Icons.visibility_off
                                : Icons.visibility),
                            onPressed: () {
                              setState(() {
                                visible = (visible) ? false : true;
                              });
                            },
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                        ),
                        controller: tpass,
                        keyboardType: TextInputType.text,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    ElevatedButton(
                        onPressed: () {
                          if (_key.currentState.validate()) {
                            print(temail.text);
                            print(tpass.text);
                            _key.currentState.reset();
                          }
                        },
                        child: Text("Submit Here")),
                  ],
                )),
          ],
        ),
      ),
    );
  }
}

No comments: