I have a very simple animation for a splash screen of a shaking jar that I made in Adobe After Effects and exported it via LottieFiles extension as json, it works normal but every couple of times when I open the app the animation glitches (see pictures below), I can't figure it out and have tried searching for a solution without any success. The problem is the glitching happens random (sometimes it's a couple of times in row when I open app, sometimes it's every x times). This was tested on multiple android devices with same result.
Code for splash screen:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: isDarkMode()? const Color(0xFF31302f) : const Color(0xFFfcfaf6),
body:
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
SizedBox(height: height(context)*0.08),
Stack(
children: [
Image.asset(
isDarkMode()? 'assets/crnikruh.png' : 'assets/bijelikruh.png',
height: height(context)*0.3,
width: height(context)*0.3,
),
Padding(
padding: EdgeInsets.only(top: height(context)*0.01),
child: Lottie.asset(
'lottie/jaranimation.json',
width: height(context)*0.3,
height: height(context)*0.3,
frameRate: FrameRate.max,
fit: BoxFit.fill,
),
)
],
),
],
),
),
);
}
}
This is the normal view
This is the animation with the problem
I've found a workaround for this issue. It's not quite the solution but it works. So, I think the problem was it wasn't loading properly every time and the trick that helped me was that I wrapped the lottie asset with visibility widget and delayed the visibility by 50 milliseconds, so it got that extra 50 milliseconds on startup to properly load the asset.
Related
We have developed a flutter app that uses carousel slider 4.1.1 for image slider viewing. It works with little data but when the data in the list is big it crashes the app and the debug console terminated saying in the last line
"onServiceDisconnected (crash or killed by oom): pid=0 bindings:WV"
when loading a bunch of images from the network
Below is a piece of code that we have used
CarouselSlider(
options:
CarouselOptions(
autoPlay: false,
viewportFraction:
1.0,
enlargeCenterPage:
false,
),
items: (jsonDecode(data[
index]
[
“Images”])
as List<
dynamic>)
.cast<String>()
.map((item) =>
ClipRRect(
borderRadius:
BorderRadius.all(
Radius.circular(10.0)),
child:
CachedNetworkImage(
imageUrl:
item,
width: MediaQuery.of(context)
.size
.width,
fit: BoxFit
.cover,
progressIndicatorBuilder: (context,
url,
downloadProgress) =>
CircularProgressIndicator(value: downloadProgress.progress),
errorWidget: (context,
url,
error) =>
Icon(Icons.error),
),
))
.toList(),
)
We have also tried to set the autoplay attribute to true but the app still crashes. Can someone please help how to fix this crash in the flutter app?
I'm sorry that I have never see or used an actual device with android OS such as Google pixcel, but I found that gray-out area on top of screen like screen shot below.
*This is "Pixcel 4 API 30 mobile emulator" called from vsCode.
And I found this kind of dead area on Pixcel 5 emulator as well, but am not sure that this is somthing in common for all android OS.
Finally, I'd like to ask that if I should avoid something to display here or this is only emulator matters and do not have to care about this ?
In case that I have to care this area with developing by flutter, should I intentionally separate code or design between these kind of device and the others, as I'm usually using Iphone emulator and actual machine but have never seen this area and beleive I need not to care this kind of area and adopting top-margin for this problem.
Thanks for your helpful comment.
Code Added:
class holder extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(_modalProvider );
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
// flex: 1,
child: Container(
margin: EdgeInsets.only(top: 40),//should I do this to avoid this area?
width: double.infinity,
height: 40,
// color: Colors.grey,
alignment: Alignment.topLeft,
child: Image.asset('images/flutter.png'),
),
),
Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Folders(
name: "list",
subTitle: null,
),
],
)
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container(
width: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
child: const Icon(
Icons.search_sharp,
color: MyStyle.mainColor,
),
onPressed: () {
ref.read(_modalProvider.notifier).update((state){
showTopModalSheet<String?>(context, DumyModal());
});
},
),
),
);
}
}
That area will be also visible in real devices so you should take that area into consideration. But Scaffold widget will start the rendering from below that point so you don't have to think about it.
İf you want to change color of that area, you can
Container(
decoration: BoxDecoration(color: Color.white),
child: SafeArea(
Scaffold:...
)
)
It also effects IOS and Android devices differently, I believe that is why it is only visible in some devices
I need to implement such a widget in Flutter. Full version of the page, where this widget is going to be used is here Maybe you know build-in widgets, which could help me. But if there are none, what is the best way to implement this widget?
You can use a ListTile
ListTile(
leading: const Text("Lbikgabsb"),
trailing: Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
),
],
),
),
Alternatively you can use:
SizedBox(
height: your_height,
width:double.infinity,
child: Row(
children:[
Text("Lbikgabsb"),
Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
],
),
),
You can choose whichever approach works best for your app
Long story short, I use flutter's camera dependency. Everything works fine until it's time for the camera preview to show up, but it doesn't even though the camera hardware is activated already (I use emulator so I can see the webcam indicator lamp is active). When I hot reload it, the preview shows. I tried programmatical force rebuild but it doesn't work because the problem lays on the value of camera controller (that's what the output says).
Without further ado, here's my snippet
if (camCtrl == null || !camCtrl.value.isInitialized) {
return LoadingOverlay();
} else if (camCtrl.value.isInitialized) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
SizedBox(
width: displayWidth(context),
child: camCtrl.value.isInitialized
? CameraPreview(camCtrl)
: LoadingOverlay(),
),
Padding(
padding: EdgeInsets.only(bottom: 20),
child: FloatingActionButton(child: Icon(Icons.camera), onPressed: () {}),
)
],
);
}
This happens due to the mishandling of Futures.
Try to go through your Code again.
I guess you have missed the await keyboard somewhere.
Also, you can use a FutureBuilder here.
If none helps, refer this - https://flutter.dev/docs/cookbook/plugins/picture-using-camera
I have a MultiBlocProvider assigned for an app that has a Bottom Navigation Bar to navigate through main routes like Home, Search, Wishlist ...
I use setState(){} to change the currentPage for each route.
Recently I've added Blocs to each of them by using flutter_bloc package and I'm using BlocProvider to provide the bloc to each BlocBuilder,
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: Scaffold(
key: _scaffoldKey,
body: PageStorage(
child: Stack(
children: <Widget>[
AnimatedSwitcher(
duration: Duration(milliseconds: 200),
child: BlocProvider<WishlistBloc>(
create: (BuildContext context) => WishlistBloc(WishlistRepository()),
child: currentPage),
),
bottomBar(currentPageScroll)
],
),
bucket: bucket,
),
),
);
}
Is it ok to use MultiBlocProvider to provide all the BlocsProviders I need?
they could be more than 10 providers, would it affect the performance of the app?
It's definitely OK, MultiBlocProvider created for this purposes. But you need to understand, that if you with your creation also send(for e.x.) initialize event which started loading in all 10 blocs some data you will have some issues. So, if you will have some performance issues, please create separate SO question and community will help to find root-cause of this.