Закрепить строку в нижней части представления прокрутки поверх других виджетов пользовательского интерфейса

Question

Я пытаюсь закрепить контейнер Row, в котором есть текстовое поле ввода и соседняя кнопка со значком внутри ScrollView. К сожалению, Row останется внизу, но не с видом на экран, поэтому пользователю придется прокрутить вниз, чтобы увидеть контейнер Row. Как я могу прикрепить нижнюю панель к экрану так, чтобы она всегда находилась внизу при просмотре экрана и поверх других объектов в ScrollView?

интерфейсе панели:

class TextBarAtBottom extends StatelessWidget {
  TextEditingController commentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      // First child is TextInput
      Expanded(
          child: Container(
            child: TextFormField(
              autocorrect: false,
              decoration: new InputDecoration(
                labelText: "Some Text",
                labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
                fillColor: Colors.black,
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.black)),
              ),
            ),
          )),
      // Second child is button
      IconButton(
        icon: Icon(Icons.send),
        iconSize: 16.0,
        onPressed: () {},
      )
    ]);
  }
}

Экран пользовательского интерфейса:

@override
Widget build(BuildContext context) {
  return MaterialApp(
        title: 'App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('App'),
            ),
            body: SingleChildScrollView(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
              Flexible(
                  fit: FlexFit.loose,
                  child: ExpandableTheme(
                      data: ExpandableThemeData(
                          iconColor: Colors.blue,
                          useInkWell: true,
                          animationDuration: const Duration(milliseconds: 500),
                          tapBodyToExpand: true,
                          tapHeaderToExpand: true,
                          tapBodyToCollapse: true,
                          hasIcon: true,
                          iconPlacement: ExpandablePanelIconPlacement.right),
                      child: ExpandablePanel(
                          header: Text(widget.postData.title,
                              style: TextStyle(fontSize: 24)),
                          collapsed: Text(widget.postData.text,
                              style: TextStyle(fontSize: 16),
                              softWrap: true,
                              maxLines: 10,
                              overflow: TextOverflow.ellipsis),
                          expanded: Text(widget.postData.text,
                              style: TextStyle(fontSize: 16),
                              softWrap: true)))),
              // Second child is spacing
              SizedBox(height: 16),
              // Third child is list view of Cards that are populated from the request post
              Flexible(
                  fit: FlexFit.loose,
                  child: Container(
                    child: FutureBuilder<Map<String, String>>(
                      future: post,
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return ListView.builder(
                              shrinkWrap: true,
                              itemCount: snapshot.data.length,
                              itemExtent: 128.0,
                              itemBuilder: (BuildContext context, int index) {
                                return Card(Text('$index'));
                              });
                        } else if (snapshot.hasError) {
                          return Flex(direction: Axis.horizontal, children: [
                            Expanded(
                              child: new Container(),
                            )
                          ]);
                        }
                        return CircularProgressIndicator();
                      },
                    ),
                  )),
              // Fourth child is text bar and send button
              Flexible(fit: FlexFit.loose, child: TextBarAtBottom())
            ]))));
  }

Answer 1

Результаты на скриншоте выглядят следующим образом.

1. изображение вверху списка

2. изображение внизу списка

Я изменил ваш собственный код, как показано ниже

      MaterialApp(
        title: 'App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Document Thread'),
            ),
            body: Column(
              children: <Widget>[
                Expanded(
                  child: SingleChildScrollView(
                      child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            // First child is ExpandableTheme with minHeight of 0.5 screen but expandable to fill up as much screen as needed
                            Flexible(
                              fit: FlexFit.loose,
                              child: ExpandableTheme(
                                  data: ExpandableThemeData(
                                      iconColor: Colors.blue,
                                      useInkWell: true,
                                      animationDuration: const Duration(milliseconds: 500),
                                      tapBodyToExpand: true,
                                      tapHeaderToExpand: true,
                                      tapBodyToCollapse: true,
                                      hasIcon: true,
                                      iconPlacement: ExpandablePanelIconPlacement.right
                                  ),
                                  child: ExpandablePanel(
                                      header: Text('Title',
                                          style: TextStyle(fontSize: 24)),
                                      collapsed: Text('Some text',
                                          style: TextStyle(fontSize: 16),
                                          softWrap: true,
                                          maxLines: 10,
                                          overflow: TextOverflow.ellipsis),
                                      expanded: Text('widget.postData.docAbstract',
                                          style: TextStyle(fontSize: 16),
                                          softWrap: true)
                                  )
                              ),
                            ),
                            // Second child is spacing
                            SizedBox(height: 16),
                            // Third child is max height of 0.5 screen with ListView of Card objects or Empty container
                            Flexible(
                              fit: FlexFit.loose,
                              child: Container(
                                //this is limiting your list not to scroll to the bottom
//                        constraints: BoxConstraints(
//                          minWidth: MediaQuery.of(context).size.width,
//                          maxHeight: MediaQuery.of(context).size.height / 2,
//                        ),
                                child: ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: 15,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemBuilder: (BuildContext context, int index) {
                                    return Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.fromLTRB(90,0,0,10),
                                          child: Text('Text $index'),
                                        ),
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                                          children: <Widget>[
                                            IconButton(
                                              icon: Icon(Icons.thumb_up, color: Colors.green,),
                                              onPressed: (){},
                                            ),
                                            IconButton(
                                              icon: Icon(Icons.thumb_down, color: Colors.red,),
                                              onPressed: (){},
                                            )
                                          ],
                                        ),
                                        Divider(color: Colors.black12,)
                                      ],
                                    );
                                   },

                                ),
                              ),
                            ),
                            // Fourth child is text bar and send button
                          ]
                      )
                  ),
                ),
                TextBarAtBottom()

              ],
            )
        )
      );

Answer 2

Проверьте мой код, текстовое поле внизу и прокрутка в центре.

Проблема с вашим кодом вы добавляете Textfield внутри scrollview, поэтому всегда в конце SingleChildScrollview.

Решение: Добавьте свой SingleChildScrollView внутри представления столбца с расширенным виджетом. и добавьте текстовое поле как второй дочерний элемент в виджет Столбец. Теперь TextField будет внизу, а остальное пространство будет занято SingleChildScrollView.

import 'package:flutter/material.dart';

    class Design extends StatefulWidget {
     @override
     _DesignState createState() => _DesignState();
    }

    class _DesignState extends State<Design> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
          title: Text('TextField at Bottom'),
        ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: SingleChildScrollView(
                   child: Column(
                      children: <Widget>[
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                    Text('Flutter'),
                ],
              ),
            ),
          ),
          Row(children: [
            // First child is TextInput
            Expanded(
                child: Container(
              child: TextFormField(
                autocorrect: false,
                decoration: new InputDecoration(
                  labelText: "Some Text",
                  labelStyle: TextStyle(fontSize: 16.0, color: Colors.black),
                  fillColor: Colors.black,
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                ),
              ),
            )),
            // Second child is button
            IconButton(
              icon: Icon(Icons.send),
              iconSize: 16.0,
              onPressed: () {},
            )
          ])
        ],
      ),
    );
    }
   }