spot_img
HomeEducationSkeleton Loader In Flutter - Webkul Weblog Acquire US

Skeleton Loader In Flutter – Webkul Weblog Acquire US

On this weblog, we’ll discover the right way to Implement in skeleton loader in Flutter .

When making a cellular software, consumer on expertise is paramount. Sluggish loading instances and empty screens can frustrate customers .

To create a smoother and extra partaking loading expertise, builders usually to skeleton loaders.

You may additionally test our flutter app development services.

Place skeleton loaders in your UI the place content material is loading. Sometimes, you’d exchange these skeleton loaders with precise content material as soon as the information is out there.

In fashionable app growth, offering a easy and interesting consumer expertise is essential. One solution to improve consumer expertise is through the use of skeleton loading screens, which give customers the impression that content material is loading seamlessly.

Implementation:-

First we have to create a brand new flutter undertaking and add the next dependencies within the pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
skeleton_loader: ^2.0.0+4

Now, run the command “flutter pub get” so as to add the dependencies.

Add the next bundle to your class.

import ‘bundle:skeleton_loader/skeleton_loader.dart’;

Create Skeleton loader :-

First, we’ll create a skeleton loader view in response to our personal view.

           SkeletonLoader(
                      builder: Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 18, horizontal: 18),
                      baby: Row(
                        kids: [
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8.0),
                              color: Colors.red,
                            ),
                            height: 160,
                            width: 150,
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Column(
                            children: [
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                               width: MediaQuery.of(context).size.width /2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                               width: MediaQuery.of(context).size.width /2,
                                height: 20,
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                    gadgets: 5,
                    highlightColor: Colours.blue.shade200,
                    path: SkeletonDirection.ltr)

Full Code:-

import 'bundle:flutter/materials.dart';
import 'bundle:skeleton_loader/skeleton_loader.dart';

class SkeletonLoaderScreen extends StatefulWidget 
  const SkeletonLoaderScreen(Key? key) : tremendous(key: key);

  @override
  State<SkeletonLoaderScreen> createState() => _SkeletonLoaderScreenState();


class _SkeletonLoaderScreenState extends State<SkeletonLoaderScreen> 
  Record<ItemModel> knowledge = [
    ItemModel(
        image:
            "
        title: "Enchanting Fairyland Dress",
        price: "$15.0",
        description:
            "Enchanted Fairyland Fairy Dress Up Springtime Tulle Skirt Elasticized Bodice."),
    ItemModel(
        image:
            "
        title: "T-Shirts and Tops",
        price: "$5.0",
        description: "T shirt is something comfortable whereas top is fancy."),
    ItemModel(
        image:
            "
        title: "ladies-tank-tops",
        price: "$20.0",
        description:
            "A tank top is a knitted piece of clothing that covers the upper part of your body and has no sleeves."),
    ItemModel(
        image:
            "
        title: "Women Casual Regular Fit Brown Solid Overcoat",
        price: "$25.0",
        description:
            "Women Casual Regular Fit Brown Solid Overcoat Quo commodi iusto vel ipsum voluptatum et sint necessita tibus nam vel qui laboriosam minima."),
  ];
  Record<ItemModel>? itemData;
  bool isLoading = true;

  @override
  void initState() 
    itemView();
    tremendous.initState();
  

  Future itemView() async 
    Future.delayed(const Length(seconds: 8), () 
      itemData = knowledge;
      setState(() 
        isLoading = false;
      );
    );
  

  @override
  Widget construct(BuildContext context) 
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        dwelling: Scaffold(
          appBar: AppBar(
            title: const Textual content(
              "Skeleton Loader",
              model: TextStyle(coloration: Colours.white),
            ),
          ),
          physique: SingleChildScrollView(
            baby: isLoading
                ? SkeletonLoader(
                    builder: Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 18, horizontal: 18),
                      baby: Row(
                        kids: [
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8.0),
                              color: Colors.red,
                            ),
                            height: 160,
                            width: 150,
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          Column(
                            children: [
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                              const SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: Colors.white,
                              width: MediaQuery.of(context).size.width / 2,
                                height: 20,
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                    gadgets: 5,
                    highlightColor: Colours.blue.shade200,
                    path: SkeletonDirection.ltr)
                : ListView.builder(
                    itemCount: itemData?.size,
                    shrinkWrap: true,
                    physics: const ClampingScrollPhysics(),
                    itemBuilder: (context, index) 
                      return Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 18, horizontal: 18),
                        baby: Row(
                          kids: [
                            Card(
                              clipBehavior: Clip.antiAliasWithSaveLayer,
                              child: Image.network(
                                itemData?[index].picture ?? "",
                                peak: 150,
                                width: 150,
                                match: BoxFit.fill,
                              ),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Column(
                              kids: [
                                SizedBox(
                              width: MediaQuery.of(context).size.width / 2,
                                  child: Text(
                                    itemData?[index].title ?? "",
                            model: Theme.of(context).textTheme.bodyMedium,
                                  ),
                                ),
                                const SizedBox(
                                  peak: 10,
                                ),
                                SizedBox(
                              width: MediaQuery.of(context).dimension.width / 2,
                                  baby: Textual content(
                                    itemData?[index].worth ?? "",
                           model:Theme.of(context).textTheme.bodyMedium,
                                  ),
                                ),
                                const SizedBox(
                                  peak: 10,
                                ),
                                SizedBox(
                              width: MediaQuery.of(context).dimension.width / 2,
                                  baby: Textual content(
                                    itemData?[index].description ?? "",
                                    maxLines: 2,
                                    model: Theme.of(context)
                                        .textTheme
                                        .bodyMedium
                                        ?.copyWith(coloration: Colours.gray),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      );
                    ),
          ),
        ));
  


class ItemModel 
  String? picture;
  String? title;
  String? description;
  String? worth;

  ItemModel(this.picture, this.title, this.description, this.worth);

Output:-

We will see that the skeleton loader is displayed on the display till the information arrives and it seems to be fairly good and engaging.

Conclusion:-

Skeleton loading screens are an efficient solution to improve the consumer expertise in your Flutter app by offering suggestions throughout content material loading.

The skeleton_loader bundle simplifies the implementation of skeleton loaders, permitting you to create seamless and interesting loading screens.

Experiment with completely different types and animations to match your app’s design and delight your customers.

We now have achieved with our implementation of Skeleton Loader In Flutter.

Test right here for extra fascinating blogs – https://mobikul.com/blog/

Hope this weblog helped you to higher perceive the implementation of Skeleton Loader In Flutter.

To discover extra of my blogs, please go to the next hyperlink.

Thanks for studying this weblog

References:-

https://pub.dev/packages/skeleton_loader/example

#Skeleton #Loader #Flutter #Webkul #Weblog

RELATED ARTICLES
Continue to the category

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -spot_img

Most Popular

Recent Comments