使用 Flutter 向下滚动时如何隐藏带有动画的小部件

Question

I have a problem as with two Icons Buttons as the below image:

The problem here when I scroll down till another widget appear for example a map or a Graph the Icons Buttons looks like the below image:

So I got an idea is to hide those button when scroll down and show them again when scroll app with an animation, but I don't know how to do this..

This the below related Code:

return Scaffold(
        body: Stack(
          alignment: AlignmentDirectional.bottomCenter,
          children: [
            Container(
              height: double.infinity,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 85,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Sim information',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                            headingRowHeight: 20,
                            columnSpacing: 83,
                            dataRowHeight: double.parse('20'),
                            columns: [
                              DataColumn(
                                  label: Text(
                                'Sim operator',
                                style: TextStyle(color: Colors.black),
                              )),
                              DataColumn(
                                label: Row(
                                  children: <Widget>[
                                    Text(
                                      simInfo.operator == null
                                          ? ' '
                                          : simInfo.operator,
                                      style: TextStyle(color: Colors.black),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                            rows: [
                              DataRow(cells: [
                                DataCell(Row(
                                    Text('ICCID'),
                                  ],
                                )),
                                DataCell(
                                    Text(simInfo == null ? '' : simInfo.iccid)),
                              ]),
                            ],
                          ),
                        ],
                      ),
                    ),
                    //Network provider
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 20,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Network Provider',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                            headingRowHeight: 20,
                            columnSpacing: 120,
                            dataRowHeight: double.parse('20'),
                            columns: [
                              DataColumn(
                                  label: Text(
                                'Operator',
                                style: TextStyle(color: Colors.black),
                              )),
                              DataColumn(
                                label: Text(
                                  simInfo == null ? '' : simInfo.operator,
                                  style: TextStyle(color: Colors.black),
                                ),
                              ),
                            ],
                            rows: [
                              DataRow(cells: [
                                DataCell(Row(
                                  children: <Widget>[
                                    Text('MCC'),
                                  ],
                                )),
                                DataCell(
                                  Text(simInfo == null
                                      ? ''
                                      : simInfo.mcc.toString()),
                                ),
                              ]),
                              DataRow(cells: [
                                DataCell(Text('MNC')),
                                DataCell(
                                  Text(simInfo == null
                                      ? ''
                                      : simInfo.mnc.toString()),
                                ),
                              ]),
                            ],
                          ),
                        ],
                      ),
                    ),
                    //Serving Cell
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 20,
                        left: 10,
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: <Widget>[
                          Text(
                            'Serving Cell',
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          DataTable(
                              columnSpacing: 120,
                              headingRowHeight: 20,
                              dataRowHeight: double.parse('20'),
                              columns: [
                                DataColumn(
                                    label: Text(
                                  'Data type',
                                  style: TextStyle(color: Colors.black),
                                )),
                                DataColumn(
                                  label: Text(
                                    _baseStation == null
                                        ? ''
                                        : _baseStation.type.toString(),
                                    style: TextStyle(color: Colors.black),
                                  ),
                                ),
                              ],
                              rows: [
                                DataRow(cells: [
                                  DataCell(
                                    Text('TYPE'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.type.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('CId'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.cid.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('TAC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation == null
                                        ? ''
                                        : _baseStation.tac.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('PCI'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.bsicPscPci.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('LAC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.lac.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('MCC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.mcc.toString()),
                                  ),
                                ]),
                                DataRow(cells: [
                                  DataCell(
                                    Text('MNC'),
                                  ),
                                  DataCell(
                                    Text(_baseStation.mnc.toString()),
                                  ),
                                ]),
                              ]),
                          if (_baseStation.type == 'GSM')
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 0,
                              ),
                              child: GSMStationFields(_baseStation),
                            ),
                          if (_baseStation.type == 'LTE')
                            Padding(
                              padding: const EdgeInsets.only(
                                left: 0,
                              ),
                              child: LTEStationFields(_baseStation),
                            ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: SignalStrengthGraph(),
                    ),
                  ],
                ),
              ),
            ),
            if (activeSlotsSize > 1)
              Positioned(
                bottom: 0,
                child: SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: RadioBtnSim(changeSlot),
                ),
              ),
          ],
        ),
      );

and this is my widget part I call which have the problem:

Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: SignalStrengthGraph(),
                    ),

So is there's any other solution or idea to solve this issue?

I hope this would be clear enough and some one give me good reccomendation :)..

Answer 1

You can use AnimatedContainer() For example:

var iconContainerHeight = 55.00;

AnimatedContainer(
            duration: Duration(milliseconds: 200),
            height: _bottomBarHeight,
            child: YOUR_CONTAINER WITCH ICONS)

void _scrollListener() {
    if (_controller.position.userScrollDirection == ScrollDirection.reverse) {
      if (iconContainerHeight != 0)
        setState(() {
          iconContainerHeight = 0;
        });
    }
    if (_controller.position.userScrollDirection == ScrollDirection.forward) {
      if (iconContainerHeight == 0)
        setState(() {
          iconContainerHeight = 55;
        });
    }
  }

You remember:

initState() {
    super.initState();
    _controller = ScrollController()..addListener(_scrollListener);
}

and:

 dispose() {
    _controller.removeListener(_scrollListener);
    }

Answer 2

您可以将Visibility小部件与动画一起使用，并为可见性消失动画提供时间。

Answer 3

What you need is a ScrollController. With it, your code runs every time the user scrolls. There, you can keep track of the current scroll offset and when it's larger than the previous value that you saved, you can make those buttons invisible.

This article explains it quite well: https://medium.com/@diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac