horizontal_indicator 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

horizontal_indicator #

This package provides you horizontal date horizontal_indicator.

Description:

Horizontal date horizontal_indicator flutter package for letting developers easily get days of current month as horizontal scrollable bar that can add anywhere in a widget tree. Can mark specific days(to show available or active or to improve user experience). Can get the selected day or can perform task when selecting a day on the horizontal_indicator.

Get this package to your project:

Add horizontal_indicator: <version> to your pubspec.yaml file. Then use DateIndicator() as a child of your any widget. That's it.

To get latest <version> click on installing tab above.

Implementation:
  • Use default color and sizes or provide args to DateIndicator() constructor.
  • Set initialDay value to select when first run (By default will not select any day).
  • Get the selected holder value/day by using onHolderTap.

Please see examples and doc comments in the bottom for more.

Notices:

This package uses intl: ^0.16.0 for supporting formated date.

Example One (Basic / Default):
import 'package:flutter/material.dart';
import 'package:horizontal_indicator/horizontal_indicator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SO answers sample snippet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DateIndicatorPage(),
    );
  }
}

class DateIndicatorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            DateIndicator(),
            Expanded(
              child: Container(),
            ),
          ],
        ),
      ),
    );
  }
}

Go to example directory to see demo app with how to change colors: https://github.com/Blasanka/horizontal_indicator/tree/master/example

Screenshots:

active bubble top horizontal calendar flutter package blasanka

active bubble top horizontal calendar flutter package horizontal

Complete Page Flutter Date horizontal_indicator

In a widget Flutter Date horizontal_indicator

Example two with holder tap action
import 'package:flutter/material.dart';
import 'package:horizontal_indicator/horizontal_indicator.dart';

class DateIndicatorPage extends StatefulWidget {

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

class _DateIndicatorPageState extends State<DateIndicatorPage> {
  int selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size(double.infinity, 68),
          child: DateIndicator(
            onHolderTap: (int day) => setState(() => selectedDay = day),
          ),
        ),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              child: Center(child: Text("$selectedDay")),
            ),
          ),
        ],
      ),
    );
  }
}
Doc comments
/// @param [`indicatorWidth`]: default to device width.
///
/// @param [`indicatorHeight`]: default to `68.0`. If you are changing this below params also should change to stop layout becoming ugly.
///
/// @param [`circleHolderWidth`]: default to `45.0`.
///
/// @param [`circleHolderHeight`]: default to `45.0`.
///
/// @param [`activeBubbleWidth`]: default to `15.0`.
///
/// @param [`activeBubbleHeight`]: default to `15.0`.
///
/// @param  [`activeBubbleRightPosition`]: default to `8.0`, adjust the right position of the active bubble
///
/// @param  [`activeBubbleLeftPosition`]: default to `20.0`, adjust the left position of the active bubble
///
/// @param  [`activeBubbleBottomPosition`]: default to `5.0`, adjust the bottom position of the active bubble
///
/// @param [`hideDayOfWeek`]: default to `false`, on top of the circle holder three letters of the day of the week  is displaying
///
/// @param [`initialDay`]: for to select specific day when this widget first display
///
/// @param [`jumpToInitialDay`]: set to `true` by default, this will scroll the day holder list view to initial day
///
/// @param [`activeHolders`]: default to empty list, that means no date holder shows active bubble.
/// to show active bubbles provide *day of month* as a `int` `List`. Ex: If January `[1,2,31]`, depending on the month end day have to be correct.
///
/// @param [`onHolderTap`]: is a function with an integer parameter to for you to access day selected value. ```(int i) => setState(() => yourVar = i)```,
///
/// @param [`updateSelectedDay`]: If not null, will change the holder selection to that day(should be between month days. Ex: 1-31).
/// 
/// Check this example: https://github.com/Blasanka/horizontal_indicator/blob/master/example/lib/main.dart
available params
const DateIndicator({
    this.holderColor,
    this.activeBubbleColor,
    this.textColor,
    this.numberColor,
    this.selectedBorderColor,
    this.unSelectedBorderColor,
    this.horizontal_indicatorShadowColor,
    this.horizontal_indicatorColor,
    this.horizontal_indicatorWidth, // default to device width, ignore this if you need full width of the device
    this.horizontal_indicatorHeight = 68.0,
    this.circleHolderWidth = 45.0,
    this.circleHolderHeight = 45.0,
    this.activeBubbleWidth = 15.0,
    this.activeBubbleHeight = 15.0,
    this.activeBubbleRightPosition = 8.0,
    this.activeBubbleLeftPosition = 20.0,
    this.activeBubbleBottomPosition = 5.0,
    this.hideDayOfWeek = false,
    this.initialDay,
    this.activeHolders,
    this.onHolderTap,
    this.updateSelectedDay,
});

