[에러] A RenderFlex overflowed by 284 pixels on the right.

 

 

문제

Row 로 감싸져 있는 Text 의 개수가 많아져 화면의 크기보다 넘어갈 때 발생한다. 

Row(
   children: [
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
   ],
)

 

해결

나는 옆으로 스크롤하길 원했기 때문에 SingleChildScrollView 사용할 수 있다.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Text('ProductImage'),
      Text('ProductImage'),
      Text('ProductImage'),
      Text('ProductImage'),
      Text('ProductImage'),
    ],
  ),
);

 

다른 해결

내가 원하는 동작은 아니지만 row 길이가 길어졌을 때 한 화면을 보고싶다면 Row 대신 Wrap 을 사용하는 방법도 있다.

 

Wrap(
   children: [
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
     Text('ProductImage'),
   ],
)