How to pre-cache flutter flare animation - flutter

I have a flare loading animation which takes time to load. Is there a way to pre-cache the flutter animation?
final AssetProvider assetProvider = AssetFlare(bundle: rootBundle, name: 'assets/animations/loop.flr');
cachedActor(assetProvider);
Is this the code to cache the actor?
Then How do I load the cached animation?

From https://github.com/2d-inc/Flare-Flutter/issues/180#issuecomment-550584347
You can use FlareCacheBuilder to help you preload flr files for certain sections of your app
code snippet
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: FlareCacheBuilder(
["assets/Filip.flr"],
builder: (BuildContext context, bool isWarm) {
return !isWarm
? Container(child: Text("Loading..."))
: FlareActor(
"assets/Filip.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animationName,
);
},
),
)
],
),
),
);
}

If you want a 'global' load to your .flr files the correct way is using cachedActor just like you posted.
Let's say you previously executed:
final assetProvider = AssetFlare(bundle: rootBundle, name: 'assets/animations/loop.flr');
await cachedActor(assetProvider);
When you try to use the same .flr in a FlareActor it will already try to first load this asset from the same cache you populated before.
In this example the Flare team does exactly this to warmup some files. But notice that they are using an old sintaxe for cachedActor.
You can see at the source code here and here, that when loading the asset it will try at first to load from the cache.
One last thing to finish, FlareCacheBuilder uses the same cachedActor method internally.

Related

Flutter Debugging issue when changing Orientation in emulator

I make responsive UI design in flutter. Then I debuged it in my android emulator. First orientation was portrait and It was a good. Then I changed Orientation and it was a bad UI which isn't expected. If I hot restart or hot reload UI changed that is came expected.
I have to reload or restart always after changing orientation.
Settings already made to autoreloading after save.
How to resolve this issue?
You need to make your UI responsive.
You can do it with the "MediaQuery".
Exemple :
return Scaffold(
appBar: AppBar(
title: Text("Responsive Container"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height/ 4,
width: MediaQuery.of(context).size.width/3,
color: Colors.red,
child: Center(child: Text("Hello There !")),
),
],
),
),
);
Yuu said that you are creating responsive UI which means that you are using width and height of the screen to make it responsive. When orientation changes then obviously width increased and height decreased so maybe you need to add check on orientation change. There are many ways of doing that here is the simple one
return Scaffold(
key: scaffoldKey,
body: OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
orientation == Orientation.portrait ?
doSomeThingifportrait : doSomethingifLandscape;
},
),
);

How can I send my updated data to a widget which has been already called in flutter?

I am using CustomPainter widget to draw on a canvas. After some time Streambuilder provides me with new data for CustomPainter. And I would like to draw on the same CustomPainter with the new updated data i.e I want to send tempList from Streambuilder to Drawing widget in CustomPaint.
Should i be using a callback or a key, how will that be used if so, since I'm new to those concepts. I read similar questions but couldn't understand how it will help solve my problem.
Here is my widget hierarchy, please ignore my formatting
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Positioned(
child: GestureDetector(
// some other widgets
child: Container(
child: ClipRect(
child: CustomPaint(
size: Size.infinite,
painter: Drawing(
pointsList: pointsList,
),
),
),
color: canvasBackgroundColor,
),
),
),
]
),
),
Expanded(
child:
StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
if(snapshot.hasData && !snapshot.hasError){
String receivedData = snapshot.data.toString();
tempList = receivedMessage(receivedData);
print(tempList);
return Text("tempList");
}
else
return Text("No Data");
}
)
),
],
),
Wrap the widget that you want to rebuild after getting data again in-stream builder and when every time new data comes your widget will rebuild automatically that's why it have a builder method.

Flutter bottomNavigationBar (change only body section)