Read library document: https://pub.dev/documentation/horizontal_indicator/latest/horizontal_indicator/DateIndicator-class.html

Need to contribute?

You are welcome(Currently there is no guideline but give your pull request I will review and let you know).

Having an issue?

If you encounter any bug or confused with this package or even your suggestions, please send your valuable mail to blasanka95@yahoo.com

[0.1.0] - 22/01/2020 (January 2020)

  • Parameter (updateSelectedDay) to change date holder if have dragging behaviour.

[0.0.9] - 22/01/2020 (January 2020)

  • Parameter to disabling Jump to initial day added.

[0.0.8] - 21/01/2020 (January 2020)

  • Jump to initial day added, if initial day added.

[0.0.7] - 21/01/2020 (January 2020)

  • One bug fixed ("onTap was called on null fixed")

[0.0.6] - 17/01/2020 (January 2020)

  • Parameters for changing active bubble left added. (activeBubbleBottomPosition)
  • Parameters to hide top day of week three letter. (hideDayOfWeek)

[0.0.5] - 15/01/2020 (January 2020)

  • Parameters for changing horizontal_indicator width and height. (horizontal_indicatorWidth and horizontal_indicatorHeight)
  • Parameters for changing circle holder width and height. (circleHolderWidth and circleHolderHeight)
  • Parameters for changing active bubble width and height. (activeBubbleWidth and activeBubbleHeight)
  • Parameters for changing active bubble bottom and right position. (activeBubbleRightPosition and activeBubbleBottomPosition)

[0.0.4] - 15/01/2020 (January 2020)

  • [Day of week wrong] bug fixed.

[0.0.3] - 14/01/2020 (January 2020)

  • Provided a list parameter to add available bubble under date holder.
  • Add another parameter to add initial selected day.
  • Example app updated with latest changes.
  • README updated with new example.

[0.0.2] - 13/01/2020 (January 2020)

  • Provided a way to add custom colors to horizontal_indicator, date holder and texts.
  • onHolderTap function to get selected day.
  • Example app added.

[0.0.1] - 02/01/2020 (January 2020)

  • Added DateIndicator() widget that display horizontal list with circle date holder.

example/README.md

example #

Example for Horizontal horizontal_indicator

Example One (Basic / Default):

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SO answers sample snippet',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DateIndicatorPage(),
    );
  }
}

class DateIndicatorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            DateIndicator(),
            Expanded(
              child: Container(),
            ),
          ],
        ),
      ),
    );
  }
}

Go to example directory to see demo app with how to change colors: https://github.com/Blasanka/horizontal_indicator/tree/master/example

Example two with holder tap action

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

class DateIndicatorPage extends StatefulWidget {

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

class _DateIndicatorPageState extends State<DateIndicatorPage> {
  int selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size(double.infinity, 68),
          child: DateIndicator(
            onHolderTap: (int day) => setState(() => selectedDay = day),
          ),
        ),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              child: Center(child: Text("$selectedDay")),
            ),
          ),
        ],
      ),
    );
  }
}

Contributor are welcome. Or if you encounter any bug, please mail to blasanka95@yahoo.com

Just started with Flutter? #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  horizontal_indicator: ^0.1.0

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:horizontal_indicator/horizontal_indicator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
46
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]
73
Learn more about scoring.

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

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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl ^0.16.0 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
flutter_test