pit_components 0.0.23

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

Components by PIT

A bundle that contains our custom components, mostly just override the default Flutter widgets and custom its style and some of its functional.

Note: This plugin is still under development, and some Components might not be available yet or still has so many bugs.

  • The date picker components inspired by flutter_calendar_carousel, I clone it and override some of its functional and add selection types (single, multi or range)

Installation

First, add pit_components as a dependency in your pubspec.yaml file.

pit_components: ^0.0.18

Example

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _date;
  String _radioButtonValue = "";
  List<String> possibleValue = [];

  double _lowerValue = 0.0;
  double _upperValue = 100.0;

  @override
  void initState() {
    super.initState();
    possibleValue.add("Possible Value 1");
    possibleValue.add("Possible Value 2");
  }

  Widget _buildRadioButton(Widget icon, String value) {
    return AdvRow(divider: RowDivider(12.0), children: [
      icon,
      Text(value,
          style: ts.fw700.merge(ts.fs12).copyWith(
              color:
                  _radioButtonValue == value ? Colors.black87 : Colors.black38))
    ]);
  }

  @override
  Widget build(BuildContext context) {
    AdvTextFieldController controller = AdvTextFieldController(
        label: "Just TextField MaxLines 1",
        hint: "TextField MaxLines 1 Example",
        maxLines: 1 /*,
        text: "00\\00\\0000 ~ 00(00)00®000"*/
        );
    AdvTextFieldController plainController = AdvTextFieldController(
        enable: false,
        hint: "Plain TextField Example",
        label: "Plain TextField");

    AdvRadioGroupController radioButtonController = new AdvRadioGroupController(
        checkedValue: _radioButtonValue,
        itemList: possibleValue.map((value) {
          IconData activeIconData;
          IconData inactiveIconData;

          if (value == possibleValue[0]) {
            activeIconData = Icons.cloud;
            inactiveIconData = Icons.cloud_off;
          } else {
            activeIconData = Icons.alarm;
            inactiveIconData = Icons.alarm_off;
          }

          return RadioGroupItem(value,
              activeItem: _buildRadioButton(Icon(activeIconData), value),
              inactiveItem: _buildRadioButton(Icon(inactiveIconData), value));
        }).toList());

    AdvRangeSliderController sliderController = AdvRangeSliderController(
        lowerValue: _lowerValue,
        upperValue: _upperValue,
        min: 0.0,
        max: 100.0,
        divisions: 10,
        hint: "Advanced Slider");

    AdvGroupCheckController groupCheckController = AdvGroupCheckController(
        checkedValue: "",
        itemList: [
          GroupCheckItem('Image', 'Image'),
          GroupCheckItem('Document', 'Document')
        ]);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          color: Color(0xffFCF6E8),
          child: AdvColumn(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            onlyInner: false,
            divider: ColumnDivider(16.0),
            children: [
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(
                    child: AdvTextField(
                  controller: controller,
//                  inputFormatters: [
//                    DateTextFormatter("dd\\MM\\yyyy ~ HH(mm)ss®SSS")
//                  ],
                )),
                Expanded(
                    child: AdvTextFieldPlain(
                  controller: plainController,
                )),
              ]),
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(child: AdvButton("Normal", enable: false)),
                Expanded(
                    child:
                        AdvButton("Outlined", onlyBorder: true, enable: false)),
                Expanded(
                    child: AdvButton("Reverse", reverse: true, enable: false))
              ]),
              AdvButton(
                "Go to List View with Bottom Button",
                width: double.infinity,
                buttonSize: ButtonSize.small,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => AnotherPage(),
                        settings:
                            RouteSettings(name: widget.runtimeType.toString())),
                  );
                },
              ),
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(
                  child: AdvButtonWithIcon(
                      "", Icon(Icons.ring_volume), Axis.vertical),
                ),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.airline_seat_flat_angled), Axis.vertical,
                        onPressed: () {}, onlyBorder: true)),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.headset), Axis.vertical,
                        onPressed: () {}, reverse: true)),
              ]),
              Visibility(
                  visible: _date != null,
                  child: AdvText("You picked date => $_date")),
              AdvDatePicker(
                onChanged: (List value) {
                  if (value.length == 0) return;

                  setState(() {
                    _date = value[0];
                  });
                },
//                markedDates: [
//                  MarkedDate(DateTime(2018, 11, 20),
//                      "20th November - Maulid Nabi Muhammad")
//                ],
                controller: AdvDatePickerController(
                    label: "Just TextField MaxLines 1",
                    enable: false,
                    hint: "test",
                    initialValue: _date ?? DateTime.now(),
                    dates: [_date ?? DateTime.now()]),
              ),
              AdvDropDown(
                onChanged: (String value) {},
                items: {
                  "data 1": "display 1",
                  "data 2": "display 2",
                  "data 3": "display 3"
                },
              ),
              AdvSingleDigitInputter(
                text: "12345",
                digitCount: 5,
              ),
              AdvRadioGroup(
                direction: Axis.vertical,
                controller: radioButtonController,
                divider: 8.0,
                callback: _handleRadioValueChange,
              ),
              AdvRangeSlider(
                controller: sliderController,
                onChanged: (low, high) {
                  setState(() {
                    _lowerValue = low;
                    _upperValue = high;
                  });
                },
              ),
              AdvBadge(
                size: 50.0,
                text: "5,000.00",
              ),
              AdvGroupCheck(
                controller: groupCheckController,
                callback: (itemSelected) async {},
              ),
              AdvChooser(
                enable: false,
                label: "Chooser Example",
                hint: "This is chooser example",
                items: {
                  "data 1": "display 1",
                  "data 2": "display 2",
                  "data 3": "display 3",
                  "data 4": "display 4",
                  "data 5": "display 5",
                  "data 6": "display 6",
                  "data 7": "display 7",
                  "data 8": "display 8",
                  "data 9": "display 9",
                  "data 10": "display 10",
                  "data 11": "display 11",
                  "data 12": "display 12",
                  "data 13": "display 13",
                  "data 14": "display 14",
                  "data 15": "display 15",
                  "data 16": "display 16",
                  "data 17": "display 17",
                  "data 18": "display 18",
                  "data 19": "display 19",
                  "data 20": "display 20",
                  "data 21": "display 21",
                  "data 22": "display 22",
                  "data 23": "display 24 ",
                  "data 24": "display 24",
                  "data 25": "display 25"
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  void _handleRadioValueChange(String value) {
    setState(() {
      _radioButtonValue = value;
    });
  }
}

0.0.1

  • Test Release

0.0.2

  • Initial Release (with Button, Column, DatePicker, Dropdown, Row, SingleDigitInputter, Text with Ellipsis, TextField)

0.0.3

  • intl dependency issue fixed

0.0.4

  • More components added (Badge, GroupCheck, ListTile, ListView, ListView with Buttom Section, Radio Button, Range Slider, Visibility, Date Formatter for TextField))

