Introduction

In Flutter, customizing the appearance of a TextFormField is essential for creating a user-friendly UI. This tutorial will guide you on how to place text inside a square within a TextFormField.

Step 1: Setup Your Flutter Project

Ensure that you have a Flutter project set up. If not, create a new Flutter project using:

flutter create my_project

Step 2: Implement TextFormField with Square Border

Use the InputDecoration property to define a square border for the text field.

TextFormField(
  decoration: InputDecoration(
    hintText: 'Enter text',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(0), // Square corners
      borderSide: BorderSide(color: Colors.black, width: 2),
    ),
    contentPadding: EdgeInsets.all(16), // Adjust text placement
  ),
);
        

Step 3: Adjust Text Alignment

To ensure the text appears properly inside the square, you can adjust the textAlign property.

TextFormField(
  textAlign: TextAlign.center, // Center the text
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(0),
    ),
  ),
);
        

Conclusion

By following these steps, you can successfully create a TextFormField where text appears inside a square layout. This customization enhances the design and improves user interaction.