artemis_ui_kit 0.0.18

Some Widgets base on Artemis StyleGuide

artemis_ui_kit

Some Widgets base on Artemis StyleGuide

Getting Started

Basic widgets based on Artemis StyleGuide

Icon Usage Help

in order to use artemis Icon set add the following lines in pubspec.yaml font section

    - family: ArtemisIcons
      fonts:
       - asset: packages/artemis_ui_kit/fonts/ArtemisIcons.ttf

Example

some widgets example:

DropDown

                    ArtemisDropDown<String>(
                      items: [
                        "1",
                        "2",
                        "3",
                      ],
                      label: "Test",
                      itemAsString: (item) => item,
                      onChanged: (s){
                        print(s);
                      },
                      selectedItem: selectedStr,
                    )

ExpansionTile

                    ArtemisExpansionTile(
                      title: Text("Test"),
                      children: [
                        Text("1"),
                        Text("1"),
                        Text("1"),
                        Text("1"),
                        Text("1"),
                      ],
                    ),

RadioButton

                    ArtemisRadioButton(
                      label: "Test",
                      value: radioButtonValue,
                      labelWidget: Icon(Icons.share),
                      onChanged: (v) {
                        setState(() {
                          radioButtonValue = v;
                        });
                      },
                    )

CheckBox

                    ArtemisCheckBox(
                      label: "Test",
                      value: checkBoxButtonValue,
                      checkBoxAtEnd: true,
                      // labelWidget: Icon(Icons.share),
                      onChanged: (v) {
                        setState(() {
                          checkBoxButtonValue = v;
                        });
                      },
                    )

ButtonPanel

                    ArtemisButtonPanel(
                     centerAction: () {
                       print(panelValue);
                     },
                     rightAction: () {
                       setState(() {
                         panelValue++;
                       });
                     },
                     leftAction: () {
                       setState(() {
                         panelValue--;
                       });
                     },
                     rightWidget: Icon(ArtemisIcons.right_arrow),
                     centerWidget: Text("$panelValue"),
                     leftWidget: Icon(ArtemisIcons.left),
                   ),

CardField

                    ArtemisCardField(
                      title: 'Test',
                      value: '123',
                    )

Switch

                    ArtemisSwitch(
                      value: switchButtonValue,
                      switchAtEnd: true,
                      label: 'Test',
                      onChanged: (value) {
                        setState(() {
                          switchButtonValue = value;
                        });
                      },
                    )

Button

                    ArtemisButton(
                      label: 'Test',
                      onPressed: () {},
                      bordered: true,
                      radius: 20,
                    )

TimeField

                    ArtemisTimeField(
                      onChange: (){
                        showDialog(context: context, builder: (c)=>ArtemisTimePickerDialog()).then((value){
                          if(value!=null){
                            setState(() {
                              time=value;
                            });
                          }
                        });
                      },
                      label: 'Test',
                      value: DateFormat("hh:mm").format(time),
                    )