0.0.5

  • More component added (FutureBuider)

0.0.6

  • More component added (ExpansionPanel)

0.0.7

  • Bug fix for ExpansionPanel

0.0.8

  • Bug fix for ExpansionPanel and more component added (TextWithNumber)

0.0.9

  • Bug fixes

0.0.10

  • Bug fixes

0.0.11

  • Bug fixes and more component added (Chooser)

0.0.12

  • Bug fixes

0.0.13

  • Bug fixes and more component added (ScrollableBottomSheet)

0.0.14

  • Pick date & Pick from Chooser now can be used independently

0.0.15

  • More component added (InfiniteListView)

0.0.16

  • Bug fixes

0.0.17

  • Bug fixes

0.0.18

  • More component added (RatingBar)

0.0.19

  • Bug fixes

0.0.20

  • Bug fixes

0.0.21

  • Bug fixes

0.0.22

  • Bug fixes and more component added (Increment, TextField with Button)

0.0.23

  • Bug fixes

example/README.md

import 'package:flutter/material.dart';
import 'package:pit_components/components/adv_badge.dart';
import 'package:pit_components/components/adv_button.dart';
import 'package:pit_components/components/adv_chooser.dart';
import 'package:pit_components/components/adv_column.dart';
import 'package:pit_components/components/adv_date_picker.dart';
import 'package:pit_components/components/adv_drop_down.dart';
import 'package:pit_components/components/adv_group_check.dart';
import 'package:pit_components/components/adv_list_view_with_bottom.dart';
import 'package:pit_components/components/adv_radio_button.dart';
import 'package:pit_components/components/adv_range_slider.dart';
import 'package:pit_components/components/adv_row.dart';
import 'package:pit_components/components/adv_single_digit_inputter.dart';
import 'package:pit_components/components/adv_text.dart';
import 'package:pit_components/components/adv_text_field.dart';
import 'package:pit_components/components/adv_text_field_plain.dart';
import 'package:pit_components/components/controllers/adv_date_picker_controller.dart';
import 'package:pit_components/components/controllers/adv_text_field_controller.dart';
import 'package:pit_components/consts/textstyles.dart' as ts;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PIT Components Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'PIT Components Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime _date;
  String _radioButtonValue = "";
  List<String> possibleValue = [];

  double _lowerValue = 0.0;
  double _upperValue = 100.0;

  @override
  void initState() {
    super.initState();
    possibleValue.add("Possible Value 1");
    possibleValue.add("Possible Value 2");
  }

  Widget _buildRadioButton(Widget icon, String value) {
    return AdvRow(divider: RowDivider(12.0), children: [
      icon,
      Text(value,
          style: ts.fw700.merge(ts.fs12).copyWith(
              color:
                  _radioButtonValue == value ? Colors.black87 : Colors.black38))
    ]);
  }

  @override
  Widget build(BuildContext context) {
    AdvTextFieldController controller = AdvTextFieldController(
        label: "Just TextField MaxLines 1",
        hint: "TextField MaxLines 1 Example",
        maxLines: 1 /*,
        text: "00\\00\\0000 ~ 00(00)00®000"*/
        );
    AdvTextFieldController plainController = AdvTextFieldController(
        enable: false,
        hint: "Plain TextField Example",
        label: "Plain TextField");

    AdvRadioGroupController radioButtonController = new AdvRadioGroupController(
        checkedValue: _radioButtonValue,
        itemList: possibleValue.map((value) {
          IconData activeIconData;
          IconData inactiveIconData;

          if (value == possibleValue[0]) {
            activeIconData = Icons.cloud;
            inactiveIconData = Icons.cloud_off;
          } else {
            activeIconData = Icons.alarm;
            inactiveIconData = Icons.alarm_off;
          }

          return RadioGroupItem(value,
              activeItem: _buildRadioButton(Icon(activeIconData), value),
              inactiveItem: _buildRadioButton(Icon(inactiveIconData), value));
        }).toList());

    AdvRangeSliderController sliderController = AdvRangeSliderController(
        lowerValue: _lowerValue,
        upperValue: _upperValue,
        min: 0.0,
        max: 100.0,
        divisions: 10,
        hint: "Advanced Slider");

    AdvGroupCheckController groupCheckController = AdvGroupCheckController(
        checkedValue: "",
        itemList: [
          GroupCheckItem('Image', 'Image'),
          GroupCheckItem('Document', 'Document')
        ]);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          color: Color(0xffFCF6E8),
          child: AdvColumn(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            onlyInner: false,
            divider: ColumnDivider(16.0),
            children: [
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(
                    child: AdvTextField(
                  controller: controller,
//                  inputFormatters: [
//                    DateTextFormatter("dd\\MM\\yyyy ~ HH(mm)ss®SSS")
//                  ],
                )),
                Expanded(
                    child: AdvTextFieldPlain(
                  controller: plainController,
                )),
              ]),
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(child: AdvButton("Normal", enable: false)),
                Expanded(
                    child:
                        AdvButton("Outlined", onlyBorder: true, enable: false)),
                Expanded(
                    child: AdvButton("Reverse", reverse: true, enable: false))
              ]),
              AdvButton(
                "Go to List View with Bottom Button",
                width: double.infinity,
                buttonSize: ButtonSize.small,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => AnotherPage(),
                        settings:
                            RouteSettings(name: widget.runtimeType.toString())),
                  );
                },
              ),
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(
                  child: AdvButtonWithIcon(
                      "", Icon(Icons.ring_volume), Axis.vertical),
                ),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.airline_seat_flat_angled), Axis.vertical,
                        onPressed: () {}, onlyBorder: true)),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.headset), Axis.vertical,
                        onPressed: () {}, reverse: true)),
              ]),
              Visibility(
                  visible: _date != null,
                  child: AdvText("You picked date => $_date")),
              AdvDatePicker(
                onChanged: (List value) {
                  if (value.length == 0) return;

                  setState(() {
                    _date = value[0];
                  });
                },
//                markedDates: [
//                  MarkedDate(DateTime(2018, 11, 20),
//                      "20th November - Maulid Nabi Muhammad")
//                ],
                controller: AdvDatePickerController(
                    label: "Just TextField MaxLines 1",
                    enable: false,
                    hint: "test",
                    initialValue: _date ?? DateTime.now(),
                    dates: [_date ?? DateTime.now()]),
              ),
              AdvDropDown(
                onChanged: (String value) {},
                items: {
                  "data 1": "display 1",
                  "data 2": "display 2",
                  "data 3": "display 3"
                },
              ),
              AdvSingleDigitInputter(
                text: "12345",
                digitCount: 5,
              ),
              AdvRadioGroup(
                direction: Axis.vertical,
                controller: radioButtonController,
                divider: 8.0,
                callback: _handleRadioValueChange,
              ),
              AdvRangeSlider(
                controller: sliderController,
                onChanged: (low, high) {
                  setState(() {
                    _lowerValue = low;
                    _upperValue = high;
                  });
                },
              ),
              AdvBadge(
                size: 50.0,
                text: "5,000.00",
              ),
              AdvGroupCheck(
                controller: groupCheckController,
                callback: (itemSelected) async {},
              ),
              AdvChooser(
                enable: false,
                label: "Chooser Example",
                hint: "This is chooser example",
                items: {
                  "data 1": "display 1",
                  "data 2": "display 2",
                  "data 3": "display 3",
                  "data 4": "display 4",
                  "data 5": "display 5",
                  "data 6": "display 6",
                  "data 7": "display 7",
                  "data 8": "display 8",
                  "data 9": "display 9",
                  "data 10": "display 10",
                  "data 11": "display 11",
                  "data 12": "display 12",
                  "data 13": "display 13",
                  "data 14": "display 14",
                  "data 15": "display 15",
                  "data 16": "display 16",
                  "data 17": "display 17",
                  "data 18": "display 18",
                  "data 19": "display 19",
                  "data 20": "display 20",
                  "data 21": "display 21",
                  "data 22": "display 22",
                  "data 23": "display 24 ",
                  "data 24": "display 24",
                  "data 25": "display 25"
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  void _handleRadioValueChange(String value) {
    setState(() {
      _radioButtonValue = value;
    });
  }
}

class AnotherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Another Page"),
      ),
      body: AdvListViewWithBottom(
        divider: ListViewDivider(
          1.0,
          color: Colors.grey,
        ),
        children: List.generate(100, (index) {
          return Text("Text $index");
        }),
        footerItem: Container(
          alignment: Alignment.center,
          child: Material(
              clipBehavior: Clip.antiAlias,
              borderRadius: BorderRadius.all(Radius.circular(25.0)),
              child: InkWell(
                onTap: () {},
                child: Container(
                    padding:
                        EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                    child: AdvRow(
                        divider: RowDivider(4.0),
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(Icons.filter_list,
                              size: 16.0, color: Colors.purple),
                          Text("Filter",
                              style: ts.fs12.copyWith(color: Colors.purple))
                        ])),
              ),
              elevation: 4.0),
          margin: EdgeInsets.only(bottom: 20.0),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  pit_components: ^0.0.23

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:pit_components/pit_components.dart';
  
Version Uploaded Documentation Archive
0.0.23 Dec 13, 2018 Go to the documentation of pit_components 0.0.23 Download pit_components 0.0.23 archive
0.0.22 Dec 11, 2018 Go to the documentation of pit_components 0.0.22 Download pit_components 0.0.22 archive
0.0.21 Dec 10, 2018 Go to the documentation of pit_components 0.0.21 Download pit_components 0.0.21 archive
0.0.20 Dec 10, 2018 Go to the documentation of pit_components 0.0.20 Download pit_components 0.0.20 archive
0.0.19 Dec 6, 2018 Go to the documentation of pit_components 0.0.19 Download pit_components 0.0.19 archive
0.0.18 Dec 4, 2018 Go to the documentation of pit_components 0.0.18 Download pit_components 0.0.18 archive
0.0.17 Dec 4, 2018 Go to the documentation of pit_components 0.0.17 Download pit_components 0.0.17 archive
0.0.16 Dec 4, 2018 Go to the documentation of pit_components 0.0.16 Download pit_components 0.0.16 archive
0.0.15 Nov 30, 2018 Go to the documentation of pit_components 0.0.15 Download pit_components 0.0.15 archive
0.0.14 Nov 28, 2018 Go to the documentation of pit_components 0.0.14 Download pit_components 0.0.14 archive

All 23 versions...

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]
90
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

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

  • Dart: 2.1.0
  • pana: 0.12.7
  • Flutter: 1.0.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While there is nothing inherently wrong with versions of 0.0.*, it usually means that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
flutter_range_slider ^1.0.1 1.0.1
intl ^0.15.7 0.15.7
Transitive dependencies
collection 1.14.11
meta 1.1.6
path 1.6.2
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test