Ok so I have got the following bottomNavigationBar working, however it's not clean enough for me and I am hoping there is a better way that someone knows.
Basically I only want to change the body section and not the full page.
However I want to have each section in different classes to keep it neat (ideally new .dart files - as they will all have different functions)
Currently all the page info is inside the body tag
body: PageView(
controller: _myPage,
onPageChanged: (int) {
print('Page Changes to index $int');
},
children: <Widget>[
Center(
child: Container(
child: Text('Empty Body 0'),
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('images/pic1.jpg'),
Text('images/pic2.jpg'),
Text('images/pic3.jpg'),
],
),
),
Center(
child: Container(
child: Text('Empty Body 2'),
),
),
Center(
child: Container(
child: Text('DRN1 app is made using Google Flutter. While every attempt was made to make sure that this app works on as many devices as possible. We are unable to test every device. If you have issues running this app please let us know'),
),
)
],
physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
),
what I would like is something like this.
body: PageView(
controller: _myPage,
onPageChanged: (int) {
print('Page Changes to index $int');
},
children: <Widget>[
home(),
news() , // this is the main body for home
shows(), // this one shows the class shows() which fetches JSON and returns a different body layout
about(), // about text
]
Does anyone know of a better way to do this?
What you can do is create separate Dart files and import them into your main.dart
Then inside your State class define a list which contains the pages that you want to show
List<Widget> _myPage = <Widget>[Page1class(),Page2class(),Page3class()];
After that you can use the below code which looks quite clean. Using the builder() method will allow you to create pages based on the size of _myPage,
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: Text('sdf')),
body: PageView.builder(
itemBuilder: (context, position) => _myPage[position],
itemCount: _myPage.length,
),
)
);
Here is a sample program: PageView sample

Flutter layout with circular image icons

I am a web dev in MS stack trying flutter for a personal project of mine. I want to create a layout like in the below URL in the meeve app with circular images with text below the image button/icon.
https://www.thedroidsonroids.com/blog/apps-made-with-flutter#meeve
I tried the layout given in the example on flutter docs below but it is not what I am looking for and I am not able to re purpose this for my case. https://flutter.dev/docs/cookbook/lists/grid-lists
Any leads in this respect is appreciated.
You can use CircleAvatar in a Column.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(backgroundImage: AssetImage("assets/images/chocolate_pic.png"), radius: 40),
SizedBox(height: 12),
Text("Chocolate"),
],
),
),
);
}

ListView lagging only when widgets in the list are Video_Player widgets

I'm trying to achieve a scrollable List with videos. I'm using the video_player widget and wrapping the player in a Card with a simple button.
Now i noticed that whenever I use ListView.builder with videos in the list, it is extremely lagging, especially when scrolling back up. i'm posting a GiF bellow if you would like to see the behaviour.
I have this problem ONLY when I have Videos in the list.
If I replace the videos with a simple Image widget, the scrolling is smooth and runs as intended. (Also provided a GiF below)
When I scroll through the list I get this message in my Console:
flutter: Another exception was thrown: setState() or markNeedsBuild() called during build.
And I think (but not sure) that this is the cause of the problem, maybe the way I implemented the video_player plugin (?)
class VideoPlayPause extends StatefulWidget {
VideoPlayPause(this.controller);
final VideoPlayerController controller;
#override
_VideoPlayPauseState createState() => _VideoPlayPauseState();
}
class _VideoPlayPauseState extends State<VideoPlayPause> {
//This Part here
_VideoPlayPauseState() {
listener = () {
setState(() {});
};
}
Maybe its setting state every time I scroll ?
I tried flutter run --release but saw no difference at all.
I'm running the app on a physical Iphone X.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('MVP_Test1'),
),
body: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: videoUrl.length,
itemBuilder: (context, i) {
return Card(
child: Column(
children: <Widget>[
Column(
children: <Widget>[
const ListTile(
leading: Icon(Icons.live_tv),
title: Text("Nature"),
),
Stack(
alignment: FractionalOffset.bottomRight +
const FractionalOffset(-0.1, -0.1),
children: <Widget>[
// If I replace this with Image.asset("..."), the scrolling is very smooth.
AssetPlayerLifeCycle(
videoUrl[i],
(BuildContext context,
VideoPlayerController controller) =>
AspectRatioVideo(controller)),
]),
],
),
ButtonTheme.bar(
child: ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('ADD VIDEO'),
onPressed: () {
/* ... */
},
),
],
),
),
],
),
);
},
),
);
}
Result when I run Flutter Analyze
flutter analyze
Analyzing mvp_1...
No issues found! (ran in 1.9s)
You can see how when scrolling back up it looks like the app is skipping frames or something. Here's a video:
https://giphy.com/gifs/u48BNQ13r15Zay5SnN
Here's a video with photos instead of videos:
https://giphy.com/gifs/236RKyA8y1pfecmR1d