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

Most people do not understand the knowledge points of this article "flutter how to encapsulate menu toolbar components checkBox multiple options", 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 encapsulate menu toolbar components checkBox multiple choice version" article.

Effect display

For the radio version, you can see the previous blog post and encapsulate a click menu toolbar component in flutter.

This article is a multi-choice edition of CHeckbox

The effect is shown in the figure. Click the option to call back the selected index and the selected value to customize the horizontal and vertical direction. After passing the width and height, you can automatically calculate the width and height of the sub-item, customize the border, background, and selected style.

Implementation code

The first part is to encapsulate the sub-item components. The ToolMenuCheckboxItemWidget components are as follows:

Import 'dart:core';import' package:flutter/material.dart';/// @ author programming Dragon / @ creation time: 2022 final int index; / tool menu checkbox sub-item title final String title; {/ / displayed title final String title; / / serial number final int index; / / Click callback final void Function (int, bool) click; final double width; final double height; final bool isActive; final bool isHorizontal / / is horizontal final bool isEnd; / / is it the last final Color? ActiveColor; / / the clicked color does not pass the theme color final Color? BackgroundColor; / / background color final Color? BorderColor; / / Border Color final TextStyle? TextStyle; / / text style final TextStyle? ActiveTextStyle; / / selected text style const ToolMenuCheckboxItemWidget ({Key? Key, this.isActive = false, required this.title, required this.index, required this.click, this.isHorizontal = false, this.width = 100, this.isEnd = false, this.height = 40, this.activeColor, this.backgroundColor, this.borderColor, this.textStyle, this.activeTextStyle}): super (key: key) @ override Widget build (BuildContext context) {TextStyle defaultTextStyle = TextStyle (fontSize: 16, color: isActive? Colors.white: Colors.black87); return Material (child: Ink (/ / Click on the right ripple effect width: width, height: height, decoration: BoxDecoration (color: isActive? ActiveColor?? Theme.of (context). PrimaryColor: backgroundColor? Colors.white30, border: isHorizontal? IsEnd? Const Border (): Border (right: BorderSide (width: 1, color: borderColor? Colors.grey): Border (bottom: BorderSide (width: 1, color: borderColor?? (Colors.grey)), child: InkWell (onTap: () {click (indexthecombinisActive);}, child: Center (child: Text (title, style: isActive? ActiveTextStyle?? DefaultTextStyle: textStyle?? DefaultTextStyle),);}}

The second part is to encapsulate the menu content, and the ToolMenuCheckBoxWidget code is as follows

Import 'package:demo/widgets/tool_menu_checkbox_item_widget.dart';import' package:flutter/material.dart';/// @ author programming Little Dragon / @ creation time: 2022 3max / tools menu checkbox version of class ToolMenuCheckBoxWidget extends StatefulWidget {final Map items; / / title:checked returns the value as key:true/false final void Function (int, bool) click; / / Click the callback to return the nth selected final double? Width; final double? Height; final bool isHorizontal; / / horizontal final Color? ActiveColor; / / the clicked color does not pass the theme color final Color? BackgroundColor; / / background color final Color? BorderColor; / / Border Color final TextStyle? TextStyle; / / text style final TextStyle? ActiveTextStyle; / / selected text style const ToolMenuCheckBoxWidget ({Key? Key, required this.items, required this.click, this.width, this.height, this.isHorizontal = false, this.activeColor, this.backgroundColor, this.borderColor, this.textStyle, this.activeTextStyle}): super (key: key); @ override State createState () = > _ ToolMenuCheckBoxWidgetState ();} class _ ToolMenuCheckBoxWidgetState extends State {late Map items; bool isHorizontal = false / / whether horizontal @ override void initState () {/ / initializes the currently selected items = widget.items; isHorizontal = widget.isHorizontal; super.initState ();} @ override Widget build (BuildContext context) {int index = 0; / / traverses self-incrementing index int size = widget.items.length; double height = widget.height? (isHorizontal? 50: 200); / / set the default value for horizontal and vertical double width = widget.width? Return Container (height: height, width: width, decoration: BoxDecoration (color: widget.backgroundColor? Colors.white30, border: Border.all (color: widget.borderColor?? Colors.grey, width: 1), child: Wrap (children: items.keys.map ((key) {return ToolMenuCheckboxItemWidget (title: key, index: index, isHorizontal: widget.isHorizontal, click: (index, isChecked) {setState (() {items [key] = isChecked;})) Widget.click (index, isChecked);}, height: widget.isHorizontal? Height-2: height / size, isActive: items [key]? False, width: widget.isHorizontal? Width / size-1: width, isEnd: index++ = = size-1, textStyle: widget.textStyle, activeTextStyle: widget.activeTextStyle, backgroundColor: widget.backgroundColor, activeColor: widget.activeColor, borderColor: widget.borderColor,);}) .toList (),);}} Code call

For the simplest case, you only need to input titles, select the color and choose the theme color by default, and then get a chekbox version later, and you can choose more than one menu.

/ / Vertical ToolMenuCheckBoxWidget (items: {/ / Note that map is not declared with const here, because the values passed in the past synchronize the changes Does not re-copy a value operation "option 1": true, "option 2": true, "option 3": false, "option 4": false}, click: (index, isActive) {print ("Vertical option $index has a value of $isActive") }), / / Custom style horizontal ToolMenuCheckBoxWidget (items: {/ / Note that map is not declared with const here, because the values passed in the past will synchronize the changes Does not re-copy a value operation "option 1": true, "option 2": false, "option 3": false, "option 4": true, "option 5": false, "option 6": false,}, click: (index, isActive) {print ("horizontal option $index is $isActive") }, isHorizontal: true, activeColor: Colors.green, backgroundColor: Colors.black, textStyle: const TextStyle (color: Colors.white), activeTextStyle: const TextStyle (color: Colors.white, fontSize: 18), borderColor: Colors.orange,). The above is about "how flutter encapsulates and clicks on the menu toolbar component checkBox multiple options". 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 it, 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.