lokesh-coder / flutter_blobs Goto Github PK
View Code? Open in Web Editor NEWGenerate Blob shapes for flutter apps
Home Page: https://pub.dev/packages/blobs
License: MIT License
Generate Blob shapes for flutter apps
Home Page: https://pub.dev/packages/blobs
License: MIT License
I'm interested in animating the movement of blobs (e.g. waterfall, cyclone, etc.) -- do you have any recommendations for how best to do this? And do you plan to add this sort of functionality to this service?
Just in case you didn't already know.
Thanks, fun project!
First off, outstanding project!! Thank you for it
I'm referring to this one: https://user-images.githubusercontent.com/1754676/82777020-767f5600-9e6a-11ea-9e3a-7fae7c47e595.gif
Im recreating something like this but my blobs are coming out very oblong. The ones used in this example are nearly circular which is giving a pleasing rotation effect.
If you would mind sharing the blob.random code for this or even the entire container set?
When using Blob.animatedRandom
, the duration of the animated blob seems to be stuck to the initial value, even if it is changed using setState
in a StatefulWidget
.
Here is the test app running on an Android 11.0 (API 30) emulator. Pressing the FAB button assigns a random duration and a random color. So the duration keeps changing (as reflected in the app bar), but the animation of the blob shape doesn't seem to change its rythm:
...
class _HomeScreenState extends State<HomeScreen> {
final Random _random = Random();
Color _color = Colors.blueGrey;
// The duration of the animated blob seems to be stuck to this initial value, even if we change it using setState.
int _duration = 500;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Duration: $_duration milliseconds'), // display the current duration
),
body: Blob.animatedRandom(
size: 400,
edgesCount: 6,
minGrowth: 7,
// Apply the current color - this works.
styles: BlobStyles(color: _color),
loop: true,
// Apply the current duration - doesn't seem to work!
duration: Duration(milliseconds: _duration),
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.shuffle),
onPressed: () => setState(() {
// Randomize the duration and the color
_duration = _random.nextInt(20) * 500;
_color = Color.fromRGBO(_random.nextInt(256), _random.nextInt(256), _random.nextInt(256), 1.0);
}),
),
);
}
}
As in the title. I can see how to set a color and fill with BlobFillType.fill
or out outline with BlobFillType.stroke
but it'd be great to be able to have an outline in one color and a stroke in another.
/// Stack parent as background for this screen
Positioned.fill(
child: Stack(
children: [
// TODO: insert blobs here
Positioned(
bottom: -200,
right: -150,
child: Blob.animatedFromID(
id: [
'10-5-9670',
'9-5-9670',
'11-6-9670',
],
size: 500,
controller: BLblobCtrl,
duration: Duration(seconds: 4),
debug: true,
loop: true,
styles: BlobStyles(
color: ColorsConfig.primary,
fillType: BlobFillType.fill,
// gradient: LinearGradient(colors: [Colors.purple, Colors.deepPurple])
// .createShader(Rect.fromLTRB(0, 0, 200, 200)),
gradient: LinearGradient(
colors: [
widget.postViewModel.selectedGraphic.gradients[0].firstColor,
widget.postViewModel.selectedGraphic.gradients[0].secondColor,
],
).createShader(Rect.fromLTRB(0, 0, 200, 200)),
),
),
),
/// other Blobs (animatedRandom)
],
),
),
RangeError (index): Invalid value: Not in inclusive range 0..12: 13
error also iterates with the same frequency specified by duration parameter in Blob.animatedFromID or in some other cases that I cannot distinguish it just loops and fills the entire debug console in a rush.
Flutter Doctor
(base) ologumarian@MacBook-Pro-di-Marian ~ % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.2.1 21D62 darwin-x64, locale it)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (3 available)
• No issues found!
I was of the assumption that if I trigger a change from the BlobController on an animated Blob, the change would be animated. Unfortunately, that doesn't happen and the Blob just jumps to its new shape instantly.
Code sample:
Container(
child: Blob.animatedRandom(
size: 600,
edgesCount: 5,
minGrowth: 4,
duration: 1.seconds,
controller: viewModel.blobController,
styles: BlobStyles(
color: color,
),
),
),
And in my ViewModel (ChangeNotifier)
Future<void> login() async {
_valid = formKey.currentState?.validate() ?? false;
notifyListeners();
blobController.change();
...
}
It would be good if there is option to save / download blobs in various image formats from blobs.app site
Ever since Flutter 1.20.0, the blobs which before had no issues will "reset" to what seems like a random position at the end of the time set for a Blob.animatedRandom()
, which creates a very jarring effect. My workaround has been to increase the duration so the "reset" is not seen, but this makes the movement of the blob imperceptible. No changes were made to the code since its implementation, so it seems to be something stemming from a Flutter update. I can provide a screen recording of the behavior if that would be helpful. Thanks.
Great library, thank you!
When doing the animate, it suddenly stops and stops and restarts at every key point. It's evident on video, you can tell where are the key shapes https://github.com/lokesh-coder/flutter_blobs#%EF%B8%8F-animate-fixed-shapes
To make it it look natural every shape key point should have ease In and Ease Out.
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.