essential_widgets 1.0.2+1
essential_widgets: ^1.0.2+1 copied to clipboard

A humble library of widgets for Flutter.

Essential Widgets #

This package is a compilation of widgets maybe useful for some cases when the standard Flutter widgets fall short or we need a widget with a more specific function.

Widgets #

Third party libraries #

Usage Examples #

Floating Drawer #

import 'package:essential_widgets/widgets/floatingDrawer.dart';
import 'package:flutter/material.dart';

class FloatingDrawerPage extends StatelessWidget {
  final List items = [
    DrawerTile(
      child: Text("Status: Online"),
      leading: Icon(Icons.cloud),
      trailing: Icon(
        Icons.brightness_1,
        color: Colors.green,
        size: 10,
      ),
    ),
    DrawerTile(
      child: Text("Games"),
      leading: Icon(Icons.gamepad),
      trailing: Icon(Icons.chevron_right),
      children: List.generate(2, (i) => DrawerTile(child: Text("${i + 1}"))),
    ),
    DrawerTile(
      child: Text("Friends"),
      leading: Icon(Icons.people),
      trailing: Icon(Icons.chevron_right),
      children: List.generate(5, (i) => DrawerTile(child: Text("${i + 1}"))),
    ),
    DrawerTile(
      child: Text("Exit"),
      leading: Icon(Icons.exit_to_app),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          PopupMenuButton<String>(
            color: Colors.transparent,
            elevation: 0,
            itemBuilder: (context) => [
              PopupMenuItem(
                child: Container(
                  width: 300,
                  child: FloatingDrawer(
                    separator: Container(
                      width: double.infinity,
                      height: 1,
                      color: Colors.black12,
                    ),
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(15),
                    tiles: [...items],
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

Params #

NameTypeDescription
tiles (Required)ListDefines the rows in the drawer
colorColorDefines the background color
separatorWidgetDefines the tiles divider
borderRadiusBorderRadiusGeometryDefines the border radius for the drawer

Multi Fab #

import 'package:essential_widgets/widgets/multiFab.dart';
import 'package:flutter/material.dart';

class MultiFabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Text('Hola Mundo'),
        ),
        floatingActionButton: MultiFab(
          children: [
            ...List.generate(
                3,
                (i) => MultiFabItem(
                      onPressed: () {},
                      child: Text("$i"),
                    ))
          ],
        ));
  }
}

Params #

NameTypeDescription
unfoldedIconWidgetDefines the icon to show when the fab is open
foldedIconWidgetDefines the icon to show when the fab is closed
customIconWidgetDefines the icon to show in the fab overwriting the folded and unfolded icons
children (Required)ListDefines the widgets to show when the fab is open
shapeShapeBorderDefines the shape of the fab
animationDurationDurationDefines the duration of unfold animation
tooltipStringDefines the string tooltip
colorColorDefines the fab background color
onTapFunctionDefines a custom action when the fab is tapped

Shadowed #

import 'package:essential_widgets/widgets/shadowed.dart';
import 'package:flutter/material.dart';

class ShadowedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Shadowed(
          child: Text(
            'Hola Mundo',
            style: TextStyle(fontSize: 30),
          ),
          blurLevel: 1.5,
          distance: 3,
          shadowColor: Colors.black45,
        ),
      ),
    );
  }
}

Params #

NameTypeDescription
child (Required)WidgetDefines the widget to shade
blurLeveldoubleDefines the level of blur in the shadow
distancedoubleDefines the distance between the child and the shadow
shadowColorColorDefines the color of the shadow

Slideshow #

import 'package:essential_widgets/widgets/slideshow.dart';
import 'package:flutter/material.dart';

class SlideshowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Slideshow(
          slides: [
            ...List.generate(
              3,
              (i) => Container(
                alignment: Alignment.center,
                child: Text(
                  "$i",
                  style: TextStyle(fontSize: 35, color: Colors.white),
                ),
                decoration: BoxDecoration(
                    color: Colors.blueGrey[400],
                    borderRadius: BorderRadius.circular(25)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Params #

NameTypeDescription
Slides (Required)ListDefines the widgets to show
dotsOnTopboolDefine if the dots are showed on the top or in the bottom
primaryColorColorDefines the color of the dot for the selected slide
secondaryColorColorDefines the color of the dots when aren't selected
dotsSpacedoubleDefines the space between dots
shapeBoxShapeDefines the shape of the dots
dotsSizedoubleDefines the size of the dot fot the selected slide
secondaryDotsSizedoubleDefines the size of the dots when aren't selected
slidesPaddingdoubleDefines the space between the slides
scrollDirectionAxisDefines the scroll direction for the slideshow
showDotsboolDefine if the dots may showed or not

Deployable #

import 'package:essential_widgets/widgets/deployable.dart';
import 'package:flutter/material.dart';

class DeployablePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.centerRight,
        child: Stack(
          alignment: Alignment.centerRight,
          children: [
            SafeArea(
              child: Container(
                margin: EdgeInsets.all(10),
                padding: EdgeInsets.all(10),
                height: double.infinity,
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.blueGrey[100],
                ),
              ),
            ),
            Deployable(
              child: Text(
                "Hello World",
                style: TextStyle(fontSize: 18),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Deployable #

NameTypeDescription
cutInLeftboolDefines the cut direction of the container
colorColorDefines the background color
iconColorColorDefines the color of the deployable icon
child (Required)WidgetDefines the widget to deploy
alignmentAlignmentDefines the alignment direction of the child container when is deployed

Blurred #

import 'package:essential_widgets/widgets/blurred.dart';
import 'package:flutter/material.dart';

class BlurredPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Blurred(
          width: 200,
          height: 200,
          opacity: .1,
          blur: 8,
          accentColor: Colors.blueGrey,
          boxDecoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
          child: FlutterLogo(size: 100),
        ),
      ),
    );
  }
}

Blurred #

NameTypeDescription
widthDoubleDefines the width of the container
heightDoubleDefines the height of the container
opacityDoubleDefines the opacity of the accent color
blurDoubleDefines the amount of blur in the widget
child (Required)widgetDefines the widget to be blurred
accentColorColorDefines the a color layer for the blur
boxDecorationBoxDecorationDefines the box decoration for the blurred container

Responsive #

  • Factors defines the values that determine the widget to use, by default are 200px and 800px respectively.
factors[0] -> sm
factors[1] -> md
import 'package:essential_widgets/widgets/responsive.dart';
import 'package:flutter/material.dart';

class ResponsivePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Responsive(
          sm: Text("Small"),
          md: Text("Medium"),
          lg: Text("Large"),
          factors: [220, 768],
        ),
      ),
    );
  }
}

Params #

NameTypeDescription
smWidgetDefines the widget to show in small screens
mdWidgetDefines the widget to show in medium size screens
lg (Required)WidgetDefines the widget to show in large (default) screens
factorsListDefines the sizes for each breakpoint (sm,md)