milad-akarie / skeletonizer Goto Github PK

View Code? Open in Web Editor NEW

284.0 284.0 19.0 8.96 MB

License: MIT License

Dart 96.84% Kotlin 0.10% Swift 0.33% Objective-C 0.03% Ruby 1.17% HTML 1.52%

skeletonizer's People

Contributors

Stargazers

Watchers

Forkers

aziz-iyad jeyaraman22 kkimj omaralmgerbie dangdungcntt sunya1 fahami flutterworks peterjidamva wwwtony5488 vijaykarthiktk bobokhuja abdosaidbassuony khatibfx

skeletonizer's Issues

Unnecessary uses-material-design: true

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.

[BUG] Skeletonized container doesn't shrink in ExpansionTile.

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.

Not working

Working

Example

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)),
          ]),
        ),
      ),
    );
  }
}

Working example

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),
          ]),
        ),
      ),
    );
  }
}

Could not convert SwitchListTile widget to skeleton

Is there a known issue where skeletonizer would render the fake data instead of the loader?

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!

Possibility to sync animation across skeletonizer

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.

SliverSkeletonizer cannot call onTap

SliverSkeletonizer(
            enabled: false,
            child: SliverList.builder(itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text('test'),
                onTap: () {
                  print('onTap');
                },
              );
            }),
          ),

cannot print 'onTap'

Scrolling is not working in reorderable_grid_view package

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));
}`

Using Skeletonizer as a ConnectionState.waiting in FutureBuilder

Hey!
I was wondering if it's possible to use the Skeletonizer as a loading state for when FutureBuilder is in the waiting state, tried to this but the animation doesn't work.

Thanks

`SelectableText` does not get detected

Documentation:

https://api.flutter.dev/flutter/material/SelectableText-class.html

Description:

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"),

Proposal:

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.

Skeleton not scrolling horizontally

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.

26.07.2023_01.35.31_REC.mp4

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;
  }
}

Color of Skeleton

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

Can't find widget by type in widget tests.

If you try to find widget by Skeletonizer type, it throws an error instead of passing findsOneWidget matcher.

Code sample

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);
  });
}

Stacktrace

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

Null check operator used on a null value

Description

@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?

Error Trace

══╡ 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

Can't change color

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

How do I set the color of the animation?

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

Animation to ListViewBuilder items effects as they are one piece

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, ), ), ], ), ), ], ), ), ), ); }

Different skeleton behaviour with newer versions

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)

31.07.2023_22.06.22_REC.mp4

version 0.4.0 (unexpected behaviour)

31.07.2023_22.08.04_REC.mp4

version 0.7.0 (latest version; unexpected behaviour still)

18.08.2023_14.05.21_REC.mp4

Support for nested Skeletons

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.

Icons shimmer boxes is missplaced to the bottom a bit

First of all thanks for this great package I think it will have great potential

Please take a look at this

Possible to use with Sliver List/Grid?

This is a super cool plugin! Thank you!

I am trying to use this within a CustomScrollView that usually renders SliverList and SliverGrids.

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?

Performance Issues under Desktop

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.

Disable uses-material-design: true

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?

Animations when content loading has finished

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.

Not work properly in RTL

When changing direction to RTL the skeleton hides,
I faced this issue when upgrading the Flutter SDK to 3.16.2

Can't skeletonize svg widget

Not working in Release Mode

Its not working in release mode, getting above error,
Can you solve it, i need to upload my app on playstore.

`CircularAvatar` does not get detected

Documentation:

https://api.flutter.dev/flutter/material/CircleAvatar-class.html

Description:

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),
),

Proposal:

Let's treat the CircleAvatar in the same way as the Icon widget and display a circle shimmer when the content is loading.

cachable Skeletonizer would be better i i think

add id to cache, reuse animation before next time request response sent to client

Issue in release model.

When I debug it works perfectly, but in release mode it has problems. some of the widgets do not show.

Weird behaviour when using a BackdropFilter

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.

Skeleton.leaf has no effect

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),
              ),
            ),
          ),
        ),
      ),
    );

above code result:

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

milad-akarie / skeletonizer Goto Github PK

skeletonizer's People

Contributors

Stargazers

Watchers

Forkers

skeletonizer's Issues

Not working

Working

Documentation:

Description:

Proposal:

Description

Error Trace

Documentation:

Description:

Proposal:

Recommend Projects

Recommend Topics

Recommend Org