How to stop Skeletonizer shimmer effect and load widget data correctly after specific duration in flutter?

Question

I am trying to navigate from Splash Screen to Login Page and want to show Skeleton data for a duration before rendering the correct data. I am using the Skeletonizer package but if I wrap my ListView with Skeletonizer, the Login page shows the skeleton shimmering effects perpetually. I want the widget data such as text fields and buttons to render. How do I do that?

Here's the Flutter code in brief:

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
....

@override
Widget build(BuildContext context) {
return Scaffold(
...
child: Skeletonizer(
            child: ListView(
              shrinkWrap: true,
              padding: const EdgeInsets.all(50),
              // crossAxisAlignment: CrossAxisAlignment.center,
              // mainAxisSize: MainAxisSize.min,
              children: [
                Align(
                  alignment: Alignment.center,
                  child: GradientIcon(
                    icon: Icons.lock_rounded,
                    gradient: LinearGradient(
                      colors: [
                        Colors.lightGreen.shade900,
                        Colors.lightGreen.shade800,
                        Colors.lightGreen.shade700,
                        Colors.lightGreen.shade600,
                      ],
                    ),
                    size: 100,
                  ),
                ),
                const SizedBox(height: 25),
                SizedBox(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(welcomeMsg,
                        textAlign: TextAlign.center,
                        maxLines: 2,
                        style: GoogleFonts.merriweather(
                          fontSize: 12,
                          fontWeight: FontWeight.bold,
                          color: Colors.grey.shade800,
                        )),
                  ),
                ),
                const SizedBox(height: 25),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.75,
                  child: Divider(
                    color: Colors.grey.shade600,
                    indent: 15,
                    endIndent: 15,
                  ),
                ),
                const SizedBox(height: 25),
                SizedBox(
                    width: MediaQuery.of(context).size.width * 0.75,
                    child: CustomTextField(
                        controller: emailController,
                        hintText: '[email protected]',
                        obscureText: false,
                        labelText: 'Email',
                        prefixIcon: Icons.email_rounded)),
                const SizedBox(height: 25),
                SizedBox(
                    width: MediaQuery.of(context).size.width * 0.75,
                    child: CustomTextField(
                        controller: passwordController,
                        hintText: '********',
                        obscureText: true,
                        labelText: 'Password',
                        prefixIcon: Icons.key_rounded)),
                const SizedBox(height: 25),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.75,
                  child: CustomButton(
                      text: 'LOGIN',
                      onPressed: signUserIn,
                      hpadding: 15,
                      wpadding: 15,
                      borderRadius: 15.0,
                      color: const Color.fromARGB(255, 16, 58, 40)),
                ),
              ]
            ),
          ),
        ),
      ),
    ));
  }
}

Thanks in advance!

Answer 1

You are missing the enabled property usage.

That property is responsible to show( or not) the skeleton effect.

Set a variable in properties like :

bool showSkeleton =true;

Add a Future function that resolves in your set amount of Duration and remember to setState on assignment of showSkeleton to false.

then in Skeleton widget, assign it to enabled like:

Skeleton(
enabled:showSkeleton,
child:Container()
)