lokesh-coder / flutter_blobs Goto Github PK

Just in case you didn't already know.

Thanks, fun project!

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?

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?

Implementation

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

Debug console output

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!

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.

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.

https://dart.dev/null-safety/migration-guide

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

(See the full code).

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

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.

I am trying to build the above UI.

I have 2 questions -

1. How do I create custom shapes as I want in blob?
2. How to place 2 different blobs in a particular place in a single Container like the image above?