Shine Beyond Package Used to make various type of animated designs For your List & Grid Views data when fetches and loading, One of the Advantages of using this Packages is You don't have to take a long time to organize and create animated widgets.
Steps To Use the Package:
STEP 1:
Go to Package and get in to Installing section, Then Copy the dependency Code.
STEP 2:
Go to "pubspec.yaml" of your project and paste it under the dependencies section.
STEP 3:
Add these lines of code in to your ListView or GridView Screen:
var isLoading = true, isStarted = false;
@override
void initState() {
if (!isStarted) {
_getDataInToList();
}
isStarted = true;
super.initState();
}
Future _getDataInToList() async {
Future.delayed(Duration(seconds: 2), () {
_list = widget.list;
setState(() {
isLoading = false;
});
});
}
STEP 4:
Initialize ShineGridLoader class in your Code and send your List or GridView And Send "CHILD" parameter just like below:
- Body Section For Grid View:
return isLoading ?
return ShineGridLoader(
child: ShineGridWidget(itemCount:itemCount, gridWidgetType: GridWidgetType.tween,duration: Duration(milliseconds: 20)),
itemCount: itemCount,
highlightColor: Colors.lightGreen[300],
direction: ShineDirection.ltr,
) :
return GridView.builder(
itemBuilder: (ctx, i) {
Object object = _list[i];
return Text(object.name);
},
itemCount: itemCount
);
- Body Section For List View:
return isLoading ?
return ShineListLoader(
child: ShineListWidget(itemCount:itemCount, listWidgetType: ListWidgetType.mix,duration: Duration(milliseconds: 20)),
itemCount: itemCount,
highlightColor: Colors.lightGreen[300],
direction: ShineDirection.ltr,
) :
return ListView.builder(
itemBuilder: (ctx, i) {
Object object = _list[i];
return Text(object.name);
},
itemCount: itemCount
);
Now Run Your Application and see the Results...
Note that:
- "ShineListLoader" works with (ShineListWidget and ListWidgetType).
- "ShineGridLoader" works with (ShineGridWidget and GridWidgetType).
Some Examples of Package Usage:
1- GridView - rotation
2- GridView - beating
3- GridView - tween
4- ListView - mix
5- ListView - rectangular
6- ListView - box
GitHub - Mahammad Bakr GitLab - Mahammad Bakr Facebook - Mahammad Bakr Facebook - Exon Tech Email: [email protected] Phone: +9647502289291