Change the phone dpi, the UI display is not normal

[youxinLu]

Hello, I found a problem, changing the dpi page of the phone may not display properly, below I will provide screenshots with a resolution of 2356*1080 dpi 360 and dpi 480 and my code。

main.dart
`List _landscapePlatforms = [
ResponsiveTargetPlatform.iOS,
ResponsiveTargetPlatform.android,
ResponsiveTargetPlatform.fuchsia,
];

return ResponsiveWrapper.builder(BouncingScrollWrapper.builder(context, child!),
minWidthLandscape: 450,
maxWidthLandscape: 4096,
defaultScaleLandscape: true,
breakpointsLandscape: [
const ResponsiveBreakpoint.resize(
480,
name: MOBILE,
),
const ResponsiveBreakpoint.resize(
520,
name: MOBILE,
),
const ResponsiveBreakpoint.resize(
600,
name: TABLET,
),
const ResponsiveBreakpoint.autoScale(
800,
name: TABLET,
),
const ResponsiveBreakpoint.resize(
1000,
name: DESKTOP,
),
const ResponsiveBreakpoint.autoScale(1920, name: DESKTOP),
ResponsiveBreakpoint.autoScale(
2460,
name: '4K',
),
],
landscapePlatforms: _landscapePlatforms,
background: Container(color: Color(0xFFF5F5F5)));
`
test_page.dart2

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

@OverRide
_TestPageState createState() => _TestPageState();
}

class _TestPageState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: ResponsiveRowColumn(
layout: ResponsiveRowColumnType.ROW,
children: [
ResponsiveRowColumnItem(
rowFlex: 1,
rowFit: FlexFit.tight,
child: ResponsiveRowColumn(
layout: ResponsiveRowColumnType.COLUMN,
children: [
ResponsiveRowColumnItem(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 60, vertical: 40),
child: Text("hello Responsive 1"),
)),
ResponsiveRowColumnItem(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 60, vertical: 40),
child: Text("hello Responsive 2"),
)),
ResponsiveRowColumnItem(
columnFlex: 1,
columnFit: FlexFit.loose,
child: gridView(),
)
],
))
],
),
),
);
}

Widget gridView() {
return Container(
margin: EdgeInsets.only(top: 20),
alignment: Alignment.center,
width: 230,
child: GridView.builder(
padding: EdgeInsets.zero,
itemCount: 16,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, mainAxisSpacing: 2, crossAxisSpacing: 2, childAspectRatio: 1),
itemBuilder: (BuildContext context, int index) {
return Container(
width: 10,
height: 10,
child: Text("${index}"),
);
},
),
);
}
}
`