How to make a TextField with HintText but no Underline in Flutter?

In Flutter, creating a TextField with hintText but without the underline can be achieved by using the InputDecoration class. The InputDecoration class allows you to customize the appearance of the input field, including hint text, border styles, and more.

Here is a step-by-step implementation and example code:

1. Use the TextField widget: First, you need a TextField widget to enable text input.
2. Customize InputDecoration: Achieve this by setting the decoration property of the TextField. Use the InputDecoration class and set the hintText property to display the hint text. To remove the underline, set the border to InputBorder.none.
3. Adjust other styles: If needed, you can modify the text style or other decorative elements, such as padding and color.

Here is a simple example code:

dart
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("No Underline TextField Example")),
        body: Center(
          child: TextField(
            decoration: InputDecoration(
              hintText: "Enter your name",
              border: InputBorder.none, // no border
              fillColor: Colors.grey[200], // set background color
              filled: true, // enable filled mode
            ),
          ),
        ),
      ),
    );
  }
}

In this example, the TextField widget uses InputDecoration to display an input field with a gray background without the underline and with the hint text "Enter your name". This approach makes the input field more streamlined on the interface while providing a user-friendly experience.