How To Create Text Field Input With Label Using Flutter

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

I am making a form with several text fields. I need to have a label above each field displayed.I don't want to have to click in the field to show the text above each field. They need to be fixed. Using label text, the label only shows when the user clicks in the field, I need that to be fixed.

How To Create Text Field Input With Label Using Flutter

Text Field Input With Label
Complete Code For Text Field Input With Label In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightGreen[900],
        title: Text('Label Input Field'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25.0),
          child: TextField(
            controller: _textFieldController,
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                borderSide: BorderSide(color: Colors.black26),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(12.0)),
                borderSide: BorderSide(color: Colors.grey),
              ),
              contentPadding: EdgeInsets.all(15),
              labelText: "This is the Label",
              labelStyle: TextStyle(
                color: Colors.lightGreen[900],
                fontSize: 15.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Related Post