baoolong / dragablegridview Goto Github PK

deleteIcon can be a widget which makes user can customize with icon or other widget, but not only Image.
final Image deleteIcon -> final Widget deleteIcon

My GridView returns a Stateless widget, how to extend DragAbleGridViewBin?

GridView.builder(
                              shrinkWrap: true,
                              itemCount: productController.products.length,
                              physics: NeverScrollableScrollPhysics(),
                              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: crossAxisCount,
                                crossAxisSpacing: 3.0,
                                mainAxisSpacing: 3.0,
                                childAspectRatio: childAspectRatio,
                              ),
                              itemBuilder: (context, index){

                                return ProductTileAdmin(
                                  product: productController.products[index],
                                  index: index
                                );

                              },
                            ),

class ProductTileAdmin extends StatelessWidget {

  final Product product;
  final int index;

  ProductTileAdmin({this.product, this.index});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [

          InkWell(
            child: Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)
              ),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [

                    Flexible(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [

                          CustomTitle(
                            text: product.name,
                            fontSize: 16,
                          ),


                          CustomDesc(
                            text: product.desc,
                            fontSize: 14,
                          ),


                          CustomPrice(
                            text: formatPrice(product.price),
                            fontSize: 16,
                          )

                        ],
                      ),
                    ),

                    SizedBox(width: 10),

                    ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: Image.network(
                        product.image,
                        fit: BoxFit.fill,
                        width: 120,

                      ),
                    ),


                  ],
                ),
              ),
            ),
            onTap: (){

              Get.dialog(
                EditProductDialog(index),
                barrierDismissible: true,
              );

            },
            onLongPress: (){

              Get.dialog(RemoveProductDialog(index, product));

            },
          ),

          // BOTAO EXCLUIR
          IconButton(
            icon: Icon(Icons.close),
            onPressed: (){



            },
          )

        ],
      ),
    );
  }
}

就是有点像ios的touch assistant的widget.

I try to set a width/height for the draggable tiles (to make it a 100x100 square tile) and the result is that all is overlapped.
I was assuming tiles will keep padding and no overlap

Great library.
Is it currently possible to allow a "shaking" effect as the iPhone dashboard screen ?
My objetive is to use your library to mimic iPhone screen.

您好，我需要每次拖动之后，对 Item 的新排序做记录，但是并没有找到监听拖动的 API，可以加上么？

Hi there!
When this plugin migrate with images choosing, it seems that then List<ItemBin> updated, the GridView didn't update, which cause _initItemPositions won't triggered. And drag item would failed because positions didn't update.
Hope this can be solve~

作者你好~
这个插件在图片选择应用中，当ItemBin的List被更新时，GridView没有被更新，导致_initItemPositions没有被触发，List的索引没有更新到数据中，此时拖动会造成数组越界（因为原数组为空）。
希望这个问题可以解决~

在模拟器中工作但在实际设备上不起作用

当child 数量过多时拖动的时候同时触发父容器的滚动事件，造成无法拖动

My code like that but photos not showing ?

StreamSubscription subscription;
  List<ItemBin> _itemBins = List();
  var editSwitchController = EditSwitchController();

  @override
  void initState() {
    super.initState();
    subscription = Firestore.instance
        .collection('user')
        .document(widget.firebaseUser.uid)
        .snapshots()
        .listen((DocumentSnapshot snapshot) {
      List.from(snapshot.data['photos']).forEach((i) {
        _itemBins.add(ItemBin(i));
      });
    });
  }

Can you please develop the documentation with more samples or animated gif to understand how to use the lib

class AdCard extends StatefulWidget {
AdCard(this.ad);

final Pic ad;

_AdCardState createState() => _AdCardState(ad);
}

