🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / input widgetler TextField vs

1-) FLUTTER - input widgetler TextField vs

 

****  TEXTFORMFİELD KULLANIMI ****

 

 

child: Material(
  elevation:
7,
  shape:
RoundedRectangleBorder(
      borderRadius:
BorderRadius.all(
        
Radius.circular(15.0),)),
  child:
Padding(
    padding:
EdgeInsets.only(left: 10),
    child:
TextFormField(
      
// initialValue: "Rambo",
      
style: TextStyle(
          fontSize:
17, fontWeight: FontWeight.bold),
      keyboardType:
TextInputType.number,
      decoration:
InputDecoration(
        labelText:
"Oda Numaranızı Giriniz",

        border: InputBorder.none,
        labelStyle:
TextStyle(fontSize: 13),
      ),
    ),
  ),
),

 

 

 

 

 

 

 

 

 

 

email_validator: '^2.0.1'

import 'package:email_validator/email_validator.dart';

 

import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';

class TextFormFieldPage extends StatefulWidget {
  
const TextFormFieldPage({Key? key}) : super(key: key);

  
@override
  
_TextFormFieldPageState createState() => _TextFormFieldPageState();
}

class _TextFormFieldPageState extends State<TextFormFieldPage> {
  
String _mail = "";
  
final _globalKey = GlobalKey<FormState>();

  
@override
  
Widget build(BuildContext context) {
    
return Container(
      child:
Padding(
        padding:
EdgeInsets.all(16),
        child:
Center(
          child:
Form(
            key:
_globalKey,
            autovalidateMode:
AutovalidateMode.always,
            child:
Column(
              children: [
                
TextFormField(
                  
// initialValue: "Rambo",
                  
onSaved: (deger) {
                    
_mail = deger!;
                  },
                  keyboardType:
TextInputType.emailAddress,
                  decoration:
InputDecoration(
                    errorStyle:
TextStyle(color: Colors.orange),
                    labelText:
"username",
                    hintText:
"userhinttex",
                    border:
OutlineInputBorder(),
                  ),
                  validator: (deger) {

     if(deger!.isEmpty){
                      
return "mail boş olamaz";
                  }
else if (!EmailValidator.validate(deger!)) {
                      
return "geçersiz mail";
                    }
else {
                      
return null;
                    }
                  },
                ),
                
ElevatedButton(
                    onPressed: () {
                      
bool _validate = _globalKey.currentState!.validate();
                      
if (_validate) { // tüm kontroller doğruysa demek
                        
_globalKey.currentState!.save();

                        
String sonuc = "mail : "+_mail;
                        print(
sonuc);

// işlemler bitince temizlemek için

         _globalKey.currentState!.reset();


                      }
                    },
                    child:
Text("Onayla"))
              ],
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

 

**** TEXTFİELD KULLANIMI ****

 

class _TextFieldPageState extends State<TextFieldPage> {
  
late TextEditingController _emailController;

  
@override
  
void initState() {
    
super.initState();
    
_emailController = new TextEditingController(text: "rambo@gmail.com");
  }

 

@override
void dispose() {
  
_emailController.dispose(); // sayfa kapandıgında yoket
  
super.dispose();
}

 

Padding(
  padding:
EdgeInsets.all( 15),
  child:
TextField(

    controller: _emailController,

    keyboardType: TextInputType.number,// sadece sayı girilebilir
    
textInputAction: TextInputAction.next,// okey butonunu sağ ok işareti yapar
    
autofocus: true, // direkt bu seçili gelir
    
maxLength: 20, // en fazla 20 karakter girilir demek
    
onChanged: (String deger){ // text değiştiği anda son hali tetiklenir
      
print(deger);
    },
    onSubmitted: (
String deger){ // ileri ok buttonuna basınca demek
      
print("submit : "+deger);
    },
    decoration:
InputDecoration(
      labelText:
"Ad", // üstte küçük label oluşturur
      
prefixIcon: Icon(Icons.email), // textin başındaki icon
      
border: OutlineInputBorder(
        borderRadius:
BorderRadius.all(Radius.circular(18.0))
      ),
    ),
  ),
)

 

ElevatedButton(
  onPressed: () {
    print(
_emailController.text);
    setState(() {
      
_emailController.text = "yeni@gmail.com";
    });
  },
  child:
Text("Veri al/yaz"),
)

 

 

****DİĞER FocusNode üzerine gelince şunu yap dedik****

class _TextFieldPageState extends State<TextFieldPage> {
  
late TextEditingController _emailController;
  
late FocusNode _focusNode;

  
int maxLineCount =1;
  
@override
  
void initState() {
    
super.initState();
    
_emailController = new TextEditingController(text: "rambo@gmail.com");
    
_focusNode = new FocusNode();
    
_focusNode.addListener(() {
      setState(() {
        
if(_focusNode.hasFocus){
          
maxLineCount=3;
        }
else{
          
maxLineCount=1;
        }

      });
    });
  }

 

child: TextField(
  focusNode:
_focusNode,
  maxLines:
maxLineCount,

  ...

 

****DİĞER1****

Padding(
  padding:
EdgeInsets.all( 15),
  child:
TextField(
    keyboardType:
TextInputType.number,// sadece sayı girilebilir
    
textInputAction: TextInputAction.next,// okey butonunu sağ ok işareti yapar
    
autofocus: true, // direkt bu seçili gelir
    //maxLines: 3, // 3 satırlık genişler
    
maxLength: 20, // en fazla 20 karakter girilir demek
    
onChanged: (String deger){ // text değiştiği anda son hali tetiklenir
      
print(deger);
    },
    onSubmitted: (
String deger){ // ileri ok buttonuna basınca demek
      
print("submit : "+deger);
    },
    decoration:
InputDecoration(
      labelText:
"Ad", // üstte küçük label oluşturur
     // hintText: "Adınızı giriniz", // bildiğimiz hint
      //icon: Icon(Icons.add)
      
prefixIcon: Icon(Icons.email), // textin başındaki icon
      
suffixIcon: Icon(Icons.access_alarm), // textin en sağındaki icon
      
border: OutlineInputBorder(
        borderRadius:
BorderRadius.all(Radius.circular(18.0))
      ),
     
// filled: true, // iç rengini değiştirmek için true yaparız
     // fillColor: Colors.orange // iç rengini değiştirir
    
),

  ),
),

 

 2022 Nisan 07 Perşembe
 383