TextField
, kullanıcıdan metin girişi almak için kullanılan bir bileşendir. Flutter’da TextField
bileşenini kullanarak kullanıcıdan metin girişi alabilir ve girilen metni işleyebilirsiniz.
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
TextEditingController _textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘TextField Example’,
home: Scaffold(
appBar: AppBar(
title: Text(‘TextField Example’),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: TextField(
controller: _textEditingController,
decoration: InputDecoration(
labelText: ‘Enter your name’,
border: OutlineInputBorder(),
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
String enteredText = _textEditingController.text;
print(‘Entered text: $enteredText’);
},
child: Icon(Icons.check),
),
),
);
}
}
TextField
‘ın controller
özelliğine bir TextEditingController
atanmıştır. TextEditingController
, TextField
‘a girilen metni kontrol etmek ve erişmek için kullanılır.
TextField
‘ın decoration
özelliği ile görüntüsü özelleştirilmiştir. InputDecoration
sınıfı kullanılarak bir etiket (labelText
) ve bir kenarlık (border
) belirtilmiştir. border
özelliği OutlineInputBorder()
ile tanımlanmıştır.
Örnekte, TextField
bileşeni bir Padding
bileşeni ile sarmalanmıştır. Bu, bileşene kenar boşlukları eklemek için kullanılan bir yöntemdir.
Scaffold
bileşenine bir floatingActionButton
eklenmiştir. Bu düğme, TextField
‘a girilen metni almak için kullanılır. Düğmeye tıklandığında _textEditingController.text
ile TextField
‘a girilen metin alınır ve konsola yazdırılır.
Bu örnek, temel olarak TextField
‘ın nasıl kullanılacağını göstermektedir. İsteğinize bağlı olarak TextField
‘ı daha fazla özelleştirebilir ve girilen metni işlemek için farklı yöntemler kullanabilirsiniz.
Bu Yazıya Tepkin Ne Oldu ?
YORUMLAR