how to change _Visibility of FloatingActionButton for each ListView item individually?

Question

This question is a follow up to a previous post i made:

How to apply Scroll controller for multiple SilverList or ListView items?

In that post the error was resolved but the example i showed was not correct.

There is also a problem when scrolling horizontally on each ListView() items. When you scroll on one item then the _Visibiltiy of all the FloatingActionButtons of the other items are also affected.

My question is how can i only affect the _Visibility of one individual FloatingActionButtons() in ListView() be affected when scrolling on a individual CustomScrollView() generated inside ListView() and not affect the _Visibility of the other FloatingActionButton()?

I also might add that the snapshot.data.length varies from the data i generate from the json. So there needs to be solution where i don't alter the data itself but rather the _Visibility should change inidividually based on json data.

This is all the code i use:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: AppView2(),
    );
  }
}

class AppView2 extends StatefulWidget {
  const AppView2({
    Key? key,
  }) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State {
  late ScrollController _hideButtonController;
  var _isVisible;

  Future generateList() async {
    String responseBody =
    await rootBundle.loadString("assets/tableJsonData.json");
    var list = await json.decode(responseBody);
    return list;
  }

  @override
  void initState() {
    generateList();
    _isVisible = true;
    _hideButtonController = ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.positions
          .any((pos) => pos.userScrollDirection == ScrollDirection.reverse)) {
        if (_isVisible == true) {
          setState(() {
            _isVisible = false;
          });
        } else if (_isVisible == false) {
          Future.delayed(const Duration(milliseconds: 1000), () {
            setState(() {
              _isVisible = true;
            });
          });
        }
      } else {
        if (_hideButtonController.positions
            .any((pos) => pos.userScrollDirection == ScrollDirection.forward)) {
          if (_isVisible == true) {
            setState(() {
              _isVisible = false;
            });
          } else if (_isVisible == false) {
            Future.delayed(const Duration(milliseconds: 1000), () {
              setState(() {
                _isVisible = true;
              });
            });
          }
        }
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, AsyncSnapshot snapShot) {
                if (snapShot.hasData) {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return SizedBox(
                          height: 250,
                          child: Stack(
                            children: [
                              CustomScrollView(
                                controller: _hideButtonController,
                                scrollDirection: Axis.horizontal,
                                shrinkWrap: true,
                                slivers: [
                                  SliverPadding(
                                    padding: const EdgeInsets.all(20.0),
                                    sliver: SliverList(
                                      delegate: SliverChildListDelegate(
                                        [
                                          Center(
                                            child: Text(snapShot.data[index]
                                            ["long-text"]
                                                .toString()),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Visibility(
                                visible: _isVisible,
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: FloatingActionButton(
                                      child:
                                      const Icon(Icons.arrow_forward_ios),
                                      onPressed: () {}),
                                ),
                              )
                            ],
                          ),
                        );
                      });
                } else {
                  return CircularProgressIndicator();
                }
              },
            )));
  }
}

This is the json file i read from :

[
  {
    "long-text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "long-text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "long-text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "long-text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "long-text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  }

]

Edit

So i followed the answer of @SlowDeepCoder and edited my original code and i also added a controller but i when i add the condition in the ListView i cannot init state in the app and i get error: type 'Null' is not a subtype of type 'bool' This is all the code that is edited :

import 'dart:convert';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:test_project/controllers/swipe_controller.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: AppView2(),
    );
  }
}

class AppView2 extends StatefulWidget {
  const AppView2({
    Key? key,
  }) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State {
  late ScrollController _hideButtonController;

  var isVisible = true;
  Future generateList() async {
    String responseBody =
        await rootBundle.loadString("assets/tableJsonData.json");
    var list = await json.decode(responseBody);
    return list;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, AsyncSnapshot snapShot) {
                if (snapShot.hasData) {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        isVisible = SwipeController().swipeHandler(isVisible);
                        return SizedBox(
                          height: 250,
                          child: Stack(
                            children: [
                              CustomScrollView(
                                controller: _hideButtonController,
                                scrollDirection: Axis.horizontal,
                                shrinkWrap: true,
                                slivers: [
                                  SliverPadding(
                                    padding: const EdgeInsets.all(20.0),
                                    sliver: SliverList(
                                      delegate: SliverChildListDelegate(
                                        [
                                          Center(
                                            child: Text(snapShot.data[index]
                                                    ["long-text"]
                                                .toString()),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Visibility(
                                visible: isVisible,
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: FloatingActionButton(
                                      child:
                                          const Icon(Icons.arrow_forward_ios),
                                      onPressed: () {}),
                                ),
                              )
                            ],
                          ),
                        );
                      });
                } else {
                  return CircularProgressIndicator();
                }
              },
            )));
  }
}
class SwipeController {
  swipeHandler(isVisible) {
    var _hideButtonController = ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        if (isVisible == true) {
          isVisible = false;
        }
      } else {
        if (_hideButtonController.position.userScrollDirection ==
            ScrollDirection.forward) {
          if (isVisible == false) {
            isVisible = true;
          }
        }
      }
    });
  }
}

