Flutter - how to change the size of a TextField correctly?

I want to leave my TextField with a specified height, but when the user types a text larger than the field this happens which is illustrated in the gif below.

illustrative gif

There is no point in decreasing the font size. Increasing the field size solves the problem but gets visually ugly. How can I solve this problem?

This is the code for the textfield 

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',
      ),
   ),
)
Author: Jonas Ferreira, 2020-07-22
Source

2 answers

One way out is you try to work with contentPadding.

I'll leave an example below, test it and see if it meets 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).

 1
Author: Matheus Ribeiro, 2020-07-22 19:21:25

You can add the maxLines attribute, it makes the text not jump to 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',
      ),
   ),
)
 0
Author: Matheus, 2020-07-23 12:47:53