How to make TextField's label wont move when out of focus in Flutter

Question

I'm new to flutter.

I'm trying to replicate the following UI, it has multiple TextField and all of their labels won't maximize when I click on other TextField, they keep on focus to show the content inside it: https://i.sstatic.net/8lUeV.png

The UI I made: https://i.sstatic.net/o9Rpj.png

I tried the autofocus: on but it didn't work cuz it only work for one TextField at a time.

My code:

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';

class EmployeeProfile extends StatefulWidget {
  const EmployeeProfile({Key? key, required this.user}) : super(key: key);

  final User user;

  @override
  _EmployeeProfileState createState() => _EmployeeProfileState();
}

class _EmployeeProfileState extends State<EmployeeProfile> {

  late String name = '';
  late String email = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.blue])),
              height: MediaQuery.of(context).size.height * 0.3
          ),
          Card(
              elevation: 20.0,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(50),
                  topRight: Radius.circular(50),
                ),
              ),
              margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
              child: ListView(
                children: <Widget>[
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        name = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Name',
                        hintText: widget.user.name,
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        email = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Email',
                        hintText: widget.user.email,
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  TextButton(
                      onPressed: (){
                        print(widget.user.name);
                        print(widget.user.email);
                        setState(() {
                          widget.user.name = name;
                          widget.user.email = email;
                        });
                      },
                      child: const Text('Save'),
                  ),
                ],
              )
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: AppBar(// Add AppBar here only
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text(
                widget.user.name.toString(),
                style: const TextStyle(
                  letterSpacing: 0.0,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

P/s: sr im not really good at English to describe it correctly

Answer 1

Label will be visible if you focus on the TextField or TextField has content. If what you mean is keeping the label always be visible, you can add floatingLabelBehavior: FloatingLabelBehavior.always on InputDecoration.

import 'dart:core';
import 'package:flutter/material.dart';
import 'package:login_sample/models/user.dart';

class EmployeeProfile extends StatefulWidget {
  const EmployeeProfile({Key? key, required this.user}) : super(key: key);

  final User user;

  @override
  _EmployeeProfileState createState() => _EmployeeProfileState();
}

class _EmployeeProfileState extends State<EmployeeProfile> {

  late String name = '';
  late String email = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.bottomCenter,
                      colors: [Colors.blue, Colors.blue])),
              height: MediaQuery.of(context).size.height * 0.3
          ),
          Card(
              elevation: 20.0,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(50),
                  topRight: Radius.circular(50),
                ),
              ),
              margin: const EdgeInsets.only(left: 0.0, right: 0.0, top: 100.0),
              child: ListView(
                children: <Widget>[
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        name = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Name',
                        hintText: widget.user.name,
                        // add here
                        floatingLabelBehavior: FloatingLabelBehavior.always 
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  SizedBox(
                    child: TextField(
                      autofocus: true,
                      onChanged: (val){
                        email = val;
                      },
                      decoration: InputDecoration(
                        contentPadding: const EdgeInsets.all(10.0),
                        labelText: 'Employee Email',
                        hintText: widget.user.email,
                        // add here
                        floatingLabelBehavior: FloatingLabelBehavior.always
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 107, 106, 144),
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                        border: OutlineInputBorder(
                          borderSide: const BorderSide(color: Color.fromARGB(255, 107, 106, 144), width: 2),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                    width: 150.0,
                  ),
                  TextButton(
                      onPressed: (){
                        print(widget.user.name);
                        print(widget.user.email);
                        setState(() {
                          widget.user.name = name;
                          widget.user.email = email;
                        });
                      },
                      child: const Text('Save'),
                  ),
                ],
              )
          ),
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: AppBar(// Add AppBar here only
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text(
                widget.user.name.toString(),
                style: const TextStyle(
                  letterSpacing: 0.0,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

Try below code hope its helpful to you. add your ListView() inside Padding

    Padding(
          padding: EdgeInsets.all(20),
          child: ListView(
            children: <Widget>[
              SizedBox(
                child: TextField(
                  autofocus: true,
                  onChanged: (val) {},
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(10.0),
                    labelText: 'Employee Name',
                    hintText: 'widget.user.name',
                    labelStyle: const TextStyle(
                      color: Color.fromARGB(255, 107, 106, 144),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(
                          color: Color.fromARGB(255, 107, 106, 144),
                          width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),
                width: 150.0,
              ),
              SizedBox(
                height: 20,
              ),
              SizedBox(
                child: TextField(
                  autofocus: true,
                  onChanged: (val) {},
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(10.0),
                    labelText: 'Employee Email',
                    hintText: 'widget.user.email',
                    labelStyle: const TextStyle(
                      color: Color.fromARGB(255, 107, 106, 144),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(
                          color: Color.fromARGB(255, 107, 106, 144),
                          width: 2),
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),
                width: 150.0,
              ),
              TextButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),

Your Screen->