pit_components 0.0.18

Our customized material components. (Padimas Inovasi Teknologi)

example/lib/main.dart

import 'dart:math';

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_infinity_list_view.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_scrollable_bottom_sheet.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;
import 'package:pit_components/utils/utils.dart';

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,
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => InfinityListDemo(),
                            settings: RouteSettings(
                                name: widget.runtimeType.toString())),
                      );
                    },
                  ),
                ),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.airline_seat_flat_angled), Axis.vertical,
                        onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => PersistentBottomSheetDemo(),
                        settings:
                            RouteSettings(name: widget.runtimeType.toString())),
                  );
                }, onlyBorder: true)),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.headset), Axis.vertical, onPressed: () {
                  Utils.pickDate(
                    context,
                    selectionType: SelectionType.range,
                  ).then((dates) {
                    print("dates => $dates");
                  });
                }, reverse: true)),
              ]),
              AdvRow(divider: RowDivider(8.0), children: [
                Expanded(
                  child: AdvButtonWithIcon(
                    "",
                    Icon(Icons.ring_volume),
                    Axis.vertical,
                    enable: false,
                  ),
                ),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.airline_seat_flat_angled), Axis.vertical,
                        enable: false,
                        onlyBorder: true)),
                Expanded(
                    child: AdvButtonWithIcon(
                        "", Icon(Icons.headset), Axis.vertical,
                        enable: false, reverse: true)),
              ]),
              Visibility(
                  visible: _date != null,
                  child: AdvText("You picked date => $_date")),
              AdvDatePicker(
                selectionType: SelectionType.range,
                onChanged: (List value) {
                  if (value == null || 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",
                    hint: "test",
                    initialValue: _date ?? DateTime.now(),
                    markedDates: [MarkedDate(DateTime.now(), "lalala")],
                    dates: [_date ?? DateTime.now(), _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 {},
              ),
              Row(children: [
                Expanded(
                    child: AdvChooser(
                  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),
        ),
      ),
    );
  }
}

class PersistentBottomSheetDemo extends StatefulWidget {
  static const String routeName = '/material/persistent-bottom-sheet';

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

class _PersistentBottomSheetDemoState extends State<PersistentBottomSheetDemo> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  bool _bottomSheetActive = false;

  @override
  void initState() {
    super.initState();
  }

  void _showMessage() {
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: const Text('You tapped the floating action button.'),
          actions: <Widget>[
            FlatButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('OK'))
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text('Persistent bottom sheet'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _showMessage,
          backgroundColor: Colors.redAccent,
          child: const Icon(
            Icons.add,
            semanticLabel: 'Add',
          ),
        ),
        body: Builder(
          builder: (BuildContext context) {
            final ThemeData themeData = Theme.of(context);
            return Center(
                child: RaisedButton(
                    onPressed: _bottomSheetActive
                        ? null
                        : () {
                            setState(() {
                              //disable button
                              _bottomSheetActive = true;
                            });
                            showBottomSheet<void>(
                                context: context,
                                builder: (BuildContext context) {
                                  return AdvScrollableBottomSheet(
                                    initialHeight: 550.0,
                                    child: Padding(
                                        padding: const EdgeInsets.all(32.0),
                                        child: Column(children: [
                                          Text(
                                              'This is a Material persistent bottom sheet. Drag downwards to dismiss it.',
                                              textAlign: TextAlign.center,
                                              style: TextStyle(
                                                  color: themeData.accentColor,
                                                  fontSize: 24.0)),
                                          Column(
                                              children:
                                                  List.generate(100, (index) {
                                            return Text("Text $index");
                                          }))
                                        ])),
                                  );
                                }).closed.whenComplete(() {
                              if (mounted) {
                                setState(() {
                                  // re-enable the button
                                  _bottomSheetActive = false;
                                });
                              }
                            });
                          },
                    child: const Text('SHOW BOTTOM SHEET')));
          },
        ));
  }
}

class InfinityListDemo extends StatefulWidget {
  @override
  _InfinityListDemoState createState() => _InfinityListDemoState();
}

class _InfinityListDemoState extends State<InfinityListDemo> {
  List<int> items = [];

  AdvInfiniteListRemote remote = AdvInfiniteListRemote();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Infinite ListView"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              items = [];

              remote.reset();
            },
          )
        ],
      ),
      body: AdvColumn(children: [
        Text(
            "the data will be fetched 50 per pull, and it will randomly return true (keep fetching data) or false (stop fetching data), so if you have reach to false condition, you will have to refresh it again"),
        Expanded(
            child: AdvInfiniteListView(
          widgetBuilder: _widgetBuilder,
          fetcher: _fetcher,
          remote: remote,
        ))
      ]),
    );
  }

  List<Widget> _widgetBuilder(BuildContext context) {
    return List.generate(
      items.length,
      (index) {
        return Text("Number $index");
      },
    );
  }

  Future<bool> _fetcher(BuildContext context, int cursor) {
    return Future.delayed(Duration(seconds: 2), () {
      print("cursor = $cursor");
      bool isThereAnyMoreData = Random().nextBool();

      items.addAll(List.generate(50, (i) => i));

      print("isThereAnyMoreData = $isThereAnyMoreData");
      return isThereAnyMoreData;
    });
  }

  /// from - inclusive, to - exclusive
  Future<List<int>> fakeRequest(int from, int to) async {
    return Future.delayed(Duration(seconds: 2), () {
      return List.generate(to - from, (i) => i + from);
    });
  }
}