One, the old routine, look at the style first
Figure 1 is my actual development of the business interface, used as a display, the specific source effect is the bottom of figure 1 three pictures.
Source code can be copied directly to run to see the effect, without involving component import and data request logic
Two, explain (attached source code)
1. AppBar, Stack, Offstage, Listview and other components are mainly used here
The logic goes like this: Click edit in the upper right corner, bring up the checkbox to the left of each item, and the action style at the bottom.
You can then select all, cancel, radio, delete, and click Edit again to hide the checkbox style
The main function is divided into the following four modules, the top navigation bar is appBar component, stack component, display and hide offstage component, list listView component
2. Let’s initialize the data and set the display effect of the information bar at the top
Set an edit button on the right side of the AppBar, add click events, and reset the selected ID and checkbox styles
Related functions of AppBar can be found in the navigation bar at the top of Flutter20.
AppBar(title: Text(' My Favorites '), Actions: <Widget>[IconButton(icon: icon (icons.edit), tooltip: "edit ", onPressed: ForEach ((f) {f['select'] = false); this.deleteids = [];// Reset the selected ID array setState(() {this._isoff = ! This. _isOff; / / hide shows master switch enclosing _list = _list;});},),,)Copy the code3. Listview Sets a scrollable list
When we click edit in the upper right, we bring up all and Delete at the bottom, but the bottom style doesn’t scroll along with the list
So we need to use the stack component to contain the two functions together, while the bottom style is fixed at the bottom
The content style of the list can be diffused; for now I use color bars instead
If (_list.isEmpty) {return Center(child: Text(' empty ')); } else {return Container(padding: EdgeInsets. FromLTRB (0.0, 10.0, 0.0, 10.0), child: Stack(alignment: Align.bottomcenter, children: <Widget>[getItemContent(),// here is the list content getItemBottom(),// here is the bottom delete all operation content],),); }Copy the code4. Select all and delete styles at the bottom
There is display-hidden logic at the bottom, so wrap it with an offstage component and initialize it with:
offstage: _isOff
Copy the codeHidden by default, _isOff is set to true after clicking on the upper right corner to edit icon
At the same time, add click events to the full marquee:
If true, iterate over the _list array, set select to true, and add the data ids in sequence to the deleteIds array
If false, iterating over the _list array with select set to false empties the deleteIds array
// Widget getItemBottom() {return Offstage(Offstage: _isOff, child: Padding(Padding: const EdgeInsets.fromLTRB(16, 0, 16, 0), child: Container( height: 40, color: Colors.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Row( children: <Widget>[ Checkbox( value: _checkValue, onChanged: (value) { this.deleteIds = []; _list.forEach((f) { f['select'] = value; if (value == true) { This. DeleteIds. Add (f [' id ']);}}); setState (() {_checkValue = value; _list = _list;});},), Text (' selection '),),), InkWell (child: Text (' delete '), onTap: () {},),),),),); }Copy the code5. In the middle, put our check box on the left and list data on the right
Note that the padding of the checkbox inside the content should be aligned with the padding of the bottom bar
Check boxes in the content list when clicked:
If the state is true, check whether the ID already exists in the array deleteIds, if not, add the ID
If the state is false, delete the data ID from the deleteIds array
Widget getItemBottom() {return Offstage(Offstage: _isOff, child: Padding(Padding: const EdgeInsets.fromLTRB(8, 0, 8, 0), child: Container( height: 40, color: Colors.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Row( children: <Widget>[ Checkbox( value: _checkValue, onChanged: (value) {selectAll(value);},), Text(' selectAll '),],), InkWell(child: Text(' delete '), onTap: () {},),],),); }Copy the code6. The main structure of the whole
Three, the source code
import 'package:flutter/material.dart'; class Mytest extends StatefulWidget { @override _MytestState createState() => _MytestState(); } class _MytestState extends State<Mytest> { List<Map> _list = []; // List<String> deleteIds = []; // Array of ids to delete bool _isOff = true; Bool _checkValue = false; Override void initState() {super.initState(); override void initState(); for (var index = 0; index <= 5; index++) { Map _temp = {}; _temp['id'] = index; _temp['select'] = false; _list.add(_temp); } setState(() { _list = _list; }); } @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (title: Text(' my favorites '), Actions: <Widget>[IconButton(icon: icon (icon.edit), tooltip: "edit ", onPressed: ForEach ((f) {f['select'] = false); this.deleteids = []; // Reset the selected ID array setState(() {this._isoff =! This._isoff; // Show hidden toggle this._checkValue = false; // So the checkbox is left unchecked this._list = _list;});},),],), Body: Padding(const EdgeInsets. All (8.0), child: getItem())); GetItem () {if (_list.isempty) {return Center(child: Text(' no bookmark ')); } else {return Container(padding: EdgeInsets. FromLTRB (0.0, 10.0, 0.0, 10.0), child: Stack(alignment: Align.bottomcenter, children: <Widget>[getItemContent(), // here is the list content getItemBottom(), // here is the bottom delete all operation content],),); Widget getItemBottom() {return Offstage(Offstage: _isOff, child: Padding(Padding: const EdgeInsets.fromLTRB(8, 0, 8, 0), child: Container( height: 40, color: Colors.white, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Row( children: <Widget>[ Checkbox( value: _checkValue, onChanged: (value) {selectAll(value);},), Text(' selectAll '),],), InkWell(child: Text(' delete '), onTap: () {},),],),); } selectAll(value) {this.deleteids = []; ForEach ((f) {f['select'] = value; If (value == true) {this.deleteids.add (f[' ID '].toString()); if (value == true) {this.deleteids.add (f[' ID '].toString()); }}); setState(() { _checkValue = value; _list = _list; }); } // Widget getItemContent() {return Listview.builder (itemBuilder: (context, index) { return _createGridViewItem(_list[index]); }, itemCount: (_list == null) ? 0 : _list.length, ); } Widget _createGridViewItem(item) {Color Color = Colors. Primaries ['id']]; return Padding( padding: const EdgeInsets.fromLTRB(8, 5, 8, 5), child: Container( height: 80, color: color, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Offstage( offstage: _isOff, child: Checkbox( value: item['select'], onChanged: (value) { if (value == false) { this.deleteIds.remove(item['id'].toString()); } else { Enclosing deleteIds. Add (item [' id ']. ToString ());} setState (() {item [' select '] = value;});},),), Text (' put content here),],),), ); }}Copy the codeContinuously updated……