can we change/resize height and width of container inside gridview on dragging using gesture detector other corners must be fixed

250 Views Asked by At

I have implemented a staggered grid view and I wanted to resize the element of the staggered grid view as per the dragging details, Also wanted to resize the container only at corners, suppose if the user drags any one of the corners then another corner must be fixed only one corner need to expand the size of that container.

enter image description here

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Map<String, dynamic>> value = [
    {'height': 100.0, 'width': 50.0, 'color': Colors.red, 'column': 2, 'row': 1},
    {'height': 200.0, 'width': 100.0, 'color': Colors.green, 'column': 2, 'row': 2},
    {'height': 100.0, 'width': 200.0, 'color': Colors.blue, 'column': 1, 'row': 1},
    {'height': 50.0, 'width': 50.0, 'color': Colors.orange, 'column': 1, 'row': 1},
    {'height': 150.0, 'width': 50.0, 'color': Colors.teal, 'column': 2, 'row': 3},
    {'height': 200.0, 'width': 200.0, 'color': Colors.yellow, 'column': 1, 'row': 1},
    {'height': 100.0, 'width': 50.0, 'color': Colors.black, 'column': 1, 'row': 1},
    {'height': 100.0, 'width': 50.0, 'color': Colors.red, 'column': 2, 'row': 2},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
      ),
      body: Container(
          child: StaggeredGrid.count(
              crossAxisCount: 4,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              children: List.generate(value.length, (index) {
                return StaggeredGridTile.count(
                    crossAxisCellCount: value[index]['column'],
                    mainAxisCellCount: value[index]['row'],
                    child: Container(
                      margin: const EdgeInsets.all(5),
                      child: Stack(
                        fit: StackFit.expand,
                        children: [
                          ResizebleWidget(
                              child: Container(
                            height: value[index]['height'],
                            width: value[index]['width'],
                            color: value[index]['color'],
                          )),
                          Positioned(
                              right: 4,
                              top: 5,
                              child: InkWell(
                                onTap: () async {
                                  print('$index tapped');
                                  final result = await Navigator.push(context, MaterialPageRoute(builder: (ctx) => NewScreen(value: value[index])));
                                  // value[index]['column'] = 1;
                                  // value[index]['row'] = 1;
                                  value[index] = result;
                                  setState(() {});
                                },
                                child: const Icon(
                                  Icons.more_vert,
                                  size: 30,
                                  color: Colors.white,
                                ),
                              ))
                        ],
                      ),
                    ));
              }))
          ),
    );
  }
}
0

There are 0 best solutions below