Hi everybody.
In a responsive layout I have a row with a Text followed by a CheckboxGroupFieldBlocBuilder.
When the width of the screen goes low, I have this error:
"An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.\nThis
happens when the parent widget does not provide a finite width constraint. For example, if the
InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains
it."
So I have had to wrap the CheckboxGroupFieldBlocBuilder in an Expanded widget, but now I have a render overflowed on the right.
I would like to make the Row (or the CheckboxGroupFieldBlocBuilder) scrollable but if I put a SingleChildScrollView before the Row it doesn't work.
Please help me.
How can I fix this?
Code:
SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: [ Text( 'choosePatientCondition'.tr /*Params({ 'article': controller.reservation.patient!.newInfo!.sex! })*/ , style: getTextStyle(TextType.bodySubtitle), ), Expanded( child: Padding( padding: const EdgeInsets.only(left: defaultPadding), child: Theme( data: ThemeData( checkboxTheme: CheckboxThemeData( checkColor: MaterialStateProperty.all(white), fillColor: MaterialStateProperty.all(CacheController.to.companyLayoutInfo!.firstColor!), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(checkboxRadius)), ), ), child: CheckboxGroupFieldBlocBuilder<String>( multiSelectFieldBloc: formBloc.selectCondition, itemBuilder: (context, item) => FieldItem( child: Text(item), ), groupStyle: const FlexGroupStyle(direction: Axis.horizontal), decoration: const InputDecoration( enabledBorder: InputBorder.none, ), ), ), ), ) ], ), ),
Hi everybody.
In a responsive layout I have a row with a Text followed by a CheckboxGroupFieldBlocBuilder.
When the width of the screen goes low, I have this error:
"An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.\nThis
happens when the parent widget does not provide a finite width constraint. For example, if the
InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains
it."
So I have had to wrap the CheckboxGroupFieldBlocBuilder in an Expanded widget, but now I have a render overflowed on the right.
I would like to make the Row (or the CheckboxGroupFieldBlocBuilder) scrollable but if I put a SingleChildScrollView before the Row it doesn't work.
Please help me.
How can I fix this?
Code:
SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: [ Text( 'choosePatientCondition'.tr /*Params({ 'article': controller.reservation.patient!.newInfo!.sex! })*/ , style: getTextStyle(TextType.bodySubtitle), ), Expanded( child: Padding( padding: const EdgeInsets.only(left: defaultPadding), child: Theme( data: ThemeData( checkboxTheme: CheckboxThemeData( checkColor: MaterialStateProperty.all(white), fillColor: MaterialStateProperty.all(CacheController.to.companyLayoutInfo!.firstColor!), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(checkboxRadius)), ), ), child: CheckboxGroupFieldBlocBuilder<String>( multiSelectFieldBloc: formBloc.selectCondition, itemBuilder: (context, item) => FieldItem( child: Text(item), ), groupStyle: const FlexGroupStyle(direction: Axis.horizontal), decoration: const InputDecoration( enabledBorder: InputBorder.none, ), ), ), ), ) ], ), ),