我的屏幕共有5个设备分区大小:-1.台式机2.小型台式机3.平板电脑4.小型平板电脑5.移动， 为此，我try 使用布局构建器，但当我调整显示大小时，渲染设计花费了太多时间，因为它试图在每个断点处重建设计.这不是网页设计中所期望的，有什么替代方法可以在Flutter 网页中获得流畅的响应能力.
class CommunityListScreen extends StatefulWidget {
static const String id = 'community_list_screen';
const CommunityListScreen({Key? key}) : super(key: key);
@override
State<CommunityListScreen> createState() => _CommunityListScreenState();
}
class _CommunityListScreenState extends State<CommunityListScreen> {
late double _deviceWidth;
late double _deviceHeight;
@override
Widget build(BuildContext context) {
_deviceWidth = MediaQuery.of(context).size.width - 150;
_deviceHeight = MediaQuery.of(context).size.height;
print(_deviceWidth);
return Scaffold(
backgroundColor: ColorAssets.themeColorLightGrey,
body: Container(
///responsive builder
margin: const EdgeInsets.only(top: 15.0),
child: LayoutBuilder(
builder: (context, constraint) {
///desktop size
if (constraint.maxWidth >= 1200) {
return desktop();
} else if (constraint.maxWidth >= 1000) {
return smallDesktop();
} else if (constraint.maxWidth >= 800) {
return tablet();
} else if (constraint.maxWidth >= 600) {
return smallTablet();
} else if (constraint.maxWidth >= 300) {
return mobile();
}
return Container(color: ColorAssets.themeColorLightPurple);
},
),
),
);
}
}