adv_fab 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

AdvFAB (More Than Just A Floating Action Button) #

AdvFAB is An Advanced floating action button that expands itself to reveal its hidden widget. It can also be used as an AnimatedbottomNavigationbar or just an AnimatedFloatingActionBar with the same expansion capabilities. Have a look at the gif below

Image 1Image 2
demo image 1domo image 2

NOTE: This package has lots of functionalities and parameters to customize your AdvFab please refer to the example floder and the full documentation in order to take advantage of this package to the fullest. Use this quick guide to setup your work environment and understand the basics :)

Create an Advanced FLoating Action Button (AdvFab) #

  • First import the package inside your project
import 'package:adv_fab/adv_fab.dart';
  • In your project, create a AdvFabController
AdvFabController controller;
//now inside the inti function
@override
  void initState() {
    super.initState();
    controller = AdvFabController();
  }

This controller will allow you to expand, collapse and more importantly "setExpandedWidgetConfiguration". It will also give you the state of the AdvFab( true or false depending on whether the widget is expanded or not)

IMPORTANT : The "setExpandedWidgetConfiguration" shall be called at least once in the life time of your widget, to configure what has to be displayed once the AdvFab is expanded else you will get an error.

  • Create an AdvFab widget inside the floatingActionButton of the scaffold
Scaffold(
	floatingActionButton: AdvFab(
		//controller shall not be null (actually it can but still....)
		controller: controller
	),
)

Use flags #

AdvFab allows you to create a navigation bar, an empty bar (where you can add a ny widget you want) or just a normal floating action button. To enable these functionalities, here are the flags to toggle

  • useAsFloatingSpaceBar: false (by default )
  • useAsFloatingActionButton: true ( by default )
  • useAsNavigationBar: false (by default )

IMPORTANT : There can be only one value as "true", if you set more than one value as true, then a priority rule will be applied and will set the flag with higher priority to true and you will get a configuration error warning

Important Note #

  • In order to maintain the screen adaptability of this widget (to make it look even on all screens), I opted for a formula based on percentages of the screen. This means that every width and height shall be given by you in the range [0 - 100],100 inclusive. Example:
AdvFab(
   useFloatingSpaceBar: true,
   floatingSpaceBarContainerWidth: 90,
),
  • To help you debug your code easily, I included a log facility, You just have to set the ShowLogs property to true and you will get all of them.

  • When you use AdvFab as a floating Action Button, the default Icon displayed will be a warning icon in red, just use the floatingActionButtonIconColor and floatingActionButtonIcon properties to change them; The floating action button also has its idenpendent ontap property called onFloatingActionButtonTapped

  • To use the AnimatedBottomNavigationBar, the body of the scaffold shall be a AdvBottomBarBody

Conclusion #

Thank you for using my package, if you have any question feel free to contact me on instagram or directly on my mail emile@emilecode.com

Here are my other packages

[1.0.0] - 09-05-2020 #

  • Initial release

[1.0.1] - 09-05-2020 #

  • Updated the Documentation

[1.0.2] - 09-05-2020 #

  • Updated internal missing Documentation

[1.0.3] - 09-05-2020 #

  • Fixed broken link and licence

example/lib/main.dart

import 'package:adv_fab/adv_fab.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Advanced Fab demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  AdvFabController mabialaFABController;
  bool useFloatingSpaceBar = false;
  bool useAsFloatingActionButton = false;
  bool useNavigationBar = true;
  @override
  void initState() {
    super.initState();
    mabialaFABController = AdvFabController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: AdvFabBottomBarBody(
          screens: <Widget>[
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Push the button to expand or collapse',
                  ),
                  RaisedButton(
                    onPressed: () {
                      mabialaFABController.setExpandedWidgetConfiguration(
                        showLogs: true,
                        heightToExpandTo: 25,
                        expendedBackgroundColor: Colors.blue[300],
                        withChild: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            width: (MediaQuery.of(context).size.width),

                            ///[IMPORTANT]: the height percentage shall be less than [heightToExpandTo]
                            ///in the next line we use 20%
                            height:
                                (MediaQuery.of(context).size.height / 100) * 20,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 8.0, left: 8),
                                    child: Text('Movies'),
                                  ),
                                ),
                                Expanded(
                                  flex: 5,
                                  child: ListView.builder(
                                    physics: BouncingScrollPhysics(),
                                    itemCount: 7,
                                    scrollDirection: Axis.horizontal,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Container(
                                          width: (MediaQuery.of(context)
                                                      .size
                                                      .width /
                                                  100) *
                                              25,

                                          //height: (MediaQuery.of(context).size.height/100)*9,
                                          color: Colors.pink,
                                        ),
                                      );
                                    },
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      );
                      mabialaFABController.isCollapsed
                          ? mabialaFABController.expandFAB()
                          : mabialaFABController.collapseFAB();
                    },
                    child: Icon(Icons.add_circle),
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(
                          onPressed: () {
                            useFloatingSpaceBar = true;
                            useAsFloatingActionButton = false;
                            useNavigationBar = false;
                            if (mounted) {
                              setState(() {});
                            }
                          },
                          child: Text('Use Floating bar'),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: RaisedButton(
                          onPressed: () {
                            useFloatingSpaceBar = false;
                            useAsFloatingActionButton = true;
                            useNavigationBar = false;
                            if (mounted) {
                              setState(() {});
                            }
                          },
                          child: Text('Use as Floating Action button'),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: RaisedButton(
                          onPressed: () {
                            useFloatingSpaceBar = false;
                            useAsFloatingActionButton = false;
                            useNavigationBar = true;
                            if (mounted) {
                              setState(() {});
                            }
                          },
                          child: Text('Use as Navigation bar'),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.orange,
            )
          ],
          controller: mabialaFABController,
        ),

        ///[SEtting up the floating action button]
        floatingActionButton: AdvFab(
          showLogs: true,
          onFloatingActionButtonTapped: () {},
          floatingActionButtonIcon: Icons.add,
          floatingActionButtonIconColor: Colors.red,
          navigationBarIconActiveColor: Colors.pink,
          navigationBarIconInactiveColor: Colors.pink[200].withOpacity(0.6),
          collapsedColor: Colors.grey[200],
          useAsFloatingSpaceBar: useFloatingSpaceBar,
          useAsFloatingActionButton: useAsFloatingActionButton,
          useAsNavigationBar: useNavigationBar,
          controller: mabialaFABController,
          animationDuration: Duration(milliseconds: 350),
          navigationBarIcons: [
            AdvFabNavigationBarIcon(
              onTap: () {
                print('home button pressed');
              },
              title: 'Home',
              icon: Icons.home,
            ),
            AdvFabNavigationBarIcon(
              onTap: () {
                print('picture button pressed');
              },
              title: 'Picture',
              icon: Icons.image,
            ),
            AdvFabNavigationBarIcon(
              onTap: () {
                print('search button pressed');
              },
              title: 'Search',
              icon: Icons.search,
            ),
            AdvFabNavigationBarIcon(
              onTap: () {
                print('profile button pressed');
                setState(() {});
              },
              title: 'Profile',
              icon: Icons.person,
            ),
          ],
        )
        // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  adv_fab: ^1.0.3

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:adv_fab/adv_fab.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
65
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
82
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • adv_fab that is a package requiring null.

Health suggestions

Format lib/adv_fab.dart.

Run flutter format to format lib/adv_fab.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test