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. 大家需要什麼功能可以在下面留言一起探討