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

Most people do not understand the knowledge points of this article "flutter how to encapsulate menu and click toolbar components", 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 of radio click" article.

Effect display

CHeckbox Multi-option flutter package Click menu Toolbar component

This article is a single selection.

The effect is shown in the figure. Click the option to call back the selected index 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 ToolMenuItemWidget components are as follows:

Import 'dart:core';import' package:flutter/material.dart';/// @ author programming Dragon / @ creation time: 2022 final ValueChanged click; final double width; final double height; final bool isActive; final bool isHorizontal; / tool menu item class ToolMenuItemWidget extends StatelessWidget {/ / display title final String title; / / currently selected final int index; / / Click callback final ValueChanged click; final double width; final double height; final bool isActive; final bool isHorizontal; / / whether horizontal final bool isEnd or not / / is it the last final Color? ActiveColor; / / the color final Color after clicking? BackgroundColor; / / background color final Color? BorderColor; / / Border Color final TextStyle? TextStyle; / / text style final TextStyle? ActiveTextStyle; / / selected text style const ToolMenuItemWidget ({Key? Key, this.isActive = false, required this.title, required this.index, required this.click, this.activeColor, this.backgroundColor, this.borderColor, this.textStyle, this.activeTextStyle, this.isHorizontal = false, this.width = 100, this.isEnd = false, this.height = 40,}): super (key: key) @ override Widget build (BuildContext context) {var 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?? ), child: InkWell (onTap: () {click (index);}, child: Center (child: Text (title, style: isActive? ActiveTextStyle?? DefaultTextStyle: textStyle?? DefaultTextStyle),);}}

The second part is the encapsulation toolbar. The ToolMenuItemWidget components are as follows:

Import 'package:demo/widgets/tool_menu_item_widget.dart';import' package:flutter/material.dart';/// @ author programming Little Dragon / @ creation time: 2022 3max / tools menu class ToolMenuWidget extends StatefulWidget {final List titles; final ValueChanged click; / / Click callback final double? Width; final double? Height; final int currentIndex; / / currently selected 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 ToolMenuWidget ({Key? Key, this.currentIndex = 0, required this.titles, 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 () = > _ ToolMenuWidgetState ();} class _ ToolMenuWidgetState extends State {int currentIndex = 0 / / whether bool isHorizontal = false; / / whether horizontal @ override void initState () {/ / initializes the current selection currentIndex = widget.currentIndex; isHorizontal = widget.isHorizontal; super.initState ();} @ override Widget build (BuildContext context) {int index = 0; / / for traversal count int size = widget.titles.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: widget.titles.map ((title) {return ToolMenuItemWidget (title: title, index: index, isHorizontal: widget.isHorizontal, click: (index) {setState (() {currentIndex = index;})) Widget.click (index);}, activeColor: widget.activeColor, backgroundColor: widget.backgroundColor, borderColor: widget.borderColor, textStyle: widget.textStyle, height: widget.isHorizontal? Height-2: height / size, / / Vertical state-2 is to remove the pixels occupied by the border isActive: index = = currentIndex, width: widget.isHorizontal? Width / size-1: width, isEnd: index++ = = size-1,);}) .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, default style ToolMenuWidget (titles: const ["option 1", "option 2", "option 3", "option 4"], click: (index) {print ("vertically selected is $index") },), / / Custom style horizontal ToolMenuWidget (titles: const ["option 1", "option 2", "option 3", "option 4", "option 5"], 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 Click: (index) {print ("$index selected horizontally") },) the above is about the content of this article on "how to encapsulate the menu toolbar assembly of radio clicks 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.