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.

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],
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
Dart

Params

Name Type Description
tiles (Required) List Defines the rows in the drawer
color Color Defines the background color
separator Widget Defines the tiles divider
borderRadius BorderRadiusGeometry Defines the border radius for the drawer

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d317a657151544e4c67746c716d54617a59344344476b596f77586b7044374b3439

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31666c346472665a6951537a736b555a4b496c59657036523744766e414979522d

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"),
                    ))
          ],
        ));
  }
}
Dart

Params

Name Type Description
unfoldedIcon Widget Defines the icon to show when the fab is open
foldedIcon Widget Defines the icon to show when the fab is closed
customIcon Widget Defines the icon to show in the fab overwriting the folded and unfolded icons
children (Required) List Defines the widgets to show when the fab is open
shape ShapeBorder Defines the shape of the fab
animationDuration Duration Defines the duration of unfold animation
tooltip String Defines the string tooltip
color Color Defines the fab background color
onTap Function Defines a custom action when the fab is tapped

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3162717a6f4f5f4169664e7750445a32646a6e35483553646a6e53594d49674242

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d316a6b6e59784c34384d4c5a6342736a7959723064576f4543464a76516f31497a

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,
        ),
      ),
    );
  }
}
Dart

Params

Name Type Description
child (Required) Widget Defines the widget to shade
blurLevel double Defines the level of blur in the shadow
distance double Defines the distance between the child and the shadow
shadowColor Color Defines 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)),
              ),
            )
          ],
        ),
      ),
    );
  }
}
Dart

Params

Name Type Description
Slides (Required) List Defines the widgets to show
dotsOnTop bool Define if the dots are showed on the top or in the bottom
primaryColor Color Defines the color of the dot for the selected slide
secondaryColor Color Defines the color of the dots when aren't selected
dotsSpace double Defines the space between dots
shape BoxShape Defines the shape of the dots
dotsSize double Defines the size of the dot fot the selected slide
secondaryDotsSize double Defines the size of the dots when aren't selected
slidesPadding double Defines the space between the slides
scrollDirection Axis Defines the scroll direction for the slideshow
showDots bool Define if the dots may showed or not

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d314d7a5678354e73302d535a37696551336f4945736a4b746671715f4e43426364

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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Dart

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3132366750533136584168684e30776c5473564c4d61726c664c6d6d6e43693057

Deployable

Name Type Description
cutInLeft bool Defines the cut direction of the container
color Color Defines the background color
iconColor Color Defines the color of the deployable icon
child (Required) Widget Defines the widget to deploy
alignment Alignment Defines the alignment direction of the child container when is deployed

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d31476a733172445047647363722d6c61545430664c56765a776237307269476532
68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d314f6b695f54694a456252386c2d3955674a4b7871377563633875735965443350

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),
        ),
      ),
    );
  }
}
Dart

Blurred

Name Type Description
width Double Defines the width of the container
height Double Defines the height of the container
opacity Double Defines the opacity of the accent color
blur Double Defines the amount of blur in the widget
child (Required) widget Defines the widget to be blurred
accentColor Color Defines the a color layer for the blur
boxDecoration BoxDecoration Defines the box decoration for the blurred container

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d314e4a54354f5355547a434a45703866314e79614751506d55654351334b515071

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],
        ),
      ),
    );
  }
}
Dart

Params

Name Type Description
sm Widget Defines the widget to show in small screens
md Widget Defines the widget to show in medium size screens
lg (Required) Widget Defines the widget to show in large (default) screens
factors List Defines the sizes for each breakpoint (sm,md)

68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f6578706f72743d766965772669643d3156335079387439544f3638584676337531534a746f346a4d44335975506f646e

GitHub

https://github.com/Daniel324a/Essential_Widgets