Flutter Floating Label TextField - Animate Hint & Label

Floating label TextField is different than normal TextInput in flutter. In Floating label TextField both Label and Hint animates. In default condition label display inside TextField and when user focus on TextField than label moves to top side of TextField with animation and hint start showing until user types.

Live Screenshot:

Flutter Floating Label TextField - Animate Hint & Label

1. Creating TextField with floating label.

TextField(
            controller: textInputName,
            autocorrect: true,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter Name Here',
              hintText: 'Type Here...',
            ),
            autofocus: false,
          )

Source code for main.dart file:

import 'package:flutter/material.dart';

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

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

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

class App extends StatefulWidget {
  const App({super.key});
  @override
  AppState createState() => AppState();
}

class AppState extends State < App > {
  final textInputName = TextEditingController();

  String output = '';

  getInput() {
    setState(() {
      output = textInputName.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Center(
                child: Column(children: < Widget >[
      Text("Typed Text is = $output", style: const TextStyle(fontSize: 24)),
      Container(
          margin: const EdgeInsets.all(18),
          child: TextField(
            controller: textInputName,
            autocorrect: true,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter Name Here',
              hintText: 'Type Here...',
            ),
            autofocus: false,
          )),
      ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.green,
        ),
        onPressed: getInput,
        child: const Text('Get TextField Value'),
      ),
    ]))));
  }
}