floop_web 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 13

floop_web #

Dynamic values for Flutter Widgets. It's the same as floop library.

https://pub.dev/packages/floop

Getting Started #

See more details on Github.

https://github.com/icatalud/floop/

Example - How to use #

-class Clicker extends StatelessWidget {
+class Clicker extends StatelessWidget with Floop {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Text widget always displays the current value of 'clicks'
      body: Center(
        child: Text(floop['clicks'].toString())
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        // change 'clicks' from anywhere in the app (except build methods)
        onPressed: () => floop['clicks']++,
      ),
    );
  }
}

On StatefulWidgets: ...extends State with FloopStateMixin.

Install #

Add floop dependency to the project's pubspec.yaml. Currently there are problems publishing flutter_web projects, because flutter_web does not exist on pub.dev. If adding the dependency like a regular pub.dev project does not work, try the following:

depedencies:
  floop:
    git: https://github.com/icatalud/floop
    path: packages/floop_web

Run flutter pub get in the root folder of your project.

[1.0.0] - 02/09/2019

Update to match Floop 1.0.0.

[0.2.2] - 09/07/2019

Minor update to docs.

[0.2.1] - 09/07/2019

Minor updates to docs and example, change mixin name.

[0.2.0] - 09/07/2019

Publish flutter_web. It's exactly the same as floop but importing flutter_web library instead of flutter.

example/example.dart

import 'package:flutter_web/material.dart';
import 'package:floop_web/floop_web.dart';
import 'package:http/http.dart' as http;

void main() {
  fetchAndUpdateImage();
  runApp(MaterialApp(title: 'Fetch image', home: ImageDisplay2()));
}

var _fetching = false;

fetchAndUpdateImage([String url = 'https://picsum.photos/300/200']) async {
  if (_fetching) {
    return false;
  }
  try {
    _fetching = true; // locks the fetching function
    final response = await http.get(url);
    floop['image'] = TransitionImage(Image.memory(response.bodyBytes));
    return true;
  } finally {
    _fetching = false;
  }
}

class ImageDisplay extends StatelessWidget with Floop {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // `floop['image']` is null while fetching an image. When the
      // imaged is downloaded, an image widget is stored on `floop['image']`
      // and the widget automatically updates.
      body: floop['image'] == null
          ? Center(
              child: Text(
                'Loading...',
                textScaleFactor: 2,
              ),
            )
          : Align(
              alignment: Alignment(0, transition(2000, delayMillis: 800) - 1),
              child: floop['image']),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: () async {
          floop['image'] = null;
          await fetchAndUpdateImage();
          // print('image fetched: ${floop['image']}');
          // Restarting context transitions after the new image has loaded
          // causes the new image to also transition from top to center.
          Transitions.restart(context: context);
        },
      ),
    );
  }
}

// `extends FloopWidget` is equivalent to `...StatelessWidget with Floop`.
class TransitionImage extends FloopWidget {
  final Image image;
  const TransitionImage(this.image);

  @override
  Widget build(BuildContext context) {
    // Opacity transitions from 0 to 1 in 1.5 seconds.
    return GestureDetector(
      child: Opacity(opacity: transition(1500), child: image),
      onTap: () async {
        if (await fetchAndUpdateImage()) {
          Transitions.restart(context: context);
        }
      },
    );
  }
}

// Same example but using a class that access the values on `floop`. Serves
// as a model to organize the code in a big app. Shared dynamic values, like
// user data can be stored in a class with static values and access `floop`
// only from there.

class DynamicValues {
  static Widget get image => floop['image'];
  static set image(Widget widget) => floop['image'] = widget;
}

fetchAndUpdateImage2([String url = 'https://picsum.photos/300/200']) async {
  if (_fetching) {
    return false;
  }
  try {
    _fetching = true; // locks the fetching function
    final response = await http.get(url);
    DynamicValues.image = TransitionImage(Image.memory(response.bodyBytes));
    return true;
  } finally {
    _fetching = false;
  }
}

class ImageDisplay2 extends StatelessWidget with Floop {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DynamicValues.image == null
          ? Center(
              child: Text(
                'Loading...',
                textScaleFactor: 2,
              ),
            )
          : Align(
              alignment: Alignment(0, transition(2000, delayMillis: 800) - 1),
              child: DynamicValues.image),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: () async {
          DynamicValues.image = null;
          await fetchAndUpdateImage2();
          // Restarting context transitions after the new image has loaded
          // causes the new image to also transition from top to center.
          Transitions.restart(context: context);
        },
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  floop_web: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:floop_web/floop_web.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
0
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
67
Overall:
Weighted score of the above. [more]
13
Learn more about scoring.

We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.1
  • pana: 0.12.21

Platforms

Detected platforms:

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Analysis issues and suggestions

Fix dependencies in pubspec.yaml.

Running pub upgrade failed with the following output:

ERR: Because floop_web depends on flutter_web any which doesn't exist (could not find package flutter_web at https://pub.dartlang.org), version solving failed.

Health suggestions

Format lib/transition.dart.

Run dartfmt to format lib/transition.dart.

Maintenance issues and suggestions

Fix platform conflicts. (-20 points)

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.

The package description is too short. (-3 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0