Skip to content

Available widgets

Pablo Bautista edited this page Jun 1, 2020 · 2 revisions

Available widgets

FlusmicBuilder

A simple way to create widgets depending on the state of fetching.

FlusmicBuilder(
    baseUrl: <yourEndpoint>,
    builder: (context, result) => result.map(
        init: (s) => Container(),
        loading: (s) => CircularProgressIndicator(),
        error: (s) => Center(child: Text('Hi! I\'m an error :(')),
        loaded: (s) => Center(child: Text('Hi! I loaded all the data :)'))),
    predicates: []);

If you need to repeat the request, you need to create a 'FlusmicController' and call the 'repeat' method.

final FlusmicController _flusmicController = FlusmicController();

FlusmicBuilder(
    baseUrl: 'yourendpoint',
    builder: (context, result) => result.map(
        init: (s) => Container(),
        loading: (s) => CircularProgressIndicator(),
        error: (s) => Center(child: Text('Hi! I\'m an error :(')),
        loaded: (s) => Center(child: Text('Hi! I loaded all the data :)'))),
    controller: _flusmicController,
    predicates: []);

_flusmicController.repeat();

FlusmicRichText

A widget to consume RichText from Prismic.io.

You only need a List<Richable> to use the widget. For that, you can see the handling response section to construct a custom class or, you can parse directly:

///`content` field in json is a RichText
final richFields = (response.results.first.data['content'] as List)
    .map((v) => Richable.fromJson(v)).toList();

Now you can pass this richFields to the widget.

FlusmicRichText(richFields,
    //Optional, how much space is in between elements.
    bottomSeparation: 8.0,
    //Optional, horizontal arrangment of elements.
    crossAlignment: CrossAxisAlignment.center,
    //Optional, widget to show if a image loading failed.
    failWidget: Container(), 
    //Optional, Fit of the images
    imageFit: BoxFit.contain,
    //Optional, widget to show while image is loading.
    loadingWidget: Container());

Styles

By default, styles for every heading and paragraph comes from Default Text Theme. You can customize those styles or passing an optional argument to customize a specific type:

FlusmicRichText(richFields,
    paragraphStyle: TextStyle(...),
    headline1Style: TextStyle(...));