I still don't know how i can resolve the issue

user_905006 · Answer

You can create a local variable in your ListView's itemBuilder to describe the visibility of the FloatingActionButton for each item. For example:

import 'dart:convert';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: AppView2(),
    );
  }
}

class AppView2 extends StatefulWidget {
  const AppView2({
    Key? key,
  }) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State {
  late ScrollController _hideButtonController;

  Future generateList() async {
    String responseBody =
    await rootBundle.loadString("assets/tableJsonData.json");
    var list = await json.decode(responseBody);
    return list;
  }

  @override
  void initState() {
    _hideButtonController = ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.positions
          .any((pos) => pos.userScrollDirection == ScrollDirection.reverse)) {
      } else {
        if (_hideButtonController.positions
            .any((pos) => pos.userScrollDirection == ScrollDirection.forward)) {
        }
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, AsyncSnapshot snapShot) {
                if (snapShot.hasData) {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        final isVisible = Random().nextBool(); //Random visibility, update this condition to your own. 
                        return SizedBox(
                          height: 250,
                          child: Stack(
                            children: [
                              CustomScrollView(
                                controller: _hideButtonController,
                                scrollDirection: Axis.horizontal,
                                shrinkWrap: true,
                                slivers: [
                                  SliverPadding(
                                    padding: const EdgeInsets.all(20.0),
                                    sliver: SliverList(
                                      delegate: SliverChildListDelegate(
                                        [
                                          Center(
                                            child: Text(snapShot.data[index]
                                            ["long-text"]
                                                .toString()),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Visibility(
                                visible: isVisible,
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: FloatingActionButton(
                                      child:
                                      const Icon(Icons.arrow_forward_ios),
                                      onPressed: () {}),
                                ),
                              )
                            ],
                          ),
                        );
                      });
                } else {
                  return CircularProgressIndicator();
                }
              },
            )));
  }
}

And the _isVisible variable is not really useful and can be removed.

user_15398171 · Answer

import 'dart:convert';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/rendering.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: AppView2(),
    );
  }
}

class AppView2 extends StatefulWidget {
  const AppView2({
    Key? key,
  }) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State {
  late ScrollController _hideButtonController;

  var isVisible = true;
  Future> generateList() async {
    var data = await http.get(Uri.parse('https://jsonkeeper.com/b/S97W'));
    List list = jsonDecode(data.body)
        .map((e) => LongText.fromJson(e))
        .toList();
    return list;
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, AsyncSnapshot> snapShot) {
                if (snapShot.hasData) {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data!.length,
                      itemBuilder: (BuildContext context, int index) {
                        return SizedBox(
                          height: 250,
                          child: Stack(
                            children: [
                              CustomScrollView(
                                controller: snapShot
                                    .data![index].scrollContoller
                                  ..addListener(() {
                                    if (snapShot.data![index].scrollContoller
                                            .position.userScrollDirection ==
                                        ScrollDirection.forward) {
                                      setState(() {
                                        snapShot.data![index].isVisibile = true;
                                      });
                                    } else {
                                      setState(() {
                                        snapShot.data![index].isVisibile =
                                            false;
                                      });
                                    }
                                  }),
                                scrollDirection: Axis.horizontal,
                                shrinkWrap: true,
                                slivers: [
                                  SliverPadding(
                                    padding: const EdgeInsets.all(20.0),
                                    sliver: SliverList(
                                      delegate: SliverChildListDelegate(
                                        [
                                          Center(
                                            child: Text(
                                              snapShot.data![index].longText,
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Visibility(
                                visible: snapShot.data![index].isVisibile,
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: FloatingActionButton(
                                    child: const Icon(Icons.arrow_forward_ios),
                                    onPressed: () {
                                      snapShot.data![index].scrollContoller
                                          .animateTo(
                                        snapShot.data![index].scrollContoller
                                            .position.maxScrollExtent,
                                        duration:
                                            const Duration(milliseconds: 500),
                                        curve: Curves.easeOut,
                                      );
                                    },
                                  ),
                                ),
                              )
                            ],
                          ),
                        );
                      });
                } else {
                  return CircularProgressIndicator();
                }
              },
            )));
  }
}

class LongText {
  final String longText;
  LongText({
    required this.longText,
    required this.isVisibile,
    required this.scrollContoller,
  });
  bool isVisibile;
  final ScrollController scrollContoller;
  LongText.fromJson(Map json)
      : longText = json['long-text'],
        isVisibile = true,
        scrollContoller = ScrollController();
}

user_12054032 · Answer

User visibility per item Not on a global level
User _scrollcontroller per item (locally) as you are using it globally. So common controller will assign to all.

Here I provide an example of that.

  import 'dart:convert';
  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  import 'package:flutter/services.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    final ThemeData? themeData;
    const MyApp({Key? key, this.themeData}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        title: 'Flutter Demo',
        home: AppView2(),
      );
    }
  }
  
