'How to debug render overflow in VS Code for my Flutter app?
I am writing Flutter app which uses Getx for states and routes management. Screen design is imported from Figma using dhiwise.com, but some widget renderring is overflow. This message I'm getting in the debugging console when I switch to some screens on my phone. Each screen is in the safe area.
the Example code of a page overflows is here.
How to solve this problems?
Best regards,
Darko
import 'controller/customers_controller.dart';
import 'models/customers_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:pe_fahrzeuge_app/core/app_export.dart';
// ignore_for_file: must_be_immutable
class CustomersPage extends StatelessWidget {
CustomersController controller =
Get.put(CustomersController(CustomersModel().obs));
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(27.00),
right: getHorizontalSize(27.00)),
child: Text("msg_search_customer".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStyleRobotoromanregular14
.copyWith(fontSize: getFontSize(14))))),
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(15.00),
top: getVerticalSize(8.00),
right: getHorizontalSize(15.00)),
child: Container(
height: getVerticalSize(41.00),
width: getHorizontalSize(384.00),
child: TextFormField(
controller: controller.nikolaMarojeviController,
decoration: InputDecoration(
hintText: "msg_nikola_marojevi".tr,
hintStyle: AppStyle.textStyleRobotoromanregular16.copyWith(
fontSize: getFontSize(16.0),
color: ColorConstant.gray602),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
getHorizontalSize(20.00)),
borderSide: BorderSide(
color: ColorConstant.bluegray100, width: 1)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(
getHorizontalSize(20.00)),
borderSide: BorderSide(
color: ColorConstant.bluegray100, width: 1)),
prefixIcon: Padding(padding: EdgeInsets.only(left: getHorizontalSize(16.00), right: getHorizontalSize(10.00)), child: Container(height: getSize(32.00), width: getSize(32.00), child: SvgPicture.asset(ImageConstant.imgSearchIcon1, fit: BoxFit.contain))),
prefixIconConstraints: BoxConstraints(minWidth: getSize(32.00), minHeight: getSize(32.00)),
filled: true,
fillColor: ColorConstant.whiteA700,
isDense: true,
contentPadding: EdgeInsets.only(top: getVerticalSize(4.00), bottom: getVerticalSize(4.00))),
style: TextStyle(color: ColorConstant.gray602, fontSize: getFontSize(16.0), fontFamily: 'Roboto', fontWeight: FontWeight.w400)))),
Align(
alignment: Alignment.centerLeft,
child: Container(
width: double.infinity,
margin: EdgeInsets.only(top: getVerticalSize(27.00)),
decoration:
BoxDecoration(color: ColorConstant.whiteA700, boxShadow: [
BoxShadow(
color: ColorConstant.gray60040,
spreadRadius: getHorizontalSize(2.00),
blurRadius: getHorizontalSize(2.00),
offset: Offset(0, 4))
]),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: getVerticalSize(1.00),
width: size.width,
decoration: BoxDecoration(
color: ColorConstant.bluegray101)),
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(19.00),
bottom: getVerticalSize(20.00)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Container(
margin: EdgeInsets.only(
left: getHorizontalSize(21.00)),
decoration: BoxDecoration(
color: ColorConstant.whiteA700,
borderRadius: BorderRadius.circular(
getHorizontalSize(32.50)),
border: Border.all(
color: ColorConstant.red800,
width: getHorizontalSize(1.00))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
17.00),
top: getVerticalSize(27.00),
right: getHorizontalSize(
17.00),
bottom:
getVerticalSize(26.00)),
child: Text("lbl_nm".tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle
.textStyleInterblack18
.copyWith(
fontSize:
getFontSize(
18))))
])),
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(16.00),
right: getHorizontalSize(12.69)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Container(
width:
getHorizontalSize(299.31),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisSize:
MainAxisSize.max,
children: [
Padding(
padding: EdgeInsets.only(
bottom:
getVerticalSize(
1.00)),
child: Text(
"lbl_al_fresco"
.tr,
overflow:
TextOverflow
.ellipsis,
textAlign:
TextAlign
.left,
style: AppStyle
.textStyleInterbold161
.copyWith(
fontSize:
getFontSize(
16)))),
GestureDetector(
onTap: () {
onTapGroup43();
},
child: Padding(
padding: EdgeInsets
.only(
top: getVerticalSize(
7.00)),
child: Row(
crossAxisAlignment:
CrossAxisAlignment
.center,
mainAxisSize:
MainAxisSize
.min,
children: [
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(
2.00),
bottom: getVerticalSize(
1.38)),
child: Container(
height:
getSize(9.62),
width: getSize(9.62),
child: SvgPicture.asset(ImageConstant.imgVector9, fit: BoxFit.fill))),
Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(
5.69)),
child: Text(
"msg_edit_client_inf"
.tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStyleInterbold11.copyWith(fontSize: getFontSize(11))))
])))
])),
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(5.00),
right: getHorizontalSize(
10.00)),
child: Text("lbl_24_07_1992".tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle
.textStyleIntermedium15
.copyWith(
fontSize:
getFontSize(
15)))),
Padding(
padding: EdgeInsets.only(
top: getVerticalSize(6.00),
right: getHorizontalSize(
10.00)),
child: Text(
"lbl_068_939_393".tr,
overflow:
TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle
.textStyleInterregular13
.copyWith(
fontSize:
getFontSize(
13))))
]))
]))
]))),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(27.00),
top: getVerticalSize(20.00),
right: getHorizontalSize(27.00)),
child: Text("lbl_a".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinsbold18
.copyWith(fontSize: getFontSize(18))))),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: EdgeInsets.only(
left: getHorizontalSize(15.00),
right: getHorizontalSize(15.00)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("lbl_a".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_b".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_c".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_d".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_e".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_f".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)),
child: Text("lbl_g".tr,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: AppStyle.textStylePoppinssemibold12
.copyWith(fontSize: getFontSize(12)))),
Padding(
padding:
EdgeInsets.only(top: getVerticalSize(5.00)))));
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|