listview - Flutter TextField overflow bottom on keyboard up

Question

This is the problem: I have a grid (a crossword) and a list of questions below it. I need the list of questions to scroll indipendently from the grid. When I click on the grid to type the answer and the keyboard comes up I get an overflow error AND the grid doesn't move so the focused textfield that I use to input the answer is not visible (if it's low enough on the grid to be covered by the keyboard). I tried all kind of combinations with ListView and Expanded widgets...no solution...I cannot use resizeToAvoidBottomInset: false because I need the grid to move up and keep the focused TextField visible. Here is the code:

Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
        title: Text(widget.title),
        ),
      body: Column(
        children:[
          FutureBuilder(
          future: grid,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                    width: MediaQuery.of(context).size.width-8,
                    margin: EdgeInsets.zero,
                    padding: EdgeInsets.zero,
                    child: GridView.count(
                      padding: EdgeInsets.only(left:0.0,top:5.0,right:0.0,bottom: 0.0),
                      shrinkWrap: true,
                      crossAxisCount: 15,
                      mainAxisSpacing: 2,
                      crossAxisSpacing: 2,
                      children: List.generate(snapshot.data.length, (index) {
                        if(gridFilled.length < snapshot.data.length) {
                          gridFilled.add(snapshot.data[index]);
                        }
                        return FocusScope(
                            node: _node,
                            child: Container(
                              decoration: BoxDecoration(
                                  color: snapshot.data[index] == "#" ? Colors.black : Colors.white,
                                  border: Border.all(color: Colors.black)),
                              child:
                              snapshot.data[index] == "#"
                                  ? Text('#')
                                  : _isTextField(gridFilled[index], index),
                            ));
                      }),
                    ),
                  ),
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return CircularProgressIndicator();
          },
        ),
          SizedBox(width: MediaQuery.of(context).size.width, height: 15.0,),
          Expanded(
            child: QPanel(dir: widget.dir, dbName: widget.xwordnumber),//this is a ListView with the questions
            ),
      ]),
      drawer: Drawer(
        child: ListView(
            padding: EdgeInsets.zero,
            children:<Widget>[
              //just menu items
            ]
        ),
      ),
    );
  }

Unfortunately I'm not allowed to post pictures yet...not enough reputation..please, any help would be greatly appreciated!

Answer 1

wrap your Column inside SingleChildScrollView.

for example:

SingleChildScrollView(
    child:Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.start,

  children: <Widget>[
    Text('We move under cover and we move as one'),
    Text('Through the night, we have one shot to live another day'),
    Text('We cannot let a stray gunshot give us away'),
    Text('We will fight up close, seize the moment and stay in it'),
    Text('It’s either that or meet the business end of a bayonet'),
    Text('The code word is ‘Rochambeau,’ dig me?'),
    
  ],
)
 )

Comments

Your attempt at craphop is so cringe and sucks, just don't even try.

https://stackoverflow.com/questions/56100790/hide-dismiss-keyboard-on-listview-scroll-in-flutter-app

https://medium.com/nonstopio/make-the-list-auto-scrollable-when-you-add-the-new-message-in-chat-messages-functionality-in-19e457a838a7