Flutter Basit Form Uygulaması

Flutter Basit Form Uygulaması

1.Yeni bir proje oluşturalım.

import 'package:flutter/material.dart';void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Column(
children: [
],
),
),
),
);
}
}

2.Key için değişken oluşturalım.

var formKey = GlobalKey<FormState>();

3.Form widgetini çağırıp key verelim.

return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Column(
children: [
Form( //<=== FORM WIDGET
key: formKey,//<=== KEY
)
],
),
),
),
);
}
}

4.Textformfield kontrolleri için TextEditingController ekleyelim.

var formKey = GlobalKey<FormState>();
var tfKullaniciAdi = TextEditingController();
var tfSifre = TextEditingController();

5.Formumuza TextFormField ekleyelim.

return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Column(
children: [
Form(
key: formKey,
child: Column(
children: [
TextFormField( //<== !!!

),
TextFormField( //<== !!!

),

],
),
)
],
),
),
),
);
}
}

6.Textformfield controller ekleyelim

TextFormField(
controller: tfKullaniciAdi,
.....
TextFormField(
controller: tfKullaniciAdi,
decoration: InputDecoration(hintText: 'KULLANINICI ADI'),
......

7. Textformfiel validator kullanımı

TextFormField(
controller: tfKullaniciAdi,
decoration: InputDecoration(hintText: 'KULLANINICI ADI'),

validator: (tfgirdisi) { //<==!!!!!
if (tfgirdisi.isEmpty) {//<=== !!! Textformfield boş mu
return 'KULLANICI ADI GİRİNİZ';
}
return null; //<== eğer bir sorun devam etmesini sağlıyoruz
},
),

8.Şifre textformfield kontrolleri

TextFormField(
controller: tfSifre,
obscureText: true, // <== KARAKTERLERİ ŞİFRELİYOR: ***
decoration: InputDecoration(hintText: 'ŞİFRE'),
validator: (tfgirdisi) {
if (tfgirdisi.isEmpty) { //<== boş mu dolu mu
return 'ŞİFRENİZİ GİRİNİZ';
}
if (tfgirdisi.length < 6) { //<= girilen metnin karakter sayısı altıdan küçükse hata veriyor
return 'ŞİFRENİZ EN AZ 6 HANELİ OLMALIDIR';
}
return null;
},
),

9.Butona basınca kontrollerin çalışması

RaisedButton(
child: Text('GİRİŞ'),
onPressed: (){
bool kontrolSonucu = formKey.currentState.validate(); // <== form valid ise geçerli yani true değerini alır değilse false değerini alır
if(kontrolSonucu){ //<== kontrol sonucu true ise konsola bilgileri yazdırır değilse controller çalışır hatayı ekranda gösterir
String kullaniciAdi = tfKullaniciAdi.text;
String sifre = tfSifre.text;
print('kullanıcı adı: $kullaniciAdi -Sifre: $sifre');
}
},
)

Uygulamanın ekran görüntüsü

TÜM KODLAR

import 'package:flutter/material.dart';void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
var formKey = GlobalKey<FormState>();
var tfKullaniciAdi = TextEditingController();
var tfSifre = TextEditingController();

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: Center(
child: Column(
children: [
Form(
key: formKey,
child: Column(
children: [
TextFormField(
controller: tfKullaniciAdi,
decoration: InputDecoration(hintText: 'KULLANINICI ADI'),

validator: (tfgirdisi) {
if (tfgirdisi.isEmpty) {
return 'KULLANICI ADI GİRİNİZ';
}
return null;
},
),
TextFormField(
controller: tfSifre,
obscureText: true,
decoration: InputDecoration(hintText: 'ŞİFRE'),
validator: (tfgirdisi) {
if (tfgirdisi.isEmpty) {
return 'ŞİFRENİZİ GİRİNİZ';
}
if (tfgirdisi.length < 6) {
return 'ŞİFRENİZ EN AZ 6 HANELİ OLMALIDIR';
}
return null;
},
),
RaisedButton(
child: Text('GİRİŞ'),
onPressed: (){
bool kontrolSonucu = formKey.currentState.validate();
if(kontrolSonucu){
String kullaniciAdi = tfKullaniciAdi.text;
String sifre = tfSifre.text;
print('kullanıcı adı: $kullaniciAdi -Sifre: $sifre');
}
},
)
],
),
)
],
),
),
),
);
}
}
//main.dart

--

--

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AbdullahTaş

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER