Flutter - How to change the size of a Textfield correctly?

Question

I want to leave my Textfield with a specific height, but when the user type a larger text than the field happens that is illustrated in the gif below.

There’s no point in reducing the font size. Increasing the field size solves the problems but it gets visually ugly. How can I solve this problem?

This is the Textfield field code

Container(
   height: 45,
   padding: EdgeInsets.symmetric(horizontal: 10),
   child: TextField(
      controller: cNome,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
         border: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor2()),
            borderRadius: BorderRadius.circular(60)
         ),
         labelText: 'Seu Nome',
      ),
   ),
)

Answer 1

One way out is you try to work with the contentPadding.

I’ll leave an example below, test there and see if it fits your case:

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MyWidget(height: 20),
              SizedBox(height: 20),
              MyWidget(height: 40),
              SizedBox(height: 20),
              MyWidget(height: 60),
            ],
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  
  MyWidget({this.height});
  
  final double height;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: TextField(
        decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(12, 0, 12, 0),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          labelText: height.toString(),
        ),
      ),
    );
  }
}

You can run this example Dartpad (Just copy and paste).

Answer 2

You can add the maxLines attribute, it makes the text not jump to the bottom line when it exceeds the Textfield limit.

Container(
   height: 45,
   padding: EdgeInsets.symmetric(horizontal: 10),
   child: TextField(
      controller: cNome,
      maxLines: 1, // ISSO FAZ COM QUE SEU TEXTO NÃO PULE PARA LINHA
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
         border: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor2()),
            borderRadius: BorderRadius.circular(60)
         ),
         labelText: 'Seu Nome',
      ),
   ),
)