Lazy Loader in flutter

The Lazy Loader is a scrollview wrapper that supports lazy loading. it is quite handy in instances where the application's aim to present limitless material in a ListView of Mobile application.

In this post, we will look at the process of adding a lazy loader to an application by creating an app with infinite content.



Step-by-Step Implementation


Step 1: Create a New Project in Android Studio (File >new flutter project).
Step 2: Adding material package.

Import method the runapp method in the main function call first while run the application​

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget.

we can create a stateless widget that contains MaterialApp widget,Appbar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Add a package in flutter dependencies. What you need to do is place it under the dependencies: inside the pubspec.yaml file.
 dependencies:
    flutter:
    sdk: flutter
    lazy_load_scrollview: ^1.3.0
Step 5: Below code write lazyloadscrollview in a flutter.
  LazyLoadScrollView(
     isLoading: isLoadingHorizontal,
     scrollDirection: Axis.horizontal,
     onEndOfPage: () => _loadMoreHorizontal(),
     child: Scrollbar(
         child: ListView.builder(
             itemCount: horizontalData.length,
             scrollDirection: Axis.horizontal,
             itemBuilder: (context, position) {
               return DemoItem(position);
             } ) ) )
Step 6: Final code 
 import 'package:flutter/material.dart';
 import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';

 void main() {
   runApp(lazyloader());
 }
 class lazyloader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Lazy Load Demo',
      home: new MyHomePage(title: 'Lazy Load Demo'),
     );
   }
 } 

 class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

   @override
   _MyHomePageState createState() => new _MyHomePageState();
 } 

 class _MyHomePageState extends State<MyHomePage> {
  List<int> verticalData = [];
  List<int> horizontalData = [];

  final int increment = 10;

  bool isLoadingVertical = false;
  bool isLoadingHorizontal = false;

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

  Future _loadMoreVertical() async {
    setState(() {
      isLoadingVertical = true;
    });

    // Add in an artificial delay
    await new Future.delayed(const Duration(seconds: 2));

    verticalData.addAll(
        List.generate(increment, (index) => verticalData.length + index));

    setState(() {
      isLoadingVertical = false;
    });
  }

  Future _loadMoreHorizontal() async {
    setState(() {
      isLoadingHorizontal = true;
    });

    // Add in an artificial delay
    await new Future.delayed(const Duration(seconds: 2));

    horizontalData.addAll(
        List.generate(increment, (index) => horizontalData.length + index));

    setState(() {
      isLoadingHorizontal = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: LazyLoadScrollView(
        isLoading: isLoadingVertical,
        onEndOfPage: () => _loadMoreVertical(),
        child: Scrollbar(
          child: ListView(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Nested horizontal ListView',
                  textAlign: TextAlign.center,
                ),
              ),
              Container(
                  height: 180,
                  child: LazyLoadScrollView(
                      isLoading: isLoadingHorizontal,
                      scrollDirection: Axis.horizontal,
                      onEndOfPage: () => _loadMoreHorizontal(),
                      child: Scrollbar(
                          child: ListView.builder(
                              itemCount: horizontalData.length,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (context, position) {
                                return DemoItem(position);
                              })))),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Vertical ListView',
                  textAlign: TextAlign.center,
                ),
              ),
              ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: verticalData.length,
                itemBuilder: (context, position) {
                  return DemoItem(position);
                 },
               ),
             ],
           ),
         ),
       ),
     );
   }
  }

 class DemoItem extends StatelessWidget {
   final int position;
 
   const DemoItem(
       this.position, {
        Key? key,
      }) : super(key: key);

   @override
   Widget build(BuildContext context) {
     return SizedBox(
       width: MediaQuery.of(context).size.width,
       child: Card(
         child: Padding(
          padding: const EdgeInsets.all(8.0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
               Row(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: <Widget>[
                   Container(
                     color: Colors.blue,
                     height: 40.0,
                     width: 40.0,
                   ),
                   SizedBox(width: 8.0),
                   Text("Item $position"),
                 ],
               ),
               Text(
                   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed vulputate orci. Proin id scelerisque velit. Fusce at ligula ligula. Donec fringilla sapien odio, et faucibus tortor finibus sed. Aenean rutrum ipsum in sagittis auctor. Pellentesque mattis luctus consequat. Sed eget sapien ut nibh rhoncus cursus. Donec eget nisl aliquam, ornare sapien sit amet, lacinia quam."),
             ],
           ),
         ),
       ),
     );
   }
 }
Step 7: Output of above example 

                         

Happy coding!

365Bloggy June 12, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1218
Zoom In and Out to TextView in Android
0 418
How to underline text in textview
0 347
Shine Effect in Android
0 298
How to Create Marquee Text in Android?
0 268
Our blogs
Archive