Home > Mobile >  flutter show snack bar when the are no more data to load
flutter show snack bar when the are no more data to load

Time:03-08

By using this reference Flutter: ListView Pagination (Load More) example, I can load my API data with pagination (loadmore).
I want to show snack bar when there is no more data to show.
But in this example, it's showing the Container

                  if (_hasNextPage == false)
                  Container(
                    padding: const EdgeInsets.only(top: 30, bottom: 40),
                    color: Colors.amber,
                    child: Center(
                      child: Text('You have fetched all of the content'),
                    ),
                  ),

I want to show a snackbar instead of Container.
By using this documentation, I tried to add snackbar inside of the Scaffold, but I cannot find a way to implement it.

CodePudding user response:

set GlobalKey<ScaffoldState> key in your scaffold widget

    class _staState extends State<sta> {
      GlobalKey<ScaffoldState> globalkey2 = GlobalKey<ScaffoldState>();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(

//add key here
            key: globalkey2,
            appBar: AppBar(),
            body: Container(
              height: 750,
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Align(
                      alignment: Alignment.center,
                      child: Container(

show snackbar using globalkey currentstate

  globalkey2.currentState
        ?.showSnackBar(SnackBar(content: Text("File Already Exist")));

CodePudding user response:

Assuming you followed the tutorial you mentioned modify the _loadMore() function like this :

void _loadMore() async {
  if (_hasNextPage == true &&
      _isFirstLoadRunning == false &&
      _isLoadMoreRunning == false &&
      _controller.position.extentAfter < 300) {
    setState(() {
      _isLoadMoreRunning = true; // Display a progress indicator at the bottom
    });
    _page  = 1; // Increase _page by 1
    try {
      final res =
      await http.get(Uri.parse("$_baseUrl?_page=$_page&_limit=$_limit"));

      final List fetchedPosts = json.decode(res.body);
      if (fetchedPosts.length > 0) {
        setState(() {
          _posts.addAll(fetchedPosts);
        });
      } else {
        // This means there is no more data
        // and therefore, we will not send another GET request
        setState(() {
          _hasNextPage = false;
        });
        
        /// show SnakBar begin ///
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Yay! A SnackBar!'),
        ));
        /// show SnakBar end ///
      }
    } catch (err) {
      print('Something went wrong!');
    }

    setState(() {
      _isLoadMoreRunning = false;
    });
  }
}
  • Related