TextField Widget in Flutter

Zia

3 Followers

Aug 21, 2024

4 sec read

803

It accepts alphanumeric input data (such as username, password, product price, publication year, and so on) from the keyword into the application. It is important to note that, by default, the content of the widget is decorated with underlines and it is possible to change the widget's behavior using extra decoration options.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Styled TextField Example'),

body: TextField(

decoration: InputDecoration(

hintText: 'Enter your name',

hintStyle: TextStyle(color: Colors.grey, fontSize: 16),

border: OutlineInputBorder(

borderRadius: BorderRadius.circular(10.0),

borderSide: BorderSide(

color: Colors.blue,

width: 2.0,

focusedBorder: OutlineInputBorder(

borderRadius: BorderRadius.circular(10.0),

borderSide: BorderSide(

color: Colors.green,

width: 2.0,

style: TextStyle(color: Colors.black, fontSize: 18),

);

}

TextField Widget in Flutter - User Input Widgets - Flutter Tutorial

Flutter Widgets TextField Widget TextField Widget in Flutter user input widgets Flutter textfield input field in flutter

Published by:

3 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.