Skip to content

TextField hint and input text go outside of given constraints. #99914

Open
@ScottS2017

Description

@ScottS2017

Steps to Reproduce

Use a TextField as shown below, without including a String for the counterText.

To see the problem get fixed, uncomment the counterText in the sample code below.


import 'package:flutter/material.dart';

main() {
  runApp(
    const MaterialApp(
      home: Material(
        child: SizedBox.expand(
          child: ColoredBox(
            color: Color(0xFF000000),
            child: Center(
              child: SearchBox(),
            ),
          ),
        ),
      ),
    ),
  );
}

/// A decorated TextField that allows the user to enter a search term.
class SearchBox extends StatefulWidget {
  /// Constructor for the SearchBox.
  const SearchBox({
    Key? key,
  }) : super(key: key);

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

class _SearchBoxState extends State<SearchBox> {
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 46.0,
        width: 425.0,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: const Color(0xFF2c3e57),
            borderRadius: BorderRadius.circular(23.0),
          ),
          child: Row(
            children: [
              const SizedBox(width: 16.0),
              const Padding(
                padding: EdgeInsets.only(top: 4.0),
                child: Icon(
                  Icons.search,
                  color: Color(0xFFDDDDDD),
                  size: 32.0,
                ),
              ),
              const SizedBox(width: 8.0),
              Expanded(
                child: TextField(
                  maxLength: 44,
                  maxLines: 1,
                  autocorrect: false,
                  enableSuggestions: false,
                  style: Theme.of(context).textTheme.headlineSmall!.copyWith(
                        color: const Color(0xFFDDDDDD),
                      ),
                  decoration: InputDecoration(
                    // TODO Uncomment the counter text parameter to solve the issue.
                    // counterText: '',
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    focusedErrorBorder: InputBorder.none,
                    filled: false,
                    hintText: 'Issue: Hint & input text too high.',
                    hintStyle: Theme.of(context).textTheme.headlineSmall!.copyWith(
                          color: const Color(0xFFDDDDDD),
                        ),
                  ),
                  controller: TextEditingController(),
                  // TODO implement on(Something) here.
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: text inputEntering text in a text field or keyboard related problemsc: regressionIt was better in the past than it is nowf: material designflutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10found in release: 2.11Found to occur in 2.11frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions