Shimmer Effect In Flutter Using Shimmer Package || Shimmer Flutter || Shimmer Effect Flutter Hindi

Опубликовано: 07 Май 2026
на канале: Apna Tuition Coding

485

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class ShimmerEffect extends StatefulWidget {
ShimmerEffect({super.key});

@override
State ShimmerEffect createState() = _ShimmerEffectState();
}

class _ShimmerEffectState extends State ShimmerEffect {
var isLoading = true;

@override
void initState() {
Future.delayed(Duration(seconds: 5), () {
setState(() {
isLoading = false;
});
});
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Shimmer Effect'),
),
body: isLoading ? _shimmerView() : _loadedView());
}
}

Widget _loadedView() {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
var indx = Random().nextInt(5);
return Container(
color: colors[indx + 1],
margin: const EdgeInsets.all(10),
child: Row(
children: [
Container(
height: 80,
width: 80,
margin: const EdgeInsets.all(10),
color: colors[indx],
),
Column(
children: [
Text("Hello Title $index"),
Text("Hello Subtitle $index"),
],
)
],
),
);
},
);
}

Widget _shimmerView() {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
color: Colors.grey.shade200,
margin: const EdgeInsets.all(10),
child: Shimmer.fromColors(
baseColor: Colors.grey,
highlightColor: Colors.grey.shade300,
child: Row(
children: [
Container(
height: 80,
width: 80,
margin: const EdgeInsets.all(10),
color: Colors.black,
),
Column(
children: [
Container(
height: 15,
width: 200,
color: Colors.green,
),
const SizedBox(height: 10),
Container(
height: 15,
width: 200,
color: Colors.redAccent,
),
],
)
],
),
),
);
},
);
}

var colors = [
Colors.redAccent,
Colors.greenAccent,
Colors.amberAccent,
Colors.blueAccent,
Colors.cyanAccent,
Colors.deepPurpleAccent
];

////
Beginners tutorial course for Dart Programming for Flutter mobile app development in DartPad. This is 3 to 4 hour course where you be mentored to dive into core Dart concepts in a step by step fashion. At the end of this course, you'll have a strong foundation of Dart programming.

What You'll Learn:
1. Dart Setup and required software Installation
2. Exploring the first Dart application
3. Built-in Data Types and variable declarations
4. Conditional Statements
5. Loops
6. Functions and Methods
7. Exception Handling
8. Object Oriented concepts
9. Inheritance, Abstract Class, Interface and Polymorphism
10. Functional Programming: Lambdas and Higher-Order Functions
11. Dart Collection: List, Set and Map etc.
Checkout Playlist Link Below For Dart Language Playlist
   • Dart Tutorial for Beginners In Hindi [ For...

--------------------------------------------------------------------
Check out my maths channel for 10th 11th 12th Maths And Engineering Maths :
   / @apnatuition55
//Tags

Shimmer flutter ,
Shimmer Effect flutter ,
Shimmer Loading flutter ,
Shimmer Loading Effect flutter ,
Autocomplete textfield in flutter ,
flutter ,
what is flutter ,
why flutter ,
flutter tutorial for beginners,
flutter app development,
flutter app,
flutter 2022,
flutter tutorial,
flutter kicks,
flutter tutorial code with harry,
flutter tutorial in telugu,
flutter tutorial for beginners in malayalam,
flutter tutorial freecodecamp,
flutter tutorial codepur,
---------------------------------------------------------

Let's get in touch! [Vivek Lodh]

Facbook Personal Id -   / vivek.lodh.90
Facebook Id - https://www.facebook.com/profile.php?...
Instagram UserName - apnatuitioncoding
Instagram Personal UserName - iamviveklodh
Telegram - https://t.me/apna_tuition

Thank you for watching ☺️

Guys Please Subscribe And Share This Channel ☺️💞

#flutterWithVivek #apnatuitioncoding
#flutterUI #dart #dartLanguage #dartForFlutter #flutter #viveklodh #apnatuition