{"id":302979,"date":"2020-05-04T09:00:23","date_gmt":"2020-05-04T09:00:23","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=302979"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=302979","title":{"rendered":"\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0432\u043e Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u043d\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/500210\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k6\/va\/ri\/k6varih2f-scv4jc6ipe2tyx2rk.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u043e\u0432\u0438\u0447\u043e\u043a \u0432\u043e Flutter \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 <code>width: 100<\/code> \u043d\u0435 \u0448\u0438\u0440\u0438\u043d\u044b 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u043c\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 <code>Center<\/code>, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0435 \u043d\u0430\u0434\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0430\u043a \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c, \u0442\u043e \u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430, \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e <code>FittedBox<\/code> \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e\u0442 <code>Column<\/code> \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d \u0438\u043b\u0438 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>IntrinsicWidth<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u0435, \u0447\u0442\u043e Flutter \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 \u043e\u0447\u0435\u043d\u044c \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 HTML \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0441 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c), \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043a\u0430\u0436\u0438\u0442\u0435, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e:<\/p>\n<p>  <\/p>\n<blockquote><p>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u0445. \u0420\u0430\u0437\u043c\u0435\u0440\u044b <em>(\u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435)<\/em> \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435. \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c<\/p><\/blockquote>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u0432\u043e Flutter \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0412\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 <strong>\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/strong> \u043e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e <strong>\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/strong>. &quot;\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435&quot; \u2014 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e 4 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430, \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430.<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 <strong>\u0441\u043f\u0438\u0441\u043a\u0443 \u0434\u0435\u0442\u0435\u0439<\/strong>. \u0412\u0438\u0434\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0438\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u0430\u043a\u043e\u0432\u044b \u0438\u0445 <strong>\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/strong> (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430), \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430, \u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043d &quot;\u0445\u043e\u0447\u0435\u0442&quot; \u0431\u044b\u0442\u044c.<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442 <strong>\u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442<\/strong> \u0441\u0432\u043e\u0438 <strong>\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435<\/strong> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u043e \u043e\u0441\u0438 x \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u043f\u043e \u043e\u0441\u0438 y) \u043e\u0434\u0438\u043d \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c.<\/li>\n<li>\u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e \u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c <strong>\u0440\u0430\u0437\u043c\u0435\u0440\u0435<\/strong> (\u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u043d\u0435\u0447\u043d\u043e).<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0438\u0434\u0436\u0435\u0442, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438, \u0445\u043e\u0447\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lb\/yp\/p5\/lbypp5ui8k8cqvht184irv2awlo.png\"><\/p>\n<p>  <\/p>\n<blockquote><p><strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c, \u043a\u0430\u043a\u043e\u0432\u044b \u043c\u043e\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f?<\/p>\n<p>  <strong>\u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c<\/strong>: \u0422\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442 <code>90<\/code> \u0434\u043e <code>300<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u043e\u0442 <code>30<\/code> \u0434\u043e <code>85<\/code> \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u0425\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u0445\u043e\u0447\u0443 \u0438\u043c\u0435\u0442\u044c 5 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043e\u0442\u0441\u0442\u0443\u043f\u0430, \u0442\u043e \u043c\u043e\u0438 \u0434\u0435\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 <code>290<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 <code>75<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u044b.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u0431\u0435\u043d\u043e\u043a, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0442 <code>0<\/code> \u0434\u043e <code>290<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u043e\u0442 <code>0<\/code> \u0434\u043e <code>75<\/code> \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>  <strong>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u0431\u0435\u043d\u043e\u043a<\/strong>: \u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u043e\u0433\u0434\u0430 \u044f \u0445\u043e\u0447\u0443 \u0431\u044b\u0442\u044c <code>290<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 <code>20<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u0425\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u043d\u0438\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e, \u044d\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <code>55<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u044b\u0441\u043e\u0442\u044b \u0434\u043b\u044f \u043c\u043e\u0435\u0433\u043e \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u042d\u0439, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0431\u0435\u043d\u043e\u043a, \u0442\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442 <code>0<\/code> \u0434\u043e <code>290<\/code> \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u043e\u0442 <code>0<\/code> \u0434\u043e <code>55<\/code> \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>  <strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0431\u0435\u043d\u043e\u043a<\/strong>: \u0425\u043e\u0440\u043e\u0448\u043e, \u044f \u0445\u043e\u0447\u0443 \u0431\u044b\u0442\u044c <code>140<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 <code>30<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u042f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0443 \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0432 \u0442\u043e\u0447\u043a\u0435 <code>x: 5<\/code> \u0438 <code>y: 5<\/code>, \u0430 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u2013 \u0432 <code>x: 80<\/code> \u0438 <code>y: 25<\/code>.<\/p>\n<p>  <strong>\u0412\u0438\u0434\u0436\u0435\u0442<\/strong>: \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c, \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u043c\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 <code>300<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 <code>60<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"ogranicheniya\">\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 Flutter \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0412\u0438\u0434\u0436\u0435\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0435\u043c\u0443 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e <strong>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u0430\u043a\u043e\u0439 \u043e\u043d \u0445\u043e\u0447\u0435\u0442<\/strong>.<\/li>\n<li>\u0412\u0438\u0434\u0436\u0435\u0442 <strong>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u043e \u0441\u0432\u043e\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0435\u0433\u043e<\/strong>, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c.<\/li>\n<li>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0432 \u0446\u0435\u043b\u043e\u043c.<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"primery\">\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/h2>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043c\u043e\u0436\u043d\u043e:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c CodePen \u043d\u0438\u0436\u0435 (\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 <code>Run Pen<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 <code>Rerun<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u044d\u043a\u0440\u0430\u043d\u0430);<\/li>\n<li><a href=\"https:\/\/dartpad.dev\/60174a95879612e500203084a0588f94\" rel=\"nofollow\">\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e\u0442 DartPad<\/a>;<\/li>\n<li><a href=\"https:\/\/github.com\/marcglasberg\/flutter_layout_article\" rel=\"nofollow\">\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430 GitHub<\/a>.<\/li>\n<\/ul>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/marcglasberg\/embed\/preview\/ExVmwed?height=300&amp;slug-hash=ExVmwed&amp;default-tabs=js%2Cresult&amp;host=https%3A%2F%2Fcodepen.io\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"primer-1\">\u041f\u0440\u0438\u043c\u0435\u0440 1<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/ct\/y9\/ulcty9vbdzpojt_ut3eawprnire.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Container(color: Colors.red)<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0434\u043b\u044f <code>Container<\/code>. \u042d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code> \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e \u0438 &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, <code>Container<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0438 \u0442\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0440\u0430\u0441\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<blockquote><p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/em>. \u0423 \u0430\u0432\u0442\u043e\u0440\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u0447\u0442\u043e &quot;screen&quot; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 <a href=\"https:\/\/github.com\/marcglasberg\/flutter_layout_article\/blob\/master\/lib\/main.dart#L108\" rel=\"nofollow\">\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0430-\u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <\/p><\/blockquote>\n<p>  <\/p>\n<pre><code class=\"plaintext\">ConstrainedBox(      constraints: BoxConstraints.tightFor(width: double.infinity, height: double.infinity),      child: example )<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0434\u0430\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c \u0438 \u0434\u0430\u043b\u0435\u0435 \u044f \u043f\u0438\u0448\u0443 <code>&quot;\u044d\u043a\u0440\u0430\u043d&quot;<\/code>, \u0433\u043e\u0432\u043e\u0440\u044f \u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435 <code>ConstrainedBox<\/code>.<br \/>  \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u043e <code>ConstrainedBox<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u0436\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<blockquote><p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043a \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044e<\/em>. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p><\/blockquote>\n<p>  <\/p>\n<pre><code class=\"plaintext\">import 'package:flutter\/material.dart'; void main() =&gt; runApp(ExampleTest()); class ExampleTest extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container(       color: Colors.red     );   } }<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u043c\u0443 \u0430\u0432\u0442\u043e\u0440\u043e\u043c.<\/p><\/blockquote>\n<p>  <\/p>\n<h3 id=\"primer-2\">\u041f\u0440\u0438\u043c\u0435\u0440 2<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/ct\/y9\/ulcty9vbdzpojt_ut3eawprnire.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Container(width: 100, height: 100, color: Colors.red)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code> \u0445\u043e\u0447\u0435\u0442 \u0431\u044b\u0442\u044c 100 \u00d7 100, \u043d\u043e \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e &quot;\u044d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u0435\u0433\u043e \u043a \u0441\u0432\u043e\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c.<br \/>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <code>Container<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-3\">\u041f\u0440\u0438\u043c\u0435\u0440 3<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0o\/eg\/7s\/0oeg7sx_1hpkxddiavxfxt7k5o8.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: Container(width: 100, height: 100, color: Colors.red) )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Center<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <code>Center<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<br \/>  <code>Center<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u0442\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u0422\u0435\u043f\u0435\u0440\u044c <code>Container<\/code> \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c 100 \u00d7 100.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-4\">\u041f\u0440\u0438\u043c\u0435\u0440 4<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jj\/hf\/me\/jjhfme6hgydudlhjga-g_nqlkbu.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Align(    alignment: Alignment.bottomRight,    child: Container(width: 100, height: 100, color: Colors.red), )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>Align<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>Center<\/code>.<\/p>\n<p>  <\/p>\n<p><code>Align<\/code> \u0442\u0430\u043a\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u0441\u0442\u043e, \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>Container<\/code>, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442 \u0435\u0433\u043e \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-5\">\u041f\u0440\u0438\u043c\u0435\u0440 5<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/ct\/y9\/ulcty9vbdzpojt_ut3eawprnire.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: Container(       color: Colors.red,       width: double.infinity,       height: double.infinity,    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Center<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <code>Center<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<br \/>  <code>Center<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. <code>Container<\/code> \u0445\u043e\u0447\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;, \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-6\">\u041f\u0440\u0438\u043c\u0435\u0440 6<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/ct\/y9\/ulcty9vbdzpojt_ut3eawprnire.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(child: Container(color: Colors.red))<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Center<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <code>Center<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0432\u0438\u0434\u0438\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<br \/>  <code>Center<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u0442\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 <code>Container<\/code> \u043d\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u043d\u0435\u0442 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043e\u043d \u0440\u0435\u0448\u0430\u0435\u0442, \u0447\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 <code>Container<\/code> \u0442\u0430\u043a \u0440\u0435\u0448\u0438\u043b? \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0442\u0435\u0445, \u043a\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043b \u0432\u0438\u0434\u0436\u0435\u0442 <code>Container<\/code>. \u041e\u043d \u043c\u043e\u0433 \u0431\u044b \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u0438 \u0432\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043a <code>Container<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u0431\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u0441\u0442\u0432.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-7\">\u041f\u0440\u0438\u043c\u0435\u0440 7<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/7z\/gp\/gd\/7zgpgdbeuxs7c3jdpyl2mpmcri4.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: Container(       color: Colors.red,       child: Container(color: Colors.green, width: 30, height: 30),    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Center<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <code>Center<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<br \/>  <code>Center<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u0442\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e <code>Container<\/code> \u043d\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u0435\u0441\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u0442\u043e \u043e\u043d \u0440\u0435\u0448\u0430\u0435\u0442, \u0447\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e \u0438 \u0435\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043e\u043a.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443, \u0447\u0442\u043e \u0442\u043e\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0431\u0435\u043d\u043e\u043a \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0435\u043b\u0435\u043d\u044b\u043c <code>Container<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0447\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 30 \u00d7 30. \u041a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code> \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 30 \u00d7 30. \u041a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0435\u043b\u0435\u043d\u044b\u0439 <code>Container<\/code> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0432\u0435\u0441\u044c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-8\">\u041f\u0440\u0438\u043c\u0435\u0440 8<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dd\/uu\/8y\/dduu8y8cka0w2kxcpxqx8qbgunm.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: Container(      color: Colors.red,      padding: const EdgeInsets.all(20.0),      child: Container(color: Colors.green, width: 30, height: 30),    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e <code>Container<\/code> \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439, \u043d\u043e \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b <em>(padding)<\/em>. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e <code>Container<\/code> \u0431\u0443\u0434\u0435\u0442 30 \u00d7 30 \u043f\u043b\u044e\u0441 \u043e\u0442\u0441\u0442\u0443\u043f\u044b. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u043d, \u0430 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 <code>Container<\/code> \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-9\">\u041f\u0440\u0438\u043c\u0435\u0440 9<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ul\/ct\/y9\/ulcty9vbdzpojt_ut3eawprnire.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">ConstrainedBox(    constraints: BoxConstraints(       minWidth: 70,        minHeight: 70,       maxWidth: 150,        maxHeight: 150,    ),    child: Container(color: Colors.red, width: 10, height: 10), )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 <code>Container<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442 <code>70<\/code> \u0434\u043e <code>150<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. <code>ConstrainedBox<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &quot;\u044d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>ConstrainedBox<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 <code>Container<\/code> \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-10\">\u041f\u0440\u0438\u043c\u0435\u0440 10<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_3\/1r\/ug\/_31rugwdhaaz_jtmxie-echw78m.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: ConstrainedBox(       constraints: BoxConstraints(          minWidth: 70,           minHeight: 70,          maxWidth: 150,           maxHeight: 150,       ),       child: Container(color: Colors.red, width: 10, height: 10),    )     )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>Center<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <code>ConstrainedBox<\/code> \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 <code>ConstrainedBox<\/code> \u043f\u043e\u043b\u0443\u0447\u0438\u0442 <strong>\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435<\/strong> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>constraints<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0440\u0430\u0437\u043c\u0435\u0440 <code>Container<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442 <code>70<\/code> \u0434\u043e <code>150<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041e\u043d \u0445\u043e\u0447\u0435\u0442 \u0438\u043c\u0435\u0442\u044c <code>10<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 (<strong>\u043c\u0438\u043d\u0438\u043c\u0443\u043c<\/strong>) <code>70<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-11\">\u041f\u0440\u0438\u043c\u0435\u0440 11<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4u\/ph\/sf\/4uphsfqu8xus_ktvhiwdotwhfxa.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(   child: ConstrainedBox(      constraints: BoxConstraints(         minWidth: 70,          minHeight: 70,         maxWidth: 150,          maxHeight: 150,         ),      child: Container(color: Colors.red, width: 1000, height: 1000),   )   )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 <code>Center<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <code>ConstrainedBox<\/code> \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 <code>ConstrainedBox<\/code> \u043f\u043e\u043b\u0443\u0447\u0438\u0442 <strong>\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435<\/strong> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>constraints<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0440\u0430\u0437\u043c\u0435\u0440 <code>Container<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442 <code>70<\/code> \u0434\u043e <code>150<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041e\u043d \u0445\u043e\u0447\u0435\u0442 \u0438\u043c\u0435\u0442\u044c <code>1000<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 (<strong>\u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c<\/strong>) <code>150<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-12\">\u041f\u0440\u0438\u043c\u0435\u0440 12<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fm\/6i\/-b\/fm6i-bz0bnwkaito9qd2h7roho4.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(    child: ConstrainedBox(       constraints: BoxConstraints(          minWidth: 70,           minHeight: 70,          maxWidth: 150,           maxHeight: 150,       ),       child: Container(color: Colors.red, width: 100, height: 100),    )  )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0442\u0430\u043a\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 <code>Center<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <code>ConstrainedBox<\/code> \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 <code>ConstrainedBox<\/code> \u043f\u043e\u043b\u0443\u0447\u0438\u0442 <strong>\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435<\/strong> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>constraints<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0440\u0430\u0437\u043c\u0435\u0440 <code>Container<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442 <code>70<\/code> \u0434\u043e <code>150<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041e\u043d \u0445\u043e\u0447\u0435\u0442 \u0438\u043c\u0435\u0442\u044c <code>100<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443, \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u043d \u0431\u0443\u0434\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 <code>70<\/code> \u0438 <code>150<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-13\">\u041f\u0440\u0438\u043c\u0435\u0440 13<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bs\/2-\/_t\/bs2-_tkyal9ksq4wplxpk190n0w.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">UnconstrainedBox(    child: Container(color: Colors.red, width: 20, height: 50), )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>UnconstrainedBox<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, <code>UnconstrainedBox<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 <code>Container<\/code> \u0431\u044b\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 20 \u00d7 50.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-14\">\u041f\u0440\u0438\u043c\u0435\u0440 14<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/r6\/ij\/kz\/r6ijkzgqyqfxjdttuevduozfmfc.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">UnconstrainedBox(    child: Container(color: Colors.red, width: 4000, height: 50), )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>UnconstrainedBox<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, <code>UnconstrainedBox<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 <code>Container<\/code> \u0431\u044b\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (4000 \u00d7 50).<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 <code>Container<\/code> \u0448\u0438\u0440\u0438\u043d\u0430 <code>4000<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u043e\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0432\u0435\u043b\u0438\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 <code>UnconstrainedBox<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 <code>UnconstrainedBox<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0435 &quot;\u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u043e \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438&quot; (<code>... OVERFLOWED BY ... PIXELS<\/code>).<\/p>\n<p>  <\/p>\n<h2 id=\"primer-15\">\u041f\u0440\u0438\u043c\u0435\u0440 15<\/h2>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/4d\/uo\/ls\/4duolsgtlsolwdbgxmusuohrlsq.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">OverflowBox(     child: Center(child: Container(color: Colors.red, width: 4000, height: 50)), )<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>OverflowBox<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u041a\u0430\u043a \u0431\u044b \u0442\u043e \u043d\u0438 \u0431\u044b\u043b\u043e, <code>Center<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 <code>OverflowBox<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 <code>Container<\/code> \u0431\u044b\u0442\u044c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (4000 \u00d7 50).<\/p>\n<p>  <\/p>\n<p><code>OverflowBox<\/code> \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 <code>UnconstrainedBox<\/code>, \u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439, \u0435\u0441\u043b\u0438 \u0440\u0435\u0431\u0435\u043d\u043e\u043a \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><code>Container<\/code> \u0438\u043c\u0435\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 <code>4000<\/code> \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0432\u0435\u043b\u0438\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 <code>OverflowBox<\/code>, \u043d\u043e <code>OverflowBox<\/code> \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442, \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-16\">\u041f\u0440\u0438\u043c\u0435\u0440 16<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9t\/cx\/r1\/9tcxr1wlt_b-tgvom8jwaqtdby4.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">UnconstrainedBox(    child: Container(       color: Colors.red,        width: double.infinity,        height: 100,    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0441\u0442\u044f, \u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>  <\/p>\n<p><code>UnconstrainedBox<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0435\u0431\u0435\u043d\u043a\u0443 \u0438\u043c\u0435\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u0445\u043e\u0447\u0435\u0442, \u043e\u0434\u043d\u0430\u043a\u043e, \u0443 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 <code>Container<\/code> \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430 (<code>width: double.infinity<\/code>).<\/p>\n<p>  <\/p>\n<p>Flutter \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0432\u044b\u0434\u0430\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c: <code>Box Constraints forces an infinite width<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-17\">\u041f\u0440\u0438\u043c\u0435\u0440 17<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0o\/eg\/7s\/0oeg7sx_1hpkxddiavxfxt7k5o8.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">UnconstrainedBox(    child: LimitedBox(       maxWidth: 100,       child: Container(           color: Colors.red,          width: double.infinity,           height: 100,       )    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443. \u0414\u0430, <code>LimitedBox<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0442 <code>UnconstrainedBox<\/code>, \u043d\u043e \u043e\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u043f\u043e\u0442\u043e\u043c\u043a\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 <code>100<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 <code>UnconstrainedBox<\/code> \u043d\u0430 <code>Center<\/code>, \u0442\u043e <code>LimitedBox<\/code> \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f (\u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u0430\u043c <code>LimitedBox<\/code> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 &quot;\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435&quot; \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f), \u0438 \u0448\u0438\u0440\u0438\u043d\u0430 <code>Container<\/code> \u0441\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 <code>100<\/code>.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 <code>LimitedBox<\/code> \u0438 <code>ConstrainedBox<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-18\">\u041f\u0440\u0438\u043c\u0435\u0440 18<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zi\/nb\/dq\/zinbdq9nln-wi7xocszgqxpmsus.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">FittedBox(     child: Text('Some Example Text.', textDirection: TextDirection.ltr), )<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/em>. \u0427\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>textDirection: TextDirection.ltr<\/code> \u0432 <code>Text<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u043e <a href=\"https:\/\/master-docs-flutter-io.firebaseapp.com\/flutter\/dart-ui\/TextDirection-class.html\" rel=\"nofollow\">\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e<\/a>, \u0435\u0441\u043b\u0438 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0434\u043e <code>Text<\/code> \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>MaterialApp<\/code>, \u0442\u043e <code>Text<\/code> \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u044f\u0432\u043d\u043e\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f <code>textDirection<\/code>.<\/p><\/blockquote>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>FittedBox<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. <code>Text<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 (\u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0443\u044e \u0435\u0433\u043e <em>intrinsic width<\/em>), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0442\u0435\u043a\u0441\u0442\u0430, \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<p><code>FittedBox<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 <code>Text<\/code> \u0438\u043c\u0435\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u0445\u043e\u0447\u0435\u0442, \u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a <code>Text<\/code> \u0441\u043e\u043e\u0431\u0449\u0438\u0442 \u0441\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 <code>FittedBox<\/code>, FittedBox \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u0432\u0441\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-19\">\u041f\u0440\u0438\u043c\u0435\u0440 19<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/xi\/ug\/3g\/xiug3grugdfxmvmbakthlzuby54.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(     child: FittedBox(         child: Text('Some Example Text.', textDirection: TextDirection.ltr,),     ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e \u0447\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c <code>FittedBox<\/code> \u0432 <code>Center<\/code>? <code>Center<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 <code>FittedBox<\/code> \u0438\u043c\u0435\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d\u0430 \u0445\u043e\u0447\u0435\u0442, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0430\u0437\u043c\u0435\u0440 <code>FittedBox<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 <code>Text<\/code>, \u0438 <code>Text<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0438 <code>FittedBox<\/code>, \u0438 <code>Text<\/code> \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-20\">\u041f\u0440\u0438\u043c\u0435\u0440 20<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ax\/lv\/n5\/axlvn5o0ncftaocqf9tjpczt0jw.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(     child: FittedBox(         child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.', textDirection: TextDirection.ltr,),     ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 <code>FittedBox<\/code> \u0432 <code>Center<\/code>, \u043d\u043e <code>Text<\/code> \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435?<\/p>\n<p>  <\/p>\n<p><code>FittedBox<\/code> \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u0436\u0435, \u043a\u0430\u043a \u0438 <code>Text<\/code>, \u043d\u043e \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot; \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 <code>Text<\/code> \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0442\u043e\u0442 \u0442\u043e\u0436\u0435 \u0432\u043b\u0435\u0437 \u0432 &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-21\">\u041f\u0440\u0438\u043c\u0435\u0440 21<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y_\/rs\/o0\/y_rso01pbb4ypvm-lueefwohmie.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Center(     child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.', textDirection: TextDirection.ltr,), )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c <code>FittedBox<\/code>, \u0442\u043e <code>Text<\/code> \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0442 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot; \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u043b\u0435\u0437\u0442\u044c \u0432 &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-22\">\u041f\u0440\u0438\u043c\u0435\u0440 22<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oz\/pp\/_d\/ozpp_dgahvzxs_t9ve01zviljx4.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">FittedBox(    child: Container(       height: 20.0,        width: double.infinity,    ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435. <code>FittedBox<\/code> \u043c\u043e\u0436\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <strong>\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d<\/strong> (\u0438\u043c\u0435\u0435\u0442 \u043d\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443). \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0438 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: <code>RenderConstrainedBox object was given an infinite size during layout.<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-23\">\u041f\u0440\u0438\u043c\u0435\u0440 23<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zi\/s3\/6j\/zis36jfydmyx_rnkzi7viylrd4s.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Row(textDirection: TextDirection.ltr, children: &lt;Widget&gt;[     Container(         color: Colors.red,         child: Text(             'Hello!',             textDirection: TextDirection.ltr,         )),     Container(         color: Colors.green,         child: Text(             'Goodbye!',             textDirection: TextDirection.ltr,         )), ]);<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Row<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443.<\/p>\n<p>  <\/p>\n<p>\u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a <code>UnconstrainedBox<\/code>, <code>Row<\/code> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u043c \u0438\u043c\u0435\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0445\u043e\u0442\u044f\u0442. \u0417\u0430\u0442\u0435\u043c <code>Row<\/code> \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u0438\u0445 \u0440\u044f\u0434\u043e\u043c, \u0430 \u043b\u044e\u0431\u043e\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-24\">\u041f\u0440\u0438\u043c\u0435\u0440 24<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/w5\/0f\/9f\/w50f9fpovv4bfjs57douwgy9oo8.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Row(textDirection: TextDirection.ltr, children: &lt;Widget&gt;[     Container(         color: Colors.red,         child: Text(             'This is a very long text that won\u2019t fit the line.',             textDirection: TextDirection.ltr,         )),     Container(         color: Colors.green,         child: Text(             'Goodbye!',             textDirection: TextDirection.ltr,         )), ]);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>Row<\/code> \u043d\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439, \u0432\u043f\u043e\u043b\u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>UnconstrainedBox<\/code>, <code>Row<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c &quot;\u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u043e \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438&quot;.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-25\">\u041f\u0440\u0438\u043c\u0435\u0440 25<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/__\/wq\/1_\/__wq1_myx7bi9e_3rbppu0ft9vc.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Row(textDirection: TextDirection.ltr, children: &lt;Widget&gt;[     Expanded(         child: Container(             color: Colors.red,             child: Text(                 'This is a very long text that won\u2019t fit the line.',                 textDirection: TextDirection.ltr,             ))),     Container(         color: Colors.green,         child: Text(             'Goodbye!',             textDirection: TextDirection.ltr,         )), ])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0443 <code>Row<\/code> \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442 \u0432 <code>Expanded<\/code> \u0432\u0438\u0434\u0436\u0435\u0442, \u0442\u043e <code>Row<\/code> \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u044e \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 <code>Expanded<\/code> \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0438 \u0437\u0430\u0442\u0435\u043c <code>Expanded<\/code> \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0441\u0432\u043e\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>Expanded<\/code>, \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u044f\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0432\u0430\u0436\u043d\u043e\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-26\">\u041f\u0440\u0438\u043c\u0435\u0440 26<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zl\/tc\/8r\/zltc8rv8uc0csnlhogo_jre60ne.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Row(textDirection: TextDirection.ltr, children: &lt;Widget&gt;[     Expanded(         child: Container(             color: Colors.red,             child: Text(                 'This is a very long text that won\u2019t fit the line.',                 textDirection: TextDirection.ltr,             ))),     Expanded(         child: Container(             color: Colors.green,             child: Text(                 'Goodbye!',                 textDirection: TextDirection.ltr,             ))), ])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 <code>Row<\/code> \u0432\u0441\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 <code>Expanded<\/code>, \u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 <code>Expanded<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 <code>flex<\/code>, \u0438 \u0437\u0430\u0442\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 <code>Expanded<\/code> \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a \u0441\u0432\u043e\u0435\u0439.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-27\">\u041f\u0440\u0438\u043c\u0435\u0440 27<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/2_\/bh\/fn\/2_bhfnoush86whddf5wdiqhlip8.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Row(textDirection: TextDirection.ltr, children: &lt;Widget&gt;[     Flexible(         child: Container(             color: Colors.red,             child: Text(                 'This is a very long text that won\u2019t fit the line.',                 textDirection: TextDirection.ltr,             ))),     Flexible(         child: Container(             color: Colors.green,             child: Text(                 'Goodbye!',                 textDirection: TextDirection.ltr,             ))), ])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <code>Flexible<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>Expanded<\/code>, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <code>Flexible<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438\u043c\u0435\u0442\u044c <strong>\u0442\u0443 \u0436\u0435 \u0438\u043b\u0438 \u043c\u0435\u043d\u044c\u0448\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443<\/strong>, \u0447\u0435\u043c \u0443 \u0441\u0430\u043c\u043e\u0433\u043e <code>Flexible<\/code>, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a <code>Expanded<\/code> \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0442\u044c <strong>\u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0436\u0435<\/strong> \u0448\u0438\u0440\u0438\u043d\u0443, \u0447\u0442\u043e \u0438 <code>Expanded<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0438 <code>Expanded<\/code>, \u0438 <code>Flexible<\/code> \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439 \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/em> \u0412\u044b\u0448\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e <strong>\u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e<\/strong> \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b <code>Flexible<\/code>\/<code>Expanded<\/code> \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443 <code>Row<\/code>. <code>Row<\/code> \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u043d\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>Flexible<\/code>\/<code>Expanded<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-28\">\u041f\u0440\u0438\u043c\u0435\u0440 28<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0z\/aa\/xb\/0zaaxbwzwyjcwcoimtbrfbn3c5k.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">MaterialApp(     home: Scaffold(         body: Container(             color: Colors.blue,                 child: Column(children: [                     Text('Hello!'),                     Text('Goodbye!'),                 ]))))<\/code><\/pre>\n<p>  <\/p>\n<p>&quot;\u042d\u043a\u0440\u0430\u043d&quot; \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <code>Scaffold<\/code> \u043a \u0441\u0432\u043e\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u0422\u0430\u043a \u0447\u0442\u043e <code>Scaffold<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c &quot;\u044d\u043a\u0440\u0430\u043d&quot;.<\/p>\n<p>  <\/p>\n<p><code>Scaffold<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 <code>Container<\/code>, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em> \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 &quot;loose&quot; <em>(\u043f\u0435\u0440. \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435)<\/em> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u041d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"primer-29\">\u041f\u0440\u0438\u043c\u0435\u0440 29<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ew\/uz\/y9\/ewuzy9vgiryofvwiflhd_gqsi8y.png\"><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">MaterialApp(     home: Scaffold(         body: SizedBox.expand(             child: Container(                 color: Colors.blue,                 child: Column(                     children: [                         Text('Hello!'),                         Text('Goodbye!'),                     ],                 )))))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0431\u0435\u043d\u043e\u043a \u0443 <code>Scaffold<\/code> \u0431\u044b\u043b \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043a\u0430\u043a \u0438 \u0441\u0430\u043c <code>Scaffold<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 <code>SizedBox.expand<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em> \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0447\u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 &quot;tight&quot; <em>(\u043f\u0435\u0440. \u0436\u0435\u0441\u0442\u043a\u0438\u0435)<\/em> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"tight--loose-ogranicheniya\">Tight \u00d7 Loose \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f &quot;tight&quot; \u0438\u043b\u0438 &quot;loose&quot;, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442.<\/p>\n<p>  <\/p>\n<p><strong>tight<\/strong> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <code>tight<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0440\u0430\u0432\u043d\u0443\u044e \u0435\u0433\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435, \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u044b\u0441\u043e\u0442\u0443, \u0440\u0430\u0432\u043d\u0443\u044e \u0435\u0433\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442\u0435 \u043a <a href=\"https:\/\/github.com\/flutter\/flutter\/blob\/master\/packages\/flutter\/lib\/src\/rendering\/box.dart#L86\" rel=\"nofollow\">box.dart<\/a> \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/flutter\/flutter\" rel=\"nofollow\">Flutter<\/a> \u0438 \u043f\u043e\u0438\u0449\u0435\u0442\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b <code>BoxConstraints<\/code>, \u0442\u043e \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">BoxConstraints.tight(Size size)    : minWidth = size.width,      maxWidth = size.width,      minHeight = size.height,      maxHeight = size.height;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0435\u0440\u043d\u0435\u0442\u0435\u0441\u044c \u043a <a href=\"#primer-2\">\u041f\u0440\u0438\u043c\u0435\u0440\u0443 2<\/a>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e &quot;\u044d\u043a\u0440\u0430\u043d&quot; \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 <code>Container<\/code> \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043a\u0430\u043a \u0438 &quot;\u044d\u043a\u0440\u0430\u043d&quot;. &quot;\u042d\u043a\u0440\u0430\u043d&quot; \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f <code>tight<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0432 <code>Container<\/code>.<\/p>\n<p>  <\/p>\n<p><code>loose<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 <strong>\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e<\/strong> \u0448\u0438\u0440\u0438\u043d\u0443\/\u0432\u044b\u0441\u043e\u0442\u0443, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u0443 \u0431\u044b\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c, \u043a\u0430\u043a\u0438\u043c \u043e\u043d \u0445\u043e\u0447\u0435\u0442. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, <code>loose<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443\/\u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u0430\u0432\u043d\u043e\u0439 <strong>\u043d\u0443\u043b\u044e<\/strong>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">BoxConstraints.loose(Size size)    : minWidth = 0.0,      maxWidth = size.width,      minHeight = 0.0,      maxHeight = size.height;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0435\u0440\u043d\u0435\u0442\u0435\u0441\u044c \u043a <a href=\"#primer-3\">\u041f\u0440\u0438\u043c\u0435\u0440\u0443 3<\/a>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e <code>Center<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0440\u0430\u0441\u043d\u043e\u043c\u0443 <code>Container<\/code> \u0431\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435, \u043d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 &quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;. <code>Center<\/code> \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0430\u043a, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f <code>loose<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435, \u0441\u0430\u043c\u0430 \u0446\u0435\u043b\u044c \u0446\u0435\u043d\u0442\u0440\u0430 <code>Center<\/code> \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c <code>tight<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043e\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f (&quot;\u044d\u043a\u0440\u0430\u043d\u0430&quot;), \u0432 <code>loose<\/code> \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 (<code>Container<\/code>).<\/p>\n<p>  <\/p>\n<h2 id=\"izuchenie-pravil-komponovki-dlya-konkretnyh-vidzhetov\">\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0417\u043d\u0430\u043d\u0438\u0435 \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u043d\u043e \u0435\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432 \u0435\u0433\u043e \u0438\u043c\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0443\u0433\u0430\u0434\u0430\u0442\u044c, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043e\u0448\u0438\u0431\u0435\u0442\u0435\u0441\u044c. \u0412\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0432\u0438\u0434\u0436\u0435\u0442, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0435 \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u0434, \u0442\u043e \u0435\u0433\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0439\u0442\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0438\u0445 IDE.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c <code>Column<\/code> \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435 \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043a \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 (<code>Ctrl-B<\/code> \u0432 IntelliJ). \u041e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f <code>basic.dart<\/code> \u0444\u0430\u0439\u043b. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>Column<\/code> \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 <code>Flex<\/code>, \u0442\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 <code>Flex<\/code> (\u0442\u0430\u043a\u0436\u0435 \u0432 <code>basic.dart<\/code>).<\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u0437, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>createRenderObject<\/code>. \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>RenderFlex<\/code>. \u042d\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f <code>Column<\/code>. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 <code>RenderFlex<\/code>. \u041e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f <code>flex.dart<\/code>.<\/li>\n<li>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u0437, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <code>performLayout<\/code>. \u042d\u0442\u043e \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u0434\u043b\u044f <code>Column<\/code>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ti\/8o\/zr\/ti8ozr9nd2zueza3x7dqfigpr60.png\"><\/p>\n<p>  <\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e <a href=\"https:\/\/github.com\/slightfoot\" rel=\"nofollow\">Simon Lightfoot<\/a> \u0437\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<p><strong><em>\u041f\u0430\u043a\u0435\u0442\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 \u0437\u0430 \u043c\u043e\u0438\u043c \u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u043e\u043c<\/em><\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/pub.dev\/packages\/align_positioned\" rel=\"nofollow\">align_positioned<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/assorted_layout_widgets\" rel=\"nofollow\">assorted_layout_widgets<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong><em>\u0415\u0449\u0435 \u043c\u043e\u0438 Flutter \u043f\u0430\u043a\u0435\u0442\u044b<\/em><\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/pub.dev\/packages\/async_redux\" rel=\"nofollow\">async_redux<\/a> \u2013 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 Medium <a href=\"https:\/\/medium.com\/flutter-community\/https-medium-com-marcglasberg-async-redux-33ac5e27d5f6\" rel=\"nofollow\">Async Redux: Flutter\u2019s non-boilerplate version of Redux<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/i18n_extension\" rel=\"nofollow\">i18n_extension<\/a> \u2013 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 Medium <a href=\"https:\/\/medium.com\/flutter-community\/i18n-extension-flutter-b966f4c65df9\" rel=\"nofollow\">Mind-blowing Easy Translations and Internationalization for Flutter<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/provider_for_redux\" rel=\"nofollow\">provider_for_redux<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/network_to_file_image\" rel=\"nofollow\">network_to_file_image<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/matrix4_transform\" rel=\"nofollow\">matrix4_transform<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/back_button_interceptor\" rel=\"nofollow\">back_button_interceptor<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/indexed_list_view\" rel=\"nofollow\">indexed_list_view<\/a><\/li>\n<li><a href=\"https:\/\/pub.dev\/packages\/animated_size_and_fade\" rel=\"nofollow\">animated_size_and_fade<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<p><strong><em>\u041e\u0431\u043e \u043c\u043d\u0435<\/em><\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/marcglasberg\" rel=\"nofollow\">github<\/a><\/li>\n<li><a href=\"https:\/\/twitter.com\/marcglasberg\" rel=\"nofollow\">twitter<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/users\/3411681\/marcg\" rel=\"nofollow\">stackoverflow<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<hr>\n<p>  <\/p>\n<p>PS \u0412\u0441\u044e \u043a\u0440\u0438\u0442\u0438\u043a\u0443, \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0443 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u0432 (\u043b\u0438\u0447\u043d\u044b\u0445) \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>PSS \u0415\u0449\u0451 \u0440\u0430\u0437 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e <a href=\"https:\/\/medium.com\/flutter-community\/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2\" rel=\"nofollow\">Flutter: The Advanced Layout Rule Even Beginners Must Know<\/a> \u043e\u0442 Marcelo Glasberg<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/500210\/\"> https:\/\/habr.com\/ru\/post\/500210\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/500210\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k6\/va\/ri\/k6varih2f-scv4jc6ipe2tyx2rk.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043d\u043e\u0432\u0438\u0447\u043e\u043a \u0432\u043e Flutter \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 <code>width: 100<\/code> \u043d\u0435 \u0448\u0438\u0440\u0438\u043d\u044b 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u043c\u0443 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 <code>Center<\/code>, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0435 \u043d\u0430\u0434\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0430\u043a \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c, \u0442\u043e \u043a \u0432\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430, \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e <code>FittedBox<\/code> \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e\u0442 <code>Column<\/code> \u043f\u0435\u0440\u0435\u043f\u043e\u043b\u043d\u0435\u043d \u0438\u043b\u0438 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>IntrinsicWidth<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u0435, \u0447\u0442\u043e Flutter \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 \u043e\u0447\u0435\u043d\u044c \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 HTML \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0438 (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0441 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c), \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043a\u0430\u0436\u0438\u0442\u0435, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e:<\/p>\n<p>  <\/p>\n<blockquote><p>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u0445. \u0420\u0430\u0437\u043c\u0435\u0440\u044b <em>(\u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435)<\/em> \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435. \u041f\u043e\u0437\u0438\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c<\/p><\/blockquote>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u0432\u043e Flutter \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-302979","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=302979"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/302979\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=302979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=302979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=302979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}