milad-akarie / skeletonizer Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
https://api.flutter.dev/flutter/material/SelectableText-class.html
In the context of my application, while normal Text
widgets are detected and display the expected shimmer effect, as seen with:
Text("demo"),
the SelectableText
widgets do not exhibit the same behavior. No shimmer effect appears with:
SelectableText("demo"),
I propose that SelectableText
be treated in the same manner as the Text
widget. This means that SelectableText
should serve as a direct drop-in replacement to Text
, displaying the same effects and behaviors.
In my code, scrolling in not working during loading state in ReorderableGridView or ReorderableListView widget of reorderable_grid_view package.
Can here is my below code
` @OverRide
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
loadData();
});
}
@OverRide
Widget build(BuildContext context) {
return SafeArea(
child: WillPopScope(
onWillPop: () async {
Navigator.pop(context);
return true;
},
child: Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text(
AppLocalizations.of(context)
?.translate(StringValue.table_info_app_bar_title) ??
"Table Info",
),
actions: [
IconButton(
onPressed: () {
// Toggle between list and grid view
setState(() {
isGridView = !isGridView;
});
},
icon: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: isGridView
? const Icon(
Icons.list,
key: ValueKey('list'),
)
: const Icon(
Icons.grid_view,
key: ValueKey('grid'),
),
),
tooltip: isGridView
? (AppLocalizations.of(context)
?.translate(StringValue.common_list_view_tooltip) ??
"Switch to List View")
: (AppLocalizations.of(context)
?.translate(StringValue.common_grid_view_tooltip) ??
"Switch to Grid View"),
),
IconButton(
onPressed: () async {
showDialog(
context: context,
builder: (context) {
return NewTableDialog(
onCreate: (newTableInfoModel) async {
// Handle the creation of the new table here
Constants.debugLog(TableScreen,
'Created new table: $newTableInfoModel');
int? result = await RestaurantRepository()
.addNewTableInfo(newTableInfoModel);
Constants.debugLog(
TableScreen, "Created new:$result");
setState(() {
loadData();
});
Navigator.of(context).pop();
if (result != null && result > 0) {
Constants.customAutoDismissAlertDialog(
classObject: TableScreen,
context: context,
descriptions: AppLocalizations.of(context)
?.translate(StringValue
.table_added_successfully_text) ??
"New table has been added successfully.",
title: "",
titleIcon: Lottie.asset(
MediaQuery.of(context).platformBrightness ==
Brightness.light
? StringImagePath
.done_light_brown_color_lottie
: StringImagePath.done_brown_color_lottie,
repeat: false,
),
navigatorKey: navigatorKey);
} else {
Constants.customAutoDismissAlertDialog(
classObject: TableScreen,
context: context,
descriptions: AppLocalizations.of(context)
?.translate(StringValue
.table_failed_to_added_text) ??
"Fail to add new table info.",
title: "",
titleIcon: Lottie.asset(
MediaQuery.of(context).platformBrightness ==
Brightness.light
? StringImagePath
.done_light_brown_color_lottie
: StringImagePath.done_brown_color_lottie,
repeat: false,
),
navigatorKey: navigatorKey);
}
},
);
},
);
},
icon: const Icon(
Icons.add,
),
tooltip: AppLocalizations.of(context)
?.translate(StringValue.add_table_icon_tooltip_text) ??
"Add a new Table",
),
],
),
body: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500)
child: isGridView
? Skeletonizer(enabled: isLoading, child: buildGridView())
: Skeletonizer(enabled: isLoading, child: buildListView()),
)),
),
),
);
}
Widget buildGridView() {
return ReorderableGridView.builder(
itemCount: list == null ? 0 : list!.length,
itemBuilder: (context, index) => buildGridItem(list![index], index),
shrinkWrap: true,
addAutomaticKeepAlives: false,
physics:
const ClampingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
addRepaintBoundaries: true,
onReorder: onReOrder,
placeholderBuilder: (dragIndex, dropIndex, dragWidget) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.tertiary),
borderRadius: BorderRadius.circular(10.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: const FrostedGlassWidget(
child: SizedBox(),
),
),
);
},
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1.0,
),
);
}
Widget buildGridItem(TableInfoModel model, var index) {
return Card(
key: ValueKey("$index"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 5,
child: Stack(
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: () async {
await updateTableInfo(model, index);
},
borderRadius: BorderRadius.circular(5.0),
child: Center(
child: Padding(
padding: const EdgeInsets.only(
left: 10, right: 10, top: 30, bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
"${AppLocalizations.of(context)?.translate(StringValue.table_name_label_text) ?? "Table Name"}: ${model.name}",
textAlign: TextAlign.start),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
"${AppLocalizations.of(context)?.translate(StringValue.table_nos_of_chairs_label_text) ?? "Nos Of Chairs per Table"}: ${model.nosOfChairs}",
textAlign: TextAlign.start),
),
],
),
],
),
),
),
),
),
Positioned(
top: 5.0, // Adjust the top position as needed
right: 5.0, // Adjust the right position as needed
child: GestureDetector(
onTap: () async => onDeletedAction(model, index),
child: const Icon(
Icons.delete,
color: Colors.red,
size: 24.0,
),
),
),
],
),
);
}
Widget buildListView() {
return ReorderableListView.builder(
itemCount: list == null ? 0 : list!.length,
itemBuilder: (context, index) => buildListItem(list![index], index),
onReorder: onReOrder,
proxyDecorator: (child, index, animation) {
return AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget? child) {
final double animValue =
Curves.easeInOut.transform(animation.value);
final double elevation = lerpDouble(1, 6, animValue)!;
final double scale = lerpDouble(1, 1.02, animValue)!;
return Transform.scale(
scale: scale,
child: buildListItem(list![index], index),
);
},
child: child,
);
},
);
}
Widget buildListItem(TableInfoModel model, var index) {
return Card(
key: ValueKey("$index"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 5,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Material(
color: Colors.transparent,
child: InkWell(
onTap: () async {
await updateTableInfo(model, index);
},
borderRadius: BorderRadius.circular(5.0),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
"${AppLocalizations.of(context)?.translate(StringValue.table_name_label_text) ?? "Table Name"}: ${model.name}",
textAlign: TextAlign.start),
),
],
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
"${AppLocalizations.of(context)?.translate(StringValue.table_nos_of_chairs_label_text) ?? "Nos Of Chairs per Table"}: ${model.nosOfChairs}",
textAlign: TextAlign.start),
),
],
),
],
),
),
Visibility(
visible: index == 0 ? false : true,
child: IconButton(
onPressed: () async {
await onMoveItemUp(index);
},
icon: const Icon(Icons.arrow_upward_rounded),
),
),
Visibility(
visible: index < (list!.length - 1),
child: IconButton(
onPressed: () async {
await onMoveItemDown(index);
},
icon: const Icon(Icons.arrow_downward_rounded),
),
),
GestureDetector(
onTap: () async => onDeletedAction(model, index),
child: const Icon(
Icons.delete,
color: Colors.red,
size: 24.0,
),
),
],
),
),
),
),
],
),
);
}
List? _placeHolderData() {
return List.generate(
25, (index) =>
TableInfoModel(
name: "", id: index, nosOfChairs: 4, sortOrderIndex: index));
}`
If you try to find widget by Skeletonizer
type, it throws an error instead of passing findsOneWidget
matcher.
void main() {
testWidgets('skeleton', (driver) async {
final widget = Skeletonizer(child: Text("test"));
await driver.pumpWidget(MaterialApp(home: widget));
expect(find.byType(Skeletonizer, skipOffstage: false), findsOneWidget);
});
}
Testing started at 12:24 ...
══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following TestFailure was thrown running a test:
Expected: exactly one matching candidate
Actual: _TypeWidgetFinder:<Found 0 widgets with type "Skeletonizer": []>
Which: means none were found but one was expected
When the exception was thrown, this was the stack:
#4 main.<anonymous closure> (file:///C:/Users/kkras/mobile/test/models/base/paging_result_model_test.dart:75:5)
<asynchronous suspension>
#5 testWidgets.<anonymous closure>.<anonymous closure> (package:flutter_test/src/widget_tester.dart:183:15)
<asynchronous suspension>
#6 TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:1017:5)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from package:stack_trace)
This was caught by the test expectation on the following line:
file:///C:/Users/kkras/mobile/test/models/base/paging_result_model_test.dart line 75
The test description was:
skeleton
════════════════════════════════════════════════════════════════════════════════════════════════════
Test failed. See exception logs above.
The test description was: skeleton
When changing direction to RTL the skeleton hides,
I faced this issue when upgrading the Flutter SDK to 3.16.2
When I try to use Skeletonizer inside ExpansionTile and close the tile, Skeletonizer doesn't shrink and hide like other widgets. You can see that in the video below.
import 'package:flutter/material.dart';
import 'package:skeletonizer/skeletonizer.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: ExpansionTile(title: Text("Test"), children: [
Skeletonizer(
child: Container(height: 60, width: 60, color: Colors.black)),
]),
),
),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: ExpansionTile(title: Text("Test"), children: [
Container(height: 60, width: 60, color: Colors.black),
]),
),
),
);
}
}
Provided example has no any effect.
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Center(
child: Skeletonizer(
child: Skeleton.leaf(
child: Card(
child: ListTile(
title: Text('The title goes here'),
subtitle: Text('Subtitle here'),
trailing: Icon(Icons.ac_unit, size: 40),
),
),
),
),
),
);
flutter doctor:
[✓] Flutter (Channel beta, 3.21.0-1.0.pre.2, on macOS 14.4 23E214 darwin-arm64, locale ru-RU)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 15.2)
✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[!] Android Studio (version unknown)
✗ Unable to determine Android Studio version.
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.4)
[✓] VS Code (version 1.88.1)
[✓] Connected device (4 available)
[✓] Network resources
I noticed that there seems to be a huge performance drop by using Skeletonizer on MacOS.
(Also outlined by this reddit comment)
It most likely might be a Flutter problem, thus I am just creating this issue to keep track of the state of things.
P.S. if you do not like tracking issues like this in your repository, feel free to close/ delete it.
SliverSkeletonizer(
enabled: false,
child: SliverList.builder(itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('test'),
onTap: () {
print('onTap');
},
);
}),
),
cannot print 'onTap'
This is a super cool plugin! Thank you!
I am trying to use this within a CustomScrollView
that usually renders SliverList
and SliverGrid
s.
During loading, when I try to use a fake SliverList
:
_skeletonedLoadingList(BuildContext ctx) => Skeletonizer(
enabled: true,
child: SliverList.separated(
itemCount: 7,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text('Item number $index as title'),
subtitle: const Text('Subtitle here'),
trailing: const Icon(Icons.ac_unit),
),
);
},
separatorBuilder: (ctx, i) =>
const Divider(thickness: 0.8, height: 2),
),
);
... I get this error:
A RenderSkeletonizer expected a child of type RenderBox but received a child of type RenderSliverList.
Is it possible to use this with Sliver
widgets?
@Milad-Akarie Continuously getting this error on 0.8.0
. Downgrading to 0.7.0
resolves this null
check error.
The error happens when one Skeletonizer
widget has a nested child that also has a Skeletonizer
wrapped widget. At least this is how I was able to reproduce the issue.
Refactoring my code solved the issue, but figured I would report this item in case it was an unexpected bug. Since it does not happen on 0.7.0
, I assume it may be an accidental regression?
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following _TypeError was thrown during paint():
Null check operator used on a null value
The relevant error-causing widget was:
_Skeletonizer
When the exception was thrown, this was the stack:
#0 _RenderSkeletonBase.paint (package:skeletonizer/src/rendering/render_skeletonizer.dart:201:19)
#1 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#2 RenderSliverSingleBoxAdapter.paint (package:flutter/src/rendering/sliver.dart:1828:15)
#3 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#4 RenderSliverEdgeInsetsPadding.paint (package:flutter/src/rendering/sliver_padding.dart:263:15)
#5 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#6 RenderViewportBase._paintContents (package:flutter/src/rendering/viewport.dart:690:17)
#7 RenderViewportBase.paint (package:flutter/src/rendering/viewport.dart:675:7)
#8 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#9 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#10 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#11 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#12 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#13 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#14 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#15 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#16 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#17 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#18 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#19 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#20 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#21 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#22 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#23 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#24 RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:618:11)
#25 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#26 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#27 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#28 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#29 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#30 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#31 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#32 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#33 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#34 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#35 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#36 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2875:15)
#37 RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#38 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#39 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#40 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#41 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#42 PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:472:12)
#43 RenderLeaderLayer.paint (package:flutter/src/rendering/proxy_box.dart:4755:13)
#44 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#45 _RenderLayoutBuilder.paint (package:flutter/src/widgets/layout_builder.dart:338:15)
#46 SkeletonizerPaintingContext.paintChild (package:skeletonizer/src/painting/skeletonizer_painting_context.dart:96:11)
#47 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#48 _RenderSkeletonBase.paint (package:skeletonizer/src/rendering/render_skeletonizer.dart:206:11)
#49 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#50 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#51 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#52 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#53 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#54 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#55 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#56 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#57 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#58 PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:472:12)
#59 RenderLeaderLayer.paint (package:flutter/src/rendering/proxy_box.dart:4755:13)
#60 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#61 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#62 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#63 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#64 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#65 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#66 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#67 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#68 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#69 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#70 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#71 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#72 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#73 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#74 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#75 RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2555:17)
#76 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#77 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#78 _RenderColoredBox.paint (package:flutter/src/widgets/basic.dart:7756:15)
#79 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#80 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#81 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#82 RenderAnimatedOpacityMixin.paint (package:flutter/src/rendering/proxy_box.dart:1060:11)
#83 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#84 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#85 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#86 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#87 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#88 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#89 RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2555:17)
#90 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#91 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#92 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#93 RenderAnimatedOpacityMixin.paint (package:flutter/src/rendering/proxy_box.dart:1060:11)
#94 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#95 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#96 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#97 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#98 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#99 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#100 RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2555:17)
#101 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#102 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#103 _RenderColoredBox.paint (package:flutter/src/widgets/basic.dart:7756:15)
#104 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#105 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#106 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#107 RenderAnimatedOpacityMixin.paint (package:flutter/src/rendering/proxy_box.dart:1060:11)
#108 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#109 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#110 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#111 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#112 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#113 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#114 RenderTransform.paint (package:flutter/src/rendering/proxy_box.dart:2555:17)
#115 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#116 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#117 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#118 RenderAnimatedOpacityMixin.paint (package:flutter/src/rendering/proxy_box.dart:1060:11)
#119 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#120 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#121 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#122 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#123 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#124 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#125 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#126 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#127 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#128 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:263:7)
#129 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:244:7)
#130 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#131 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#132 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#133 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#134 RenderOffstage.paint (package:flutter/src/rendering/proxy_box.dart:3752:11)
#135 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#136 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#137 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#138 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#139 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#140 _RenderTheaterMixin.paint (package:flutter/src/widgets/overlay.dart:866:15)
#141 PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:472:12)
#142 PaintingContext.pushClipRect (package:flutter/src/rendering/object.dart:532:7)
#143 _RenderTheater.paint (package:flutter/src/widgets/overlay.dart:1116:38)
#144 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#145 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#146 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#147 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#148 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#149 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#150 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#151 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#152 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2875:15)
#153 RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:410:5)
#154 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#155 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#156 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#157 _RenderInkFeatures.paint (package:flutter/src/material/material.dart:664:11)
#158 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#159 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#160 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#161 RenderPhysicalModel.paint.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:2049:15)
#162 PaintingContext.pushClipRRect (package:flutter/src/rendering/object.dart:561:14)
#163 RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:2036:21)
#164 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#165 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#166 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2875:15)
#167 RenderFlex.paint (package:flutter/src/rendering/flex.dart:1040:7)
#168 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#169 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#170 RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2875:15)
#171 RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:410:5)
#172 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#173 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#174 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#175 _RenderInkFeatures.paint (package:flutter/src/material/material.dart:664:11)
#176 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#177 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#178 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#179 RenderPhysicalModel.paint.<anonymous closure> (package:flutter/src/rendering/proxy_box.dart:2049:15)
#180 PaintingContext.pushClipRRect (package:flutter/src/rendering/object.dart:561:14)
#181 RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:2036:21)
#182 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#183 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#184 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#185 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#186 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:252:13)
#187 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:129:13)
#188 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:3155:7)
#189 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:168:11)
#190 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:111:5)
#191 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:1144:31)
#192 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:496:19)
#193 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:918:13)
#194 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:360:5)
#195 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1297:15)
#196 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1227:9)
#197 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1085:5)
#198 _invoke (dart:ui/hooks.dart:170:13)
#199 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:401:5)
#200 _drawFrame (dart:ui/hooks.dart:140:31)
The following RenderObject was being processed when the exception was fired: RenderSkeletonizer#3f59e:
needs compositing
creator: SkeletonizerRenderObjectWidget ← SkeletonizerScope ← _Skeletonizer ←
SelectionRegistrarScope ← SelectionContainer ← _FocusInheritedScope ← Focus ← _ActionsScope ←
Actions ← Listener ← RawGestureDetector ← CompositedTransformTarget ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=1083.0, h=720.0)
layer: OffsetLayer#6c326 DETACHED
size: Size(1083.0, 720.0)
This RenderObject had the following descendants (showing up to depth 5):
child: _RenderLayoutBuilder#39cc7 NEEDS-PAINT
child: RenderLeaderLayer#04fc3 NEEDS-PAINT
child: RenderPointerListener#f3633 NEEDS-PAINT
child: RenderFlex#5f5c8 NEEDS-PAINT
child 1: RenderPadding#45bf0 relayoutBoundary=up1 NEEDS-PAINT
child 2: RenderRepaintBoundary#b9f0b relayoutBoundary=up1 NEEDS-PAINT
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: 'package:flutter/src/rendering/layer.dart': Failed assertion: line 877 pos 12: 'picture != null': is not true.
Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 3253 pos 12: 'attached': is not true.
Another exception was thrown: Null check operator used on a null value
https://api.flutter.dev/flutter/material/CircleAvatar-class.html
I'm using a CircleAvatar
in my application to display an image. I intend for the avatar to show a shimmer effect until the user's image is loaded. However, the CircleAvatar
widget isn't being recognized, so the expected effect doesn't appear. Here's the code I'm using:
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
),
Let's treat the CircleAvatar
in the same way as the Icon widget and display a circle shimmer when the content is loading.
First of all, I wanted to say thanks for this amazing package!
The problem that i encountered is that when skeletonizer is used in a project that do not use the material icons (Its uses-material-design
is set to false
), the following warning will be raised:
package:skeletonizer has `uses-material-design: true` set but the primary pubspec contains `uses-material-design: false`.
If the application needs material icons, then `uses-material-design` must be set to true.
As I searched in the skelonizer project's directory, there is no important use of Material Icons except for examples and tests, which can be replaced by assets or something else. So, removing uses-material-design: true
in skelonizer project's pubspec.yaml will fix the waring mentioned earlier, without causing any new problems.
First of all thanks for this great library that enabled us to implement skeletons in our flutter app very quickly. 🚀
I wondered if there is a possibility to apply a FadeIn animation when the content is loaded. So when the skeleton disappear, the real data could be animated to have a nicer transition.
What I tried so far is wrapping the child of the Skeletonizer
in a AnimationSwitcher
widget, but I guess that does not work, as the child widget is not replaced by the skeleton but rather the contents are replaced by it.
When I debug it works perfectly, but in release mode it has problems. some of the widgets do not show.
Hello Milad, first of all thank you alot for this awesome package.
I am using it in release mode and one time I faced the problem of skeletonizer rendering the fake data instead of the loader, is there a known case/device/OS version... which has this problem?
I know I should mention reproducible steps, but unfortunately I am not yet able to reproduce it.
Thanks again!
This isnt issue, but I cant find to how to change the color of animation.
If this feature doesn't exist yet, maybe it can be used as a feature request. Thanks
Hello,
When i use ListViewBuilder the animation effected to the items looks like they are one item and not each item separated by it's self, how may i apply the effect the animation for each item.
Here's the code
@override Widget build(BuildContext context) { return Skeletonizer( enabled: _isEnabled, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20), child: healthcareProviders.isNotEmpty ? ListView.separated( shrinkWrap: true, itemCount: healthcareProviders.length, physics: const NeverScrollableScrollPhysics(), itemBuilder: (context, index) => HealthcareProviderItem( healthcareProvider: healthcareProviders[index], ), separatorBuilder: (context, index) => const SizedBox(height: 15), ) : NoDataWidget( isCentered: true, svgIcon: AppSvgs.news, text: context.localizations.noHealthcareProviders, ), ), ); }
and this is the item code
@override Widget build(BuildContext context) { return InkWell( splashColor: Colors.transparent, highlightColor: Colors.transparent, onTap: () => context.router.push( AppRoutes.healthcareProviderDetailsRoute, extra: healthcareProvider, ), child: Skeleton.unite( child: SizedBox( height: 200, child: Stack( children: [ HealthcareProviderImage(imageUrl: healthcareProvider.image), Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), gradient: AppColors.imageGradientBlue, ), ), Positioned( bottom: 7, left: 14, right: 15, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( healthcareProvider.name, maxLines: 1, overflow: TextOverflow.ellipsis, style: AppStyles.sectionTitle.copyWith(color: Colors.white), ), const SizedBox(height: 5), Text( healthcareProvider.description, maxLines: 2, overflow: TextOverflow.ellipsis, style: AppStyles.description.copyWith( color: Colors.white, height: 1.1, ), ), ], ), ), ], ), ), ), ); }
I would love to have the possibility to sync the animation across different skeletonizers on one view.
Right now, if I use individual skeletonizer it works, but the animation looks a bit off.
Using several individual skeletonizers has two advantages in my opinion.
First, this would allow me to show the widgets as soon as their state is loaded and keep show the loading animation only for part of the page that needs longer. Secondly, it would allow me to keep the state locally in the individual widgets, making my code cleaner, because I would not have to have a "root" skeletonizer knowing about all the state of the individual widgets on this view.
I do not know if anybody else has this issue, but for me it would make this great package even better.
Wen i define The skeleton like this:
Skeletonizer(
containersColor: Theme.of(context).colorScheme.surface,
....)
is it possible to define the color of the skeleton?
In order to well manage dark mode.
Thanks
add id to cache, reuse animation before next time request response sent to client
Love the package!
A backdrop filter inside a skeletonizer blurs the whole widget instead of only the background. Example picture:
It only blurs the whole widget when the skeletonizer is enabled, when disabled everything works as expected.
Minimal sample code that demonstrates the issue:
Skeletonizer(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.4),
),
width: 100,
height: 100,
child: Text(
'test test test test',
),
),
),
);
My current work around is to change the sigmaX/Y blur to 0 when the skeletonizer is enabled.
With the versions 0.4.0 and newer, there's a bit of lag in showing the complete skeleton of the child of the Skeletonizer
widget, at once.
Kindly compare below👇
version 0.3.0 (normal & expected behaviour)
version 0.4.0 (unexpected behaviour)
version 0.7.0 (latest version; unexpected behaviour still)
I don't use material design in my app, and get the following warning from skeletonizer. (It does not effect the app in any other way)
package:skeletonizer has `uses-material-design: true` set but the primary pubspec contains `uses-material-design: false`. If the application needs material icons, then `uses-material-design` must be set to true.
Is it necessary for the skeletonizer to use material design or can it be disabled?
Hi,
I'm trying to make an ExpansionTile
to work with Skeletonizer
. For this I need to nest 2 Skeletonizers (One for the tile's main content, and one for the content loaded when it is expanded) but it appears that it is not supported as I get this error:
Skeletonizer widgets can not be nested directly, use Skeletonizer.zone as a parent for child Skeletonizers.
Maybe I'm getting skill-issued here but not matter what I tried with a Skeletonizer.zone it didn't work.
So support to have multiple Skeletons would be really nice for Widgets like ExpansionTiles.
Hi @Milad-Akarie, thank you for this great package! I recently came across it and I've been trying to learn how to best use it in my Flutter app.
I need to ask please, is it a normal behaviour for the Skeletonizer widget to not be able to scroll through a list view horizontally? In the attached video, you can see just what I'm talking about. When I perform a hot restart on the app in order to see the Skeletonizer shimmer loading effect, I can't scroll through each horizontal list view unlike when the data from the server has loaded. Thank you in advance for your response.
Also, could you please give me some feedback regarding my use of the package in the example code below? Could I have gone about it in a much better way that you know of? I have definitely taken some time to go through the package documentation and the medium article provided but I could not really use any of the resources to fully understand how I could use it in my app. Though I did get the basic understanding of what I could achieve with the package from the docs, the code style and use of state management in the medium article were beyond my current skill level.
Finally, I need to ask, what do you suggest is the reason for the behaviour between 1:25-01:52
of the video? When the number of characters of the longer dummy text for the podcast name was reduced, it affected the way the skeleton of the artist name was rendered (kindly zoom into the video for a clearer view).
I definitely desire to understand fully how to use this awesome package so I can also talk about it with others and probably write an article of my own on a simple use case like my current one, to create more awareness.
Once again, thank you in advance for your time & response!
P.S I'm a beginner Flutter Dev; please pardon my many questions, sigh.
browse_category.dart
import 'package:flutter/material.dart';
import 'package:skeletonizer/skeletonizer.dart';
import '../core/services/podcast_service.dart';
class BrowseCategory extends StatelessWidget {
final String title;
final String genre;
const BrowseCategory({
super.key,
required this.title,
this.genre = '',
});
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
TextButton(
onPressed: () {},
child: const Text('See All'),
),
],
),
FutureBuilder(
future: PodcastService().fetchPodcasts(genre: genre),
builder: (context, snapshot) {
if (snapshot.hasData) {
return SizedBox(
height: 230,
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(width: 10),
scrollDirection: Axis.horizontal,
itemCount: snapshot.data?.resultCount ?? 0,
itemBuilder: (context, index) {
final items = snapshot.data?.items;
final item = items?[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
item?.artworkUrl600 ?? '',
fit: BoxFit.fill,
height: 150,
width: 150,
),
),
const SizedBox(height: 8),
Text((index + 1).toString()),
SizedBox(
width: 150,
child: Text(
item?.trackName ?? '',
style: const TextStyle(fontSize: 12),
overflow: TextOverflow.ellipsis,
),
),
SizedBox(
width: 150,
child: Text(
item?.artistName ?? '',
style: const TextStyle(
fontSize: 10,
color: Colors.grey,
),
overflow: TextOverflow.ellipsis,
),
)
],
);
},
),
);
}
if (snapshot.hasError) {
return const Center(
child: Text(
'Oops! Something went wrong. Please check your internet connection.'),
);
}
return Skeletonizer(
enabled: true,
child: SizedBox(
height: 230,
child: ListView.separated(
separatorBuilder: (context, index) =>
const SizedBox(width: 10),
scrollDirection: Axis.horizontal,
itemCount: 20,
itemBuilder: (context, index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
'https://via.placeholder.com/600x600',
fit: BoxFit.fill,
height: 150,
width: 150,
),
),
const SizedBox(height: 8),
Text((index + 1).toString()),
const SizedBox(
width: 150,
child: Text(
'Lorem ipsum dolor sit amet consechhj',
style: TextStyle(fontSize: 12),
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(
width: 150,
child: Text(
'Lorem ipsum dolor',
style: TextStyle(
fontSize: 10,
color: Colors.grey,
),
overflow: TextOverflow.ellipsis,
),
)
],
);
},
),
),
);
},
),
],
);
}
}
podcast_service.dart
import 'package:podcast_search/podcast_search.dart';
class PodcastService {
Future<SearchResult> fetchPodcasts({String genre = ''}) async {
final search = Search();
final results = await search.charts(
country: Country.nigeria,
limit: 20,
genre: genre,
);
return results;
}
}
Hi, it would be great if this package could support animations for the container. This feature would allow developers to create more dynamic and visually appealing interfaces. Currently, it's challenging to animate the container directly. Having this feature integrated would significantly enhance the package's functionality and usability.
Proposed Solution:
Consider integrating a way to animate the container, similar to how other animation widgets work in Flutter. This could involve:
Adding a parameter to enable animations.
Providing predefined animation styles or allowing custom animations.
Thank you for considering this feature request!
When I use skeletonizer above this
Image.asset(
'assets/placeholders/some_image_default.jpg',
width: double.infinity,
height: isLongScreenHeight ? 280 : 200,
fit: BoxFit.cover,
),
I get a fully grey square with shader, I want exactly that but with my custom color, but I tried everything and is not changing it
For example this
Skeletonizer.of(context).enabled
? Container(
width: double.infinity,
height: 200,
color: Colors.red,
)
: Image.asset(
'assets/placeholders/${ImageNameMapper.getDefaultImageFromSportId(sportId)}_default.jpg',
width: double.infinity,
height: isLongScreenHeight ? 280 : 200,
fit: BoxFit.cover,
),
is still grey, also tried with containersColor and is not working
the darker grey is the Image.asset, no matter if I change it to a container or whatever is still that grey
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.