flutterfly 0.1.0+5

  • Readme
  • Changelog
  • Example
  • Installing
  • 58

flutterfly #

A collection of Lightweight Material UI components.

Contents #

  • UI Components

    • Badge
    • URL Image
    • Card
    • Button
  • Form Components

    • Checkbox
    • Datepicker
    • Dropdown
    • Numeric
    • Timeline

Documentation #

Coming Soon

Purpose #

This package will not replace the current existing Flutter Material Widgets. They're both meant to coexist.

It consists of a set of UI components that will reduce (y)our development costs drastically. Some of them are nonexistent e.g. Badge, Datepicker Form Field, etc. Some of them already exist but we found that it's not too pretty and doesn't really satisfy our needs e.g. FlyDropdown<T, U> where it's meant to be an alternative of the current existing Dropdown Form Field with more use case where sometimes the Dropdown options can be of a List of Some class-based model (might have been a class that has both int id and String name) that when one of them is selected, it only needs to store the id, not the class itself. Some of them are the wrappers of the current Material Widgets e.g. FlyCard where it wraps up the existing Card widget that can be aligned both vertically or horizontally with less effort as compared to the built-in one.

Additionally, we would like to showcase to our internal team about UI/UX guidelines as well as the best practices when it comes to making apps for our clients too that are reflected in the example pages.

We'll be constantly updating this package should there be demands internally OR if any of you have some suggestions of Widget that doesn't exist that is generic enough to cater for different needs.

0.0.1 #

Initial Version of the library.

* Includes Form Component
* Includes Form Checkbox Component
* Includes Form Datepicker Component
* Includes Form Dropdown Component 

0.0.2 #

Added more UI Components

* Badge Component
* Image Component

0.0.2+1 #

Added more UI Components

* Button Component

0.0.2+2 #

  • Added Card Component
  • More Docs
  • More Example Pages

0.0.2+3 #

  • Includes Numeric Component
  • Includes Timeline Component
  • More Example Pages

0.1.0 #

  • The library is ready to use now

0.1.0+1 #

  • Set default TextTheme title color in the AppBar to black87

0.1.0+2 #

  • FlyButton now has loading state.

0.1.0+3 #

  • FlyNumeric now uses TextFormField instead of just plain Text so that it can be modified via Keyboard too.

0.1.0+4 #

  • Minor updates on FlyNumeric.

0.1.0+5 #

  • Pardon my stupidity.


import 'package:flutter/material.dart';
import 'package:flutterfly/flutterfly.dart';
import 'global_state.dart';
import 'shopping_cart_page.dart';
import 'notif_page.dart';
import 'home_page.dart';
import 'form_page.dart';
import 'products_page.dart';
import 'orders_page.dart';

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

void main() => runApp(FlyApp(
      model: TestFormModel(),

class FlyApp extends StatefulWidget {
  final TestFormModel model;

  FlyApp({@required this.model});

  _FlyAppState createState() => _FlyAppState();

class _FlyAppState extends State<FlyApp> {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Form Test',
        theme: flyThemeData(),
        navigatorObservers: [routeObserver],
        home: _Layout());

class _Layout extends StatefulWidget {
  _LayoutState createState() => _LayoutState();

class _LayoutState extends State<_Layout> {
  int _curIndex = 0;
  final List<Widget> _pages = [
      model: TestFormModel(),

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
            icon: Icon(
              size: 32,
            badgeContent: GlobalState().newNotifModels.length.toString(),
            onPressed: () => Navigator.push(
              MaterialPageRoute(builder: (context) => NotifPage()),
              icon: Icon(
                size: 32,
              badgeContent: GlobalState().shoppingCarts.length.toString(),
              onPressed: () => Navigator.push(
                    MaterialPageRoute(builder: (context) => ShoppingCartPage()),
      body: _pages[_curIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (idx) {
          setState(() {
            _curIndex = idx;
        type: BottomNavigationBarType.fixed,
        currentIndex: _curIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
              icon: Icon(Icons.shopping_basket), title: Text('Products')),
              icon: Icon(Icons.list), title: Text('Orders')),
              icon: Icon(Icons.person), title: Text('Profile')),

Use this package as a library

1. Depend on it

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

  flutterfly: ^0.1.0+5

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:

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

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
intl ^0.16.1 0.16.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies