cherry_components 0.2.3+1
cherry_components: ^0.2.3+1 copied to clipboard

Collection of fresh UI components.

Cherry Components 🍒 #

Package Build License Patreon

This package provides a collection of fresh UI compoents, used in a varietude of apps, such as SpaceX GO!, among others.

Components #

Here's a list of every component & tool included in this package. You can also visit the example page for you to take a look at some samples. Also, this exapmple project is hosted on this URL for you to check out!

CacheImage #

This tool uses the CachedNetworkImage package as a base to build a widget that displayes an image from an URL. As its name suggests, it features caching capabilities. It also has the ability to show an 'error' widget is the URL is broken or inaccesible.

It also features a better Flutter Web support than the underlined package it uses.

CacheImage(
    'https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg',
)

CardCell #

This widget is used to display information using a customized Card widget. There are two variants, CardCell.header and CardCell.body.

The 'header' variant can display main information, like a leading image, subtitles, and also a expandable description text, using the expand_widget package.

CardCell.header(
    context,
    leading: Icon(
        Icons.image,
        size: 40,
        color: Theme.of(context).textTheme.caption.color,
    ),
    title: 'Lorem ipsum',
    subtitle: [
        ItemCell(
            icon: Icons.location_city,
            text: 'Lorem ipsum',
        ),
        ItemCell(
            icon: Icons.location_city,
            text: 'Lorem ipsum',
        ),
    ],
    details: 'Expetenda tincidunt in sed, ex partem placerat sea.',
)

On the other hand, the 'body' variant of the widget displays a card view, with a title at the top, and a customizable body view.

CardCell.body(
    context,
    title: 'Lorem ipsum',
    child: Text(
        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
    ),
),

You can also use the CardCell widget by itself, taking advantage of its custom styling compared to a simple Card view.

DetailsCell #

This widget is very similiar to the ListCell component listed bellow, but it can display a very detailed and exandable text, using the expand_widget package.

DetailsCell(
    leading: '0',
    title: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
    subtitle: 'Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat',
    body:
        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.',
    onTap: () => Scaffold.of(context).showSnackBar(
        SnackBar(
            content: Text("Hello, world!"),
        ),
    ),
)

DialogRound #

This function is pretty similar to showDialog, but it features a customized style, with rounded corners, and a centered, bold title at the top.

showRoundDialog(
    context: context,
    title: 'Lorem ipsum',
    children: [
        Center(
            child: Text('Hello world'),
        ),
    ],
)

You can also make this custom dialog appear at the bottom of the screen for better one-handed operations, with the showBottomRoundDialog function.

showBottomRoundDialog(
    context: context,
    title: 'Lorem ipsum',
    children: [
        Center(
            child: Text('Hello world'),
        ),
    ],
)

HeaderText #

This widget is displays a simple text, using a custom style & color. This can be used as the header of page sections, for example.

HeaderText('Lorem ipsum')

ItemCell #

Simillar to a Chip, it displays a bit of information, featuring an icon a some text, very simple stuff. You can also detect user tapping.

ItemCell(
    icon: Icons.location_city,
    text: 'Lorem ipsum',
    onTap: () => Scaffold.of(context).showSnackBar(
        SnackBar(
            content: Text('Lorem ipsum'),
        ),
    ),
)

ListCell #

This package is very similliar to Flutter's ListTile, but offers some cool built-in style and different variants.

ListCell(
    title: 'Lorem ipsum dolor sit amet',
    subtitle: 'Consectetur adipiscing elit. Fusce semper ut lacus ut feugiat. ',
    trailing: TrailingText('#99'),
),

The 'icon' variant makes easy to place an IconData object as the leading view of the list tile.

ListCell.icon(
    icon: Icons.location_city,
    title: 'Lorem ipsum',
    subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
)

It also offers another variant: ListCell.svg, which allows you to place an SVG leading the widget, similiar to ListCell.icon.

RadioCell #

This widget is pretty similar to RadioTile, but features a pretty cool custom style, with colored active background. The API is pretty similar to the mentioned Flutter widget.

 RadioCell<int>(
    title: 'Lorem ipsum',
    groupValue: index,
    value: 0,
    onChanged: (value) => setState(() => index = value),
)

Getting Started #

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Built with #

Authors #

License #

This project is licensed under the GNU GPL v3 License - see the LICENSE file for details.