{"id":19409,"date":"2020-11-16T10:07:45","date_gmt":"2020-11-16T10:07:45","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19409"},"modified":"2020-11-16T10:59:50","modified_gmt":"2020-11-16T10:59:50","slug":"solved-a-renderflex-overflowed-by-61-pixels-on-the-right","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/solved-a-renderflex-overflowed-by-61-pixels-on-the-right\/","title":{"rendered":"[SOLVED] Flutter: A RenderFlex overflowed by 61 pixels on the right."},"content":{"rendered":"\n<p class=\"has-text-align-left\"><br>An Exception was thrown when i&#8217;m debugging my application i.e., <\/p>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:22px\"><strong><span class=\"has-inline-color has-vivid-red-color\">Right Overflowed by 61 Pixels<\/span><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right.jpg\" alt=\"\" class=\"wp-image-19421\" width=\"719\" height=\"265\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right.jpg 719w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right-300x111.jpg 300w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\"><strong><span class=\"has-inline-color has-black-color\">Exception thrown in Terminal<\/span><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Exception caught by rendering library\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550<\/p>\n\n\n\n<p>The following assertion was thrown during layout: <br><strong><span class=\"has-inline-color has-vivid-red-color\">A RenderFlex overflowed by 61 pixels on the right.<\/span><\/strong><\/p>\n\n\n\n<p>The relevant error-causing widget was <strong>Row<\/strong>.<\/p>\n\n\n\n<p>The overflowing <strong>RenderFlex <\/strong>has an orientation of <strong>Axis.horizontal<\/strong>. See the image below :- <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right-1024x338.png\" alt=\"\" class=\"wp-image-19419\" width=\"1024\" height=\"338\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right-1024x338.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right-300x99.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right-768x253.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right.png 1085w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\" style=\"font-size:50px\"><strong><span class=\"has-inline-color has-vivid-red-color\">Solution<\/span><\/strong><\/p>\n\n\n\n<p>1. Wrap your widget with SingleChildScrollView<strong>()<\/strong> <strong>Widget<\/strong> and add <strong>scrollDirection <\/strong>to <strong>Axis.horizontal<\/strong>. <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">                     \n                      <span class=\"hljs-selector-tag\">SingleChildScrollView<\/span>(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span class=\"hljs-selector-tag\">scrollDirection<\/span>:\u00a0<span class=\"hljs-selector-tag\">Axis<\/span><span class=\"hljs-selector-class\">.horizontal<\/span>,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0   <span class=\"hljs-selector-tag\">child<\/span>:\u00a0<span class=\"hljs-selector-tag\">Row<\/span>(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0    \u00a0<span class=\"hljs-selector-tag\">Your<\/span> <span class=\"hljs-selector-tag\">Code<\/span> <span class=\"hljs-selector-tag\">Here<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0     \u00a0),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0    \u00a0),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\" style=\"font-size:32px\"><strong>OUTPUT<\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"207\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/A-RenderFlex-overflowed-by-61-pixels-on-the-right.gif\" alt=\"\" class=\"wp-image-19441\"\/><\/figure><\/div>\n\n\n\n<p>That&#8217;s All.<\/p>\n\n\n\n<p>Thanks for Reading.<\/p>\n\n\n\n<p>Keep Coding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/11\/Keep_coding-3.gif\" alt=\"\" class=\"wp-image-19433\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>An Exception was thrown when i&#8217;m debugging my application i.e., Right Overflowed by 61 Pixels. Exception thrown in Terminal \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 Exception caught by rendering library\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 The following assertion was thrown&#8230; <\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6497,6203,6496,6495,6499,6498],"class_list":["post-19409","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-axis-horizontal","tag-flutter","tag-overflowed-by-61-pixels","tag-renderflex-overflowed","tag-scrolldirection","tag-singlechildscrollview"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19409"}],"version-history":[{"count":28,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19409\/revisions"}],"predecessor-version":[{"id":19448,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19409\/revisions\/19448"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}