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.
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,
),
))
],
),
));
}))
),
);
}
}
