animated_drop_down_form_field 0.0.1

animated_drop_down_form_field: ^0.0.1 copied to clipboard

Animated_Drop_Down_Form_Field #

This package provides awesome drop down buttons with built-in and customizable animation and many attributes to create professional user interface.

I have already made a video to explain all details of this package on Youtube

Usage #

This package provides many attributes to give you the ability to create fully customized DropDownFormField. So to cover all of them let's break them down into 5 Categories :

####1- Requierd Attributes: There is only one requierd attribute which called items, And these items are list of widgets will be displayed to the user.

    AnimatedDropDownFormFormField(
        items:[
            Text("Item 1"),
            Text("Item 2"),
            Text("Item 3"),
            Text("Item 4"),
        ],
    );

####2- Button Attributes: These attributes give you the ability to control the button widget and they are 5 attributes :

• buttonDecoration:

  It's a BoxDecoration object to fully control the button decoration.

  AnimatedDropDownFormFormField(
      items:_items,
      buttonDecoration:BoxDecoration(color:Colors.blueAccent,),
  );
  

• buttonPadding:

  To provide some padding from edges to the content of button.

  AnimatedDropDownFormFormField(
      items:_items,
      buttonPadding: EdgeInsets.all(20),
  );
  

• placeHolder:

  It's a widget displayed in the button if the user didn't select any item yet.

  AnimatedDropDownFormFormField(
      items:_items,
      placeHolder: Text("No Data"),
  );
  

• actionWidget:

  This is the icon (widget) which displayed on the end of the dropDownButton.

  AnimatedDropDownFormFormField(
      items:_items,
      actionWidget: Icon(Icons.arrow_drop_down),
  );
  

• onTapButton:

  It's a void call back and will be executed when the user tap the button.

  AnimatedDropDownFormFormField(
      items:_items,
      onTapButton:(){
  
          //Will be excuted when the user tap the button 
      },
  );
  

####3- Drop Down List Attributes: These attributes designed to control the drop down list, They are 9 attributes, So let's figure out each one of them...

• listHeight:

  To control the height of the dropDownList.

  AnimatedDropDownFormFormField(
      items:_items,
      listHeight: 150,
  );
  

• listBackgroundDecoration:

  This is a BoxDecoration object to control the list decoration.

  AnimatedDropDownFormFormField(
      items:_items,
      listBackgroundDecoration: BoxDecoration(color:Colors.blueAccent,),
  );
  

• listPadding:

  Apply padding to list content.

  AnimatedDropDownFormFormField(
      items:_items,
      listPadding: EdgeInsets.all(20),
  );
  

• listScrollPhysics:

  Control the type of scrolling physics at drop down list

  AnimatedDropDownFormFormField(
      items:_items,
      listScrollPhysics: BouncingScrollPhysics(),
  );
  

• separatorWigdet:

  It's a widget appears between the items inside the list.

  AnimatedDropDownFormFormField(
      items:_items,
      separatorWigdet:SizedBox(height: 15),
  );
  

• selectedItemIcon:

  It's the icon (widget) which appears next to the selected item at the list.

  AnimatedDropDownFormFormField(
      items:_items,
      selectedItemIcon:Icon(Icons.done_rounded),
  );
  

• onChangeSelectedIndex:

  It's a function gives you the currently selected item index at items list and will be executed when the user changes the selected item

  AnimatedDropDownFormFormField(
      items:_items,
      onChangeSelectedIndex: (int index){
          print(" Item At Index ${index} Is Currently Selected");
      },
  );
  

• onChangeListState:

  This is also a function gives you the current state of the list (Closed / Opened) and will be executed when the list state changes

  AnimatedDropDownFormFormField(
      items:_items,
      onChangeListState: (bool listIsOpened){
          print("The Drop Down List Is Currently ${listIsOpened?"Opened":"Closed"}");
      },
  );
  

• dropDownAnimationParameters:

  This attribute gives you the abillity to control the opening and closing animation of the drop down list can take an object from one out of two classes:

  • SizingDropDownAnimationParameters.
  • ScalingDropDownAnimationParameters.

  At both of them you can control:

  • Duration (Duration of list opening)
  • Curve (Animation curve of list opening)
  • Reverse duration (Duration of list closure)
  • ReverseCurve (Animation curve of list closure)

  But the difference between them is that:

  • At scaling you can control the centerOfScaling attribute which is AlignmentGeometry object to control from which point the scaling will start and stop.

    AnimatedDropDownFormFormField(
        items:_items,
        dropDownAnimationParameters: ScalingDropDownAnimationParameters(
            centerOfScaling:Alignment.topCenter,
            reverseDuration:Duration(seconds:2),
            reverseCurve:Curves.linear,
        ),
    );
    

  • On the other hand at sizing you can control the axis of sizing (can be horizontal or vertical)

    AnimatedDropDownFormFormField(
        items:_items,
        dropDownAnimationParameters:SizingDropDownAnimationParameters(
            axis:Axis.vertical,
            duration:Duration(seconds:2),
            curve:Curves.linear,
        ),
    );
    

####4- General Attributes: we have 3 Attributes at this category.

• defultTextStyle :

  This TextStyle object will be applied on any Text doesn't has style

  AnimatedDropDownFormFormField(
      items:_items,
      defultTextStyle: TextStyle(color:Colors.grey),
  );
  

• distanceBetweenListAndButton:

  Here you can specify the distance between the button and the dropDown list

  AnimatedDropDownFormFormField(
      items:_items,
      distanceBetweenListAndButton: 10,
  );
  

• controller:

  This requires object from type AnimatedDropDownFormFieldController.

  AnimatedDropDownFormFieldController _controller= AnimatedDropDownFormFieldController();
  AnimatedDropDownFormFormField(
      items:_items,
      controller: _controller,
  );
  

  This controller provides 3 control functions on the AnimatedDropDownFormField widget:
  1. Open list programmatically

     ElevatedButton(
         onPressed: (){
             _controller.openList();
         }, 
         child: const Text("Open The List"),
     );
     

  2. Close list programmatically

     ElevatedButton(
         onPressed: (){
             _controller.closeList();
         }, 
         child: const Text("Close The List"),
     );
     

  3. Validate the user input

     ElevatedButton(
         onPressed: (){
             _controller.validate();
         }, 
         child: const Text("Validate Input"),
     );
     

####5- Error Attributes: This category also contains 3 Attributes and they are responsible for handling the not valid input state from user and we have:

• errorWidget :

  It's a widget displayed below the button if the validation failed

  AnimatedDropDownFormFormField(
      items:_items,
      errorWidget: Text("Not Valid Input"),
  );
  

• errorTextStyle:

  Any text inside the errorWidget has no TextStyle will take this textStyle

  AnimatedDropDownFormFormField(
      items:_items,
      errorTextStyle: TextStyle(color:Colors.red),
  );
  

• errorBorder:

  It's a Border object and will rounded the button if the validate method called and the input was not valid.

  AnimatedDropDownFormFormField(
      items:_items,
      errorBorder: Border.all(color:Colors.red),
  );