How to put a text field after ListTile in Expanded?-CodePudding

On the page I have a list, at the bottom of the pagination, which is displayed with buttons (1, 2, 3...). Each page has 10 items. It is necessary that in each list on each page when scrolling down there is a text field. How can I insert it? In my code example I have an error: RenderFlex overflowed. I want the text field to be at the end of the list. My code:

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return ListTile(
                 ...
                );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

CodePudding user response：

hello dear friend if you want to put after each listile a textfield you can return a column in itembuilder then put your childeren in there

like this

body: Padding(
  padding: const EdgeInsets.only(top: 24, bottom: 24),
  child: Column(
    children: [
      Expanded(
        child: Column(
          children: [
            ListView.separated(
              shrinkWrap: true,
              itemCount: ...,
              itemBuilder: (context, index) {
                return column(
                  childeren: [
                     ListTile(
                         ...
                        ),
                     textfield(),
                 ],
              );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
          ],
        ),
      ),
      Container(
        color: Colors.red,
        child: TextField(),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 38, right: 38),
        child: PaginationWidget(),
      ),
    ],
  ),
),

CodePudding user response：

First of all, you need to remove the Expanded() widget from your code, that's just going to stretch your listview to the height and width of your screen.

Next wrap your column with SingleChildScrollView() widget to make your listview, textfield, and pagination widget scrollable.

After, add a NeverScrollableScrollPhysics() physics in your listview.

Your code should look like this:

body: Padding(
        padding: const EdgeInsets.only(top: 24, bottom: 24),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Column(
                children: [
                  ListView.separated(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: ...,
                    itemBuilder: (context, index) {
                      return ListTile(
                        ...,
                      );
                    },
                    separatorBuilder: (context, index) {
                      return const Divider();
                    },
                  ),
                ],
              ),
              Container(
                color: Colors.red,
                child: TextField(),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 38, right: 38),
                child: PaginationWidget(),
              ),
            ],
          ),
        ),
      ),