CODEWITHSUNDEEP
fluttertextfield
VegetaSaiyan
VegetaSaiyan

Reputation: 213

Textfield rises above keyboard

I would want the keyboard to push the textfield up so that the full textfield can be seen without the user scrolling. Tried resizeToAvoidBottomInset: true as suggested in Flutter TextFormField hidden by keyboard

However, the keyboard still hides the textfield when the textfield is in focus.

Below is my code starting from Scaffold:

Scaffold(
      resizeToAvoidBottomInset: true,
      floatingActionButton: Container(
        height: height * 0.054,
        width: width * 0.885,
        child: FloatingActionButton.extended(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(9.0))),
          isExtended: true,
          backgroundColor: Colos.blue,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          onPressed: () {
          },
          label: Text('SEND',
              style: TextStyle(
                  color: Colors.white
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2.1,
                  fontSize: 13.5)),
        ),
      ),
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: IconButton(
          icon: Icon(Icons.chevron_left,
              size: 21, color: Colors.white
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TestingHomePage()),
            );
          },
        ),
        centerTitle: true,
        title: Text('Textfield',
            style: TextStyle(
                color: Colors.white
                fontWeight: FontWeight.bold,
                fontSize: 18)),
      ),
      backgroundColor: Colors.black,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: height * 0.015),
              child: Container(
                margin: EdgeInsets.symmetric(
                  horizontal: width * 0.045,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  color: Colors.red,
                ),
                child: Widget
                             
brackets

            Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: width * 0.06, vertical: height * 0.02),
              child: TextField(
                style: TextStyle(color: Colors.white),
                maxLines: maxLines,
                autofocus: false,
                decoration: InputDecoration(
                  decoration...
                ),
                onChanged: (text) {
                  print("First text field: $text");

              brackets

Could it be because of the floatingactionbutton docked?

Upvotes: 0

Views: 614

Answers (1)

Afridi Kayal
Afridi Kayal

Reputation: 2285

The problem here is that the text field is inside the scroll view.

Follow this hierarchy:

Scaffold(
  body: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [ ... ] // Put your scroll view elements here.
            ),
          )
        ),
        // Put your text field outside the scroll view.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(),
        ),
      ],
    ),
  ),
);

This way, whenever the screen size changes, scroll view shrinks due to expanded widget and TextField remains fixed at bottom and moves up with the keyboard.

Also, Try setting resizeToAvoidBottomInset: false/true after making the changes to better understand what this property does.

Upvotes: 1

Related Questions