CODEWITHSUNDEEP
flutterflutter-layout
K.k
K.k

Reputation: 489

How to fix Textfield height?

enter image description here

As you can see, the height is different.

The picture on the left shows the app running when the keyboard did not pop up. And the picture on the right shows the app running when keyboard pops up and clicks "Flutter Hot Reload"(Android Studio).

I want the textfield to be like the picture on the right without keyboard pop-up.

How can I fix this?

Appbar

class CustomAppbar extends StatelessWidget with PreferredSizeWidget{
  @override
  final Size preferredSize;

  @override
  static double height = AppBar().preferredSize.height;

  CustomAppbar() : preferredSize = Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    @override
    final double statusbarHeight = MediaQuery.of(context).padding.top;

    return Container(
      child: Stack(
        children: <Widget>[
          AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            iconTheme: IconThemeData(color: Colors.black,),
          ),
          Container(
            decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            margin: EdgeInsets.only(left: 60, top: statusbarHeight + 5, bottom: 5, right: 5),
            child: InputBox(),
          )
        ],
      ),
    );
  }
}

InputBox

class InputBox extends StatefulWidget {
  @override
  _InputBoxState createState() => _InputBoxState();
}

class _InputBoxState extends State<InputBox> {
  TextEditingController _SearchController = TextEditingController();
  FocusNode _focusNode = FocusNode();
  String _SearchText = "";

  _InputBoxState(){
    _SearchController.addListener(() {
      setState((){
        _SearchText = _SearchController.text;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      focusNode: _focusNode,
      style: TextStyle(fontSize: 19),
      controller: _SearchController,
      decoration: InputDecoration(
          hintText: "Search",
          border: InputBorder.none,
          prefixIcon: Icon(Icons.search, color: Colors.white,),
          suffixIcon: _focusNode.hasFocus ? IconButton(
            icon: Icon(Icons.cancel, color: Colors.white,),
            onPressed: (){
              setState((){
                _SearchController.clear();
                _SearchText = "";
                _focusNode.unfocus();
              });
            },
          ) : Container()
      )
    );
  }
}

Upvotes: 0

Views: 171

Answers (1)

Johny Saini
Johny Saini

Reputation: 909

  style:TextStyle(height: 20),     //custome height
  decoration: InputDecoration(
  isDense: true)                    // remove padding inside textfield

you can use ContentPadding if you want give padding inside textfield

Upvotes: 1

Related Questions