Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "Flutter how to achieve a custom drop-down selection box", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Flutter how to achieve a custom drop-down selection box" article.

Take a look at the effect picture first:

Key points: pop-up, retract animation, state change, option linkage

Idea: we can see that a complete drop-down box is composed of a head and specific drop-down options, and the head is linked with the drop-down group, taking the head as an array and the lower options as an array. A complete drop-down selection box between the two arrays can better control the linkage effect.

First of all, we look at pop-up and withdrawal, we can think of it as a component whose height gradually expands from 0 and then gradually reduces to 0, as long as we use animation to control the height of this component, there is a black transparency gradient below, here we can change the change of the black shadow below according to the animation of the pop-up window above.

Key code:

/ / drop-down component @ overrideWidget build (BuildContext context) {return Column (children: [_ MenuBuilder (animation: animation, / / here shows the specific drop-down box options we need child: widget.children [widget.menuController.index],) IsShowShadow / / does it show the black shadow below only the drop-down pop-up shows this place so that we can highly customize it according to the UI design? Expanded (child: InkWell (child: AnimatedBuilder (animation: animation, builder: (context, child) {/ / here is the shadow below the drop-down box click on the shadow to hide the drop-down box return Container (width: double.infinity) Height: MediaQuery.of (context) .size.height, color: Colors.black .withopacity (animation.value / (widget.height * 3)),) }), onTap: () {widget.menuController.hide ();},): const SizedBox (),],);} class _ MenuBuilder extends StatelessWidget {final Animation animation; final Widget child; const _ MenuBuilder ({required this.animation, required this.child}) / / here we mainly use animation to control the height of the drop-down content components @ override Widget build (BuildContext context) {return AnimatedBuilder (child: child, animation: animation, builder: (context, child) {return Container (color: Colors.white, height: animation.value, child: child,);});}

Next, let's look at the head design. The head design is a little more complicated, mainly the change of the state and the linkage between the options. here we build a new state controller: mainly to control some states of the head, such as the change of the or color of the text after clicking the head button, the preservation of the selected color, the restoration of the reset color and so on. The lower controller is mainly to control some of the state of the head.

/ / menu controller class MenuController extends ChangeNotifier {/ / whether the current component displays the default does not display the text sharing for the entire menu array bool isShow = false; / / shows the current component title String title = ""; / / displays which drop-down box int index = 0; / / Select the title field of the drop-down box that will change int titleIndex = 0 only when you really select it. / / change Title changeTitle (int titleIndex, String? Title) {this.titleIndex = titleIndex; this.title = title? "; hide ();} / shows which menu the drop-down index is the index show (int index) {this.index = index; if (! isShow) {isShow = true;} notifyListeners ();} / hide and cancel hide () {isShow = false; notifyListeners ();}}

With the controller, we also need to deal with the header data. first of all, our head will have a default array when there is no option, which will never be changed, so once this array is set, it cannot be changed. then we create a new dynamic array, that is, the currently displayed array, and the default value of this array is the default value of our unselected option. Here we need to listen for changes in the state of the head to process the display array.

Key code: focus on the handling of head state changes, this code is clear, basically OK.

@ overridevoid initState () {super.initState (); / / changeTitles is our display array changeTitles.addAll (widget.titles); for (var I = 0; I < changeTitles.length; iTunes +) {/ / _ chindren is our header component array _ children.add (searchFilter (changeTitles [I], I));} widget.menuController.addListener () {/ / drop-down true hides false var isShow = widget.menuController.isShow / / change the header state setState (() {if (widget.menuController.title! = "") {/ / indicate that the option assignment I have chosen is currently selected, changeTitles [widget.menuController.titleIndex] = widget.menuController.title } else {/ / empty indicates the current option. I cleared the data changeTitles [widget.menuController.titleIndex] = widget.titles [widget.menuController.titleIndex] of the initial header array assigned to it. } / / currentIndex currently selected index default-1 is used to compare update header text and color / / if the drop-down updates the current option inedx if hidden means no drop-down box is selected and set to-1 if (isShow & & currentIndex < widget.titles.length) {currentIndex = widget.menuController.index;} else {currentIndex =-1 } / / every time we drop down, we just need to change the header data and changeTitles the array that is always displayed can be updated directly to the component _ children.clear (); for (var I = 0; I < changeTitles.length; iTunes +) {_ children.add (searchFilter (changeTitles [I], I);}});}) } / / here is a simple Row array arranged in percentage or you can customize different widths @ overrideWidget build (BuildContext context) {return SizedBox (height: widget.headHeight? 45, child: Row (children: _ children),);}

Mainly update the text content and color of the header. If the current option = the option in the header | | or the name assigned by the option is not equal to the initial value, we think this menu is selected and the color is changed. At this point, the basic logic is clear, and the drop-down box style can be customized according to your own business.

Widget searchFilter (String name, int index) {TextStyle (color: currentIndex = = index | | widget.titles [index]! = name? Widget.clickColor: widget.defaultColor),} above is the content of this article on "how to implement a custom drop-down selection box in Flutter". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.