class _AdCardState extends State {
//to keep things readable
Pic _ad;
_AdCardState(this._ad);

void initState() {
super.initState();

getImage().then((val) => setState((){
  _ad.image = val;
  _image = val;
}));

}

Image _image = Image.asset('assets/images/loading.gif');

Future getImage() async {
if (_ad.image != null) {
return _ad.image;
} else {
return Image.memory(await http.readBytes(_ad.imageUrl));
}
}

@OverRide
Widget build(BuildContext context) {
return Card(
semanticContainer: false,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_image,
],
),
);
}
}

class Pic {
final String imageUrl;
Image image;

Pic(this.imageUrl);

Pic.fromJson(Map<String, dynamic> json)
: imageUrl = json['imageUrl'];

Map<String, dynamic> toJson() =>
{
'imageUrl': imageUrl
};
}

class DragAbleGridViewDemo extends StatefulWidget{
@OverRide
State createState() {
return new DragAbleGridViewDemoState();
}

}

class ItemBin extends DragAbleGridViewBin{

ItemBin( this.adCard);

String data;
AdCard adCard;

@OverRide
String toString() {
return 'ItemBin{data: $data, dragPointX: $dragPointX, dragPointY: $dragPointY, lastTimePositionX: $lastTimePositionX, lastTimePositionY: $lastTimePositionY, containerKey: $containerKey, containerKeyChild: $containerKeyChild, isLongPress: $isLongPress, dragAble: $dragAble}';
}

}
class DragAbleGridViewDemoState extends State{

List itemBins=new List();
String actionTxtEdit="编辑";
String actionTxtComplete="完成";
String actionTxt;
var editSwitchController=EditSwitchController();
bool _isLoaded = false;

Future<List> fetchPics() async {
//the link you want to data from, goes inside get
final response = await http
.get('https://blasanka.github.io/watch-ads/lib/data/ads.json');

if (response.statusCode == 200) {
  var abcd = json.decode(response.body);
  final List parsedList = json.decode(response
      .body); //assuming this json returns an array of signupresponse objects

  List<Pic> list = parsedList.map((val) => Pic.fromJson(val)).toList();

  return list;
}
return [];

}

@OverRide
void initState() {
super.initState();
actionTxt=actionTxtEdit;
fetchPics().then((val) => setState(() {
val.forEach((pic){
itemBins.add(ItemBin(AdCard(pic)));
});
_isLoaded = true;
}));
}

@OverRide
Widget build(BuildContext context) {
if(_isLoaded) {
return new Scaffold(
appBar: new AppBar(
title: new Text("可拖拽GridView"),
actions: [
new Center(
child: new GestureDetector(
child: new Container(
child: new Text(
actionTxt, style: TextStyle(fontSize: 19.0),),
margin: EdgeInsets.only(right: 12),
),
onTap: () {
changeActionState();
editSwitchController.editStateChanged();
},
)
)
],
),
body: new DragAbleGridView(
// decoration: new BoxDecoration(
// borderRadius: BorderRadius.all(new Radius.circular(3.0)),
// border: new Border.all(color: Colors.blue),
// ),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
crossAxisCount: 2,
deleteIconName: "assets/images/icon_cancel.png",
deleteIconMarginTopAndRight: 6.0,
itemPadding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 5.0),
childAspectRatio:1.8,
itemBins: itemBins,
editSwitchController: editSwitchController,
child: (int position) {
return itemBins[position].adCard;
},
editChangeListener: () {
changeActionState();
},
),
);
}else {
return Center(
child:
new CircularProgressIndicator());
}
}

void changeActionState(){
if(actionTxt==actionTxtEdit){
setState(() {
actionTxt=actionTxtComplete;
});
}else{
setState(() {
actionTxt=actionTxtEdit;
});
}
}
}

Question - Is there a way to show a placeholder to add an item after deleting an Item?

Any help is much appreciated.

For example: (for a Grid size of 3 x 3)

Step 1 - Delete Position - 7

Step 2 - Item at position 8 swaps to position 7 (Already works that way)

Step 3 - Item 8 now shows a placeholder to add new items.

有拖拽效果
但是拖拽任何一个标签移动后 其他标签不会改变位置 也不会有替换位置的效果