  class AppView2 extends StatefulWidget {
    const AppView2({
      Key? key,
    }) : super(key: key);
  
    @override
    _AppViewState createState() => _AppViewState();
  }
  
  class _AppViewState extends State {
    late ScrollController _hideButtonController;
    List listData = [];
    var _isVisible;
    String dummyText =
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
  
    Future generateList() async {
      listData = [dummyText, dummyText, dummyText, dummyText];
      return listData;
    }
  
    @override
    void initState() {
      generateList();
      _isVisible = true;
  
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
          child: Scaffold(
              appBar: AppBar(
                title: Text('DataTable'),
              ),
              body: FutureBuilder(
                future: generateList(),
                builder: (context, AsyncSnapshot snapShot) {
                  if (snapShot.hasData) {
                    return ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        itemCount: snapShot.data.length,
                        itemBuilder: (BuildContext context, int index) {
                          ScrollController _hideButtonController =
                              ScrollController();
                          _hideButtonController.addListener(() {
                            if (_hideButtonController.positions.any((pos) =>
                                pos.userScrollDirection ==
                                ScrollDirection.reverse)) {
                              print(_hideButtonController.positions.first);
  
                              if (_isVisible == true) {
                                setState(() {
                                  _isVisible = false;
                                });
                              } else if (_isVisible == false) {
                                Future.delayed(const Duration(milliseconds: 1000),
                                    () {
                                  setState(() {
                                    _isVisible = true;
                                  });
                                });
                              }
                            } else {
                              if (_hideButtonController.positions.any((pos) =>
                                  pos.userScrollDirection ==
                                  ScrollDirection.forward)) {
                                if (_isVisible == true) {
                                  setState(() {
                                    _isVisible = false;
                                  });
                                } else if (_isVisible == false) {
                                  Future.delayed(
                                      const Duration(milliseconds: 1000), () {
                                    setState(() {
                                      _isVisible = true;
                                    });
                                  });
                                }
                              }
                            }
                          });
                          return SizedBox(
                            height: 250,
                            child: Stack(
                              children: [
                                CustomScrollView(
                                  controller: _hideButtonController,
                                  scrollDirection: Axis.horizontal,
                                  shrinkWrap: true,
                                  slivers: [
                                    SliverPadding(
                                      padding: const EdgeInsets.all(20.0),
                                      sliver: SliverList(
                                        delegate: SliverChildListDelegate(
                                          [
                                            Center(
                                              child: Text(snapShot.data[index]
                                                  .toString()),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Visibility(
                                  visible: _isVisible,
                                  child: Align(
                                    alignment: Alignment.centerRight,
                                    child: FloatingActionButton(
                                        child:
                                            const Icon(Icons.arrow_forward_ios),
                                        onPressed: () {}),
                                  ),
                                )
                              ],
                            ),
                          );
                        });
                  } else {
                    return CircularProgressIndicator();
                  }
                },
              )));
    }
  }
  
  class ListModel {
    String title;
    bool isVisible;
    ListModel(this.title, this.isVisible);
  }

how to change _Visibility of FloatingActionButton for each ListView item individually?

3 Answers