flutter GridView 条目的高斯模糊以及点击状态下的控件切换

完成上述鲜果，可以分为以下步骤：

1. GridView的使用
2. Card 的使用
3. 正常界面的build
4. 高斯模糊
5. 点击事件的响应

考虑：其实不管当前item是什么样式以及动态变化，都是我们提前拟定好的，只是被触发后根据状态进行界面ui切换…
步骤一：
备注：界面刷新是在当前界面的State下的build中，所以根据需求自定义回调函数

GridView.count(
                crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 4.0,
                padding: const EdgeInsets.all(4.0),
                childAspectRatio: (orientation == Orientation.portrait) ? 1.0 : 1.3,
                children: photos.map<Widget>((Photo photo) {
                  return GridDemoItem(                           //自己搭建的 item 的样式
                    photo: photo,
                    onBannerTap: (Photo photo) {           //自定义的方法回调
                      setState(() {                                     //界面刷新
                        photo.title = 'hahahah';
                        print(photo.isvisable);
                        photo.isvisable = (photo.isvisable == 0.0) ? 0.3 : 0.0;
                        print(photo.isvisable);
                      });
                    },
                  );
                }).toList(),
              ),

步骤二、三
条目GridDemoItem搭建

new Card(
                color: Colors.white,
                elevation: 3.0,                                  //周边阴影
                child:new Column(
                    children: <Widget>[
                      image,
                      new Padding(padding: EdgeInsets.fromLTRB(0, 10, 0, 0)),
                      new Text(photo.title,style: new TextStyle(fontSize: 16,fontWeight: FontWeight.w700) ),
                      new Padding(padding: EdgeInsets.fromLTRB(0, 5, 0, 0)),
                      new Text(photo.caption,style: new TextStyle(fontSize: 20,fontWeight: FontWeight.w700,color: Colors.blue)),
                      new Padding(padding: EdgeInsets.fromLTRB(0, 5, 0, 0)),
                      new Text("what is your problem ? fuck fuck fuck",style: new TextStyle(fontSize: 12,color: Colors.grey),textAlign: TextAlign.center,),
                    ],
                   ),
                  ),
      
                ],
      

步骤四
在这里增加了头像可点击，查看大图的效果，为了避免最上面一层抢点击事件，把高斯模糊隐藏起来，具体修改看源代码

new Stack(                                      //在Stack中运用
                 children: <Widget>[
                 《要被覆盖的item放在这里》，
                  new Center(
                    child: new ClipRect(
                      child: new BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                        child: Opacity(
                          opacity:  photo.isvisable == 0.0 ? 0.0 :0.3,              //根据状态的改变，判断高斯模糊效果什么时候出现
                          child: new Container(
                            decoration: new BoxDecoration(
//                  color: Colors.grey.shade200.withOpacity(0.5),
                              color: Colors.grey.shade200,
                            ),

                          ),
                        ),
                      ),
                    ),
                  ),

步骤五
让取消那些按键显示出来

Offstage(                 //显示隐藏属性
                     offstage: photo.isvisable == 0.0?true:false,      //隐藏或者显示的判断
                     child:######
                     ）

取消按键的搭建，在这里牵涉到Container的应用，不清楚的可以看这里！！！！！！！！！！

 new GestureDetector(
                               onTap: (){onBannerTap(photo);},
                               child: new Container(
                                 height: 36.0,
                                 alignment: new Alignment(0.0, 0.0),
                                 color:Color.fromARGB(179,178,178,1),
                                 margin: EdgeInsets.fromLTRB(1, 0, 1, 0),
                                 child:new Text("取消",style: TextStyle(color: Colors.white,fontSize: 12),textAlign:TextAlign.center ),
                               )
                           )

上述，简单列举了核心代码，源码flutter-demo-master,
github上后续推出。
功能规划：1. 可移动拖拉item交换位置 2. 大家需要什么功能可以在下面留言一起探讨