Flutter Wrap & Chip

When writing business, it is inevitable that *** *** search function, general search page, as follows:

What if the Android written above it,

Generally a RecyclerView + layoutManager wrap + custom background.

Of course, this wrap LayoutManager have their own definitions to calculate coordinates.

That Flutter provide us with easy controls Wrap + Chip, with these two can easily achieve the effect of the appeal.

First look Wrap.

Wrap

We also see the name can tell, it's a wrap child layout Widget, and can wrap.

Look at the constructor to determine what parameters need to pass:

Wrap({
  Key key,
  this.direction = Axis.horizontal, // 子布局排列方向
  this.alignment = WrapAlignment.start, // 子布局对齐方向
  this.spacing = 0.0, // 间隔
  this.runAlignment = WrapAlignment.start, // run 可以理解为新的一行，新的一行的对齐方向
  this.runSpacing = 0.0, // 两行的间距
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
复制代码

The most basic we only need to pass a children can, but we want good results, usually passed spacing and runSpacing.

Chip

The following look at Chip, Chip can be understood as meaning fragments, or the first look at the constructor:

Chip({
    Key key,
    this.avatar,//左侧Widget，一般为小图标
    @required this.label,//标签
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon//删除图标
    this.onDeleted//删除回调，为空时不显示删除图标
    this.deleteIconColor//删除图标的颜色
    this.deleteButtonTooltipMessage//删除按钮的tip文字
    this.shape//形状
    this.clipBehavior = Clip.none,
    this.backgroundColor//背景颜色
    this.padding, // padding
    this.materialTapTargetSize//删除图标material点击区域大小
  })
复制代码

Here you can see quite a few things, the most basic to pass a label.

label generally on our text, first look at the definition of a label only effect:

Here then add avatar:

Come join delete:

Here attention must onDeleted parameters to be set, otherwise do not show delete controls.

Write 'search history'

Add widget in front of all children to achieve their goals in, do not delete the work.

Now we use the ListView, and add and delete events.

code show as below:

import 'package:flutter/material.dart';

class WrapPage extends StatefulWidget {
  @override
  _WrapPageState createState() => _WrapPageState();
}

class _WrapPageState extends State<WrapPage> {

  // 生成历史数据
  final List<String> _list = List<String>.generate(10, (i) => 'chip$i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('WrapPage'),
        ),
        body: Wrap(
            spacing: 10,
            runSpacing: 5,
            children: _list.map<Widget>((s) {
              return Chip(
                label: Text('$s'),
                avatar: Icon(Icons.person),
                deleteIcon: Icon(
                  Icons.close,
                  color: Colors.red,
                ),
                onDeleted: () {
                  setState(() {
                    _list.remove(s); // 删除事件
                  });
                },
              );
            }).toList()
        ));
  }
}
复制代码

Results are as follows:

to sum up

Flutter give us a lot of useful widget, we only need to be combined can achieve our objective.

The complete code has been transmitted to GitHub: github.com/wanglu1209/...

Reproduced in: https: //juejin.im/post/5cf70947f265da1b827a89bd