How to hide widget with animation when Scroll down using Flutter

user_12089796 0
Viewed 4848

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

Icons Buttons

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:

result

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 :)..

dart flutter
3 Answers

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);
    }
user_69425990

You can use Visibility widget with animation and provide time for the visibility gone animation.

user_52509730
user_6795530
Related