flutter_fab_dialer 0.1.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 91

Introduction

This is a Widget build for having an alternative to default menus

alt text

There are four types of fab menu items

With text and image associated

  FabMiniMenuItem.withTextWithImage(
          img,
          4.0,
          "Button menu",
          _logCounter,
          "Click me",
          Colors.blue,
          Colors.white,
          true
        ),

With only text associated

  FabMiniMenuItem.withText(
          new Icon(Icons.add),
          Colors.blue,
          4.0,
          "Button menu",
          _incrementCounter,
          "Click me",
          Colors.blue,
          Colors.white,
          true
        )

With no text and image associated

  FabMiniMenuItem.noTextWithImage(
          img,
          4.0,
          "Button menu",
          _incrementCounter,
          false
        )

With no text and no image associated

  FabMiniMenuItem.noText(
          new Icon(Icons.add),
          Colors.blue,
          4.0,
          "Button menu",
          _logCounter,
          false
        )

Usage

Create a list with your desired elements and customize each one

 var _fabMiniMenuItemList = [
      new FabMiniMenuItem.withTextWithImage(
        img,
        4.0,
        "Button menu",
        _logCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),

      new FabMiniMenuItem.withText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _incrementCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),
      new FabMiniMenuItem.noText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _logCounter,
        false
      ),

      new FabMiniMenuItem.noTextWithImage(
        img,
        4.0,
        "Button menu",
        _incrementCounter,
        false
      )
    ];

Add the Dialer to your UI


class _MyHomePageState extends State<MyHomePage> {

  //Provides an image of a cat
  static String getNewCatUrl() {
     return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
         '#${new DateTime.now().millisecondsSinceEpoch}';
   }

   int _counter = 0;

  //Adds value to counter
   void _incrementCounter() {
     setState(() {
       _counter++;
     });
   }

   //Prints the value of the counter
   void _logCounter() {
     setState(() {
       print(_counter);
     });
   }

  @override
   Widget build(BuildContext context) {

     ImageProvider img = new NetworkImage(getNewCatUrl());

    //The list of FabMiniMenuItems that we are going to use
     var _fabMiniMenuItemList = [
       new FabMiniMenuItem.withTextWithImage(
         img,
         4.0,
         "Button menu",
         _logCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),

       new FabMiniMenuItem.withText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _incrementCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),
       new FabMiniMenuItem.noText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _logCounter,
         false
       ),

       new FabMiniMenuItem.noTextWithImage(
         img,
         4.0,
         "Button menu",
         _incrementCounter,
         false
       )
     ];

     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       //Using a Stack will assure that the Dialer will appear at the end of your layout
       body:  new Stack(
         children: <Widget>[
           new Center(
             child: new Column(
               children: <Widget>[
                 new Text('You have pushed the button this many times:'),
                 new Text('$_counter', style: Theme.of(context).textTheme.display1),
               ],
             ),
           ),
           new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add)),
         ],
       ),
     );
   }
}

[0.0.1] - 09/29/2017

  • Fab Dialer library

[0.0.3] - 03/08/2018

  • Removed default constructor for FabDialerMenuItem

  • Added two new constructors

  • New Constructor NoText.

  • New Constructor WithText.

[0.0.4] - 03/08/2018

  • Edited pubspec.yaml to add Dart SDK

[0.0.5] - 08/05/2018

  • Added HeroTag to fab list

[0.1.0] - 08/10/2018

  • Added image child for fab items

  • Added hide option when fab item is pressed

  • Added animations

  • Fixed chip color

[0.1.1] - 08/10/2018

  • Added example

  • Formatted code

  • Added description

  • Removed dependency from Dart-dev

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  static String getNewCatUrl() {
    return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
        '#${new DateTime.now().millisecondsSinceEpoch}';
  }

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _logCounter() {
    setState(() {
      print(_counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    //The list of FabMiniMenuItems that we are going to use
    ImageProvider img = new NetworkImage(getNewCatUrl());

    var _fabMiniMenuItemList = [
      new FabMiniMenuItem.withTextWithImage(img, 4.0, "Button menu",
          _logCounter, "Click me", Colors.blue, Colors.white, true),
      new FabMiniMenuItem.withText(
          new Icon(Icons.add),
          Colors.blue,
          4.0,
          "Button menu",
          _incrementCounter,
          "Click me",
          Colors.blue,
          Colors.white,
          true),
      new FabMiniMenuItem.noText(new Icon(Icons.add), Colors.blue, 4.0,
          "Button menu", _logCounter, false),
      new FabMiniMenuItem.noTextWithImage(
          img, 4.0, "Button menu", _incrementCounter, false)
    ];

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      //Using a Stack will assure that the Dialer will appear at the end of your layout
      body: new Stack(
        children: <Widget>[
          new Center(
            child: new Column(
              children: <Widget>[
                new Text('You have pushed the button this many times:'),
                new Text('$_counter',
                    style: Theme.of(context).textTheme.display1),
              ],
            ),
          ),
          new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add)),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_fab_dialer: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_fab_dialer/flutter_fab_dialer.dart';
  
Version Uploaded Documentation Archive
0.1.1 Oct 8, 2018 Go to the documentation of flutter_fab_dialer 0.1.1 Download flutter_fab_dialer 0.1.1 archive
0.1.0 Oct 8, 2018 Go to the documentation of flutter_fab_dialer 0.1.0 Download flutter_fab_dialer 0.1.0 archive
0.0.5 May 8, 2018 Go to the documentation of flutter_fab_dialer 0.0.5 Download flutter_fab_dialer 0.0.5 archive
0.0.4 Apr 3, 2018 Go to the documentation of flutter_fab_dialer 0.0.4 Download flutter_fab_dialer 0.0.4 archive
0.0.3 Mar 8, 2018 Go to the documentation of flutter_fab_dialer 0.0.3 Download flutter_fab_dialer 0.0.3 archive
0.0.2 Sep 29, 2017 Go to the documentation of flutter_fab_dialer 0.0.2 Download flutter_fab_dialer 0.0.2 archive
0.0.1 Sep 29, 2017 Go to the documentation of flutter_fab_dialer 0.0.1 Download flutter_fab_dialer 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
83
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]
91
Learn more about scoring.

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

  • Dart: 2.0.0
  • pana: 0.12.4
  • Flutter: 0.9.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
test ^1.3.3