Özet - TextFormField

TextFormField ve controller'ı birleştirerek giriş formu yaparsın.

Üç parçayı birleştir

Bir giriş formu yapmak için üç parçayı birleştirirsin: TextFormField widget'ı, TextEditingController (girdiyi yönetmek için) ve InputDecoration (etiket ve ipucu için). Controller, State içinde oluşturulup dispose edilir ve TextFormField'a bağlanır. Decoration da aynı alana verilir.

TextFormField(
  controller: controller,
  decoration: InputDecoration(
    labelText: 'Ad',
  ),
)

Uygulama Giriş formu yap

kayit adında bir fonksiyon yaz; çağrılınca Kayit yazdırsın. main içinde kayit'i çağır. KayitFormu adında bir StatefulWidget yaz; State içinde bir TextEditingController oluştur, dispose et ve bir TextFormField'a controller ve decoration olarak bağla. labelText 'Ad' olsun.

Örnek çözümü göster

import 'package:flutter/material.dart';

void kayit() {
  print('Kayit');
}

void main() {
  kayit();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: KayitFormu(),
        ),
      ),
    );
  }
}

class KayitFormu extends StatefulWidget {
  const KayitFormu({super.key});

  @override
  State<KayitFormu> createState() => _KayitFormuState();
}

class _KayitFormuState extends State<KayitFormu> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      decoration: InputDecoration(
        labelText: 'Ad',
      ),
    );
  }
}

Kendini test et

Bir giriş formu için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- Column + Row + SizedBox
- Text + Padding + Center
- TextFormField + TextEditingController + InputDecoration
Cevabı göster

TextFormField + TextEditingController + InputDecoration — Giriş formu için TextFormField (giriş widget'ı), TextEditingController (girdiyi denetleme) ve InputDecoration (etiket ve ipucu) birlikte kullanılır.

decoration parametresini ekle

TextFormField(
  controller: myController,
  ____: InputDecoration(
    labelText: 'Ad',
  ),
)

Cevabı göster

TextFormField(
  controller: myController,
  decoration: InputDecoration(
    labelText: 'Ad',
  ),
)

Form özeti

TextFormField

Metin girişi widget'ı
TextEditingController

Girdiyi denetleyen sınıf
InputDecoration

Etiket ve ipucu sağlar
dispose

Controller'ı temizler

Sıradaki ders: Proje iskeleti

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler