{"id":443447,"date":"2024-12-26T08:46:44","date_gmt":"2024-12-26T08:46:44","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443447"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443447","title":{"rendered":"<span>Flutter Mix. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043f\u0440\u043e\u0449\u0435<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u041c\u0430\u043a\u0441\u0438\u043c \u0417\u0435\u043c\u043b\u044f\u043d\u0438\u043a\u0438\u043d, \u043f\u0438\u0448\u0443 \u043d\u0430 Flutter 5 \u043b\u0435\u0442. \u0418 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0430\u043c \u043f\u0440\u0438\u0437\u043d\u0430\u0442\u044c\u0441\u044f, \u0443\u0436\u0435 \u043f\u043e\u043b \u0433\u043e\u0434\u0430 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Mix \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u0410 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0435\u043c \u043e\u043d \u043c\u043d\u0435 \u0442\u0430\u043a \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d78\/70b\/a82\/d7870ba82b1e9839f65589f7c33d128b.png\" width=\"2200\" height=\"1400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d78\/70b\/a82\/d7870ba82b1e9839f65589f7c33d128b.png\"\/><\/figure>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0430\u0437\u044b. Mix &#8212; UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 Flutter, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0443. \u0412 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0430\u0442 3 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/strong> \u043e\u043d\u0438 \u0437\u0430\u0434\u0430\u044e\u0442 \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b UI<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u044c:<\/strong> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><strong>Box:<\/strong> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 UI \u043f\u043e \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c <\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u044c \u044d\u0442\u043e <code>BoxDecoration<\/code>, \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u044d\u0442\u043e \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0432\u0435\u0442 \u0438\u043b\u0438 \u0440\u0430\u0434\u0438\u0443\u0441, \u0430 <code>Box<\/code> \u044d\u0442\u043e <code>DecoratedBox<\/code>. \u041f\u043e \u043d\u0430\u0447\u0430\u043b\u0443 Mix \u0438 \u0431\u044b\u043b \u043e\u0431\u0451\u0440\u0442\u043a\u043e\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce0\/2ef\/4c8\/ce02ef4c8bc0106ba22db882d21b7e10.png\" alt=\"\" title=\"\" width=\"1902\" height=\"876\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ce0\/2ef\/4c8\/ce02ef4c8bc0106ba22db882d21b7e10.png\"\/><\/figure>\n<p>\u0410 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u043a\u043e\u0440\u043e\u0447\u0435!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/713\/a4d\/210\/713a4d210974f14b2655225e206cd8b9.png\" width=\"3800\" height=\"1464\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/713\/a4d\/210\/713a4d210974f14b2655225e206cd8b9.png\"\/><\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e <code>Container<\/code>-\u0430. \u0415\u0441\u0442\u044c \u0435\u0449\u0451 <code>Opacity<\/code>, <code>TextStyle<\/code>, <code>Clip<\/code>, <code>Visibility<\/code>, \u0432\u0441\u0435 \u0432\u0438\u0434\u044b <code>Transform<\/code> \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3cc\/277\/f76\/3cc277f76eb07ff4f6dbbf8a8539dc99.png\" width=\"3800\" height=\"1320\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3cc\/277\/f76\/3cc277f76eb07ff4f6dbbf8a8539dc99.png\"\/><\/figure>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0448\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u0430\u0436\u043d\u044b\u0439 \u0444\u0430\u043a\u0442. \u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0432\u0435\u0442? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439. \u0410 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u043c:<\/p>\n<ol>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438, \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438, \u0442\u0435\u043d\u044f\u043c\u0438. \u0418 \u043f\u043e \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0435\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u0438 \u0447\u0435\u043c \u0443\u0433\u043e\u0434\u043d\u043e \u0435\u0449\u0451<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/29d\/eda\/3cd\/29deda3cd96b507e7849e4646a94f349.png\" width=\"3800\" height=\"1392\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/29d\/eda\/3cd\/29deda3cd96b507e7849e4646a94f349.png\"\/><\/figure>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u041a \u0447\u0435\u0440\u0442\u0443 \u0441\u043b\u043e\u0432\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u0434<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/21c\/120\/bb6\/21c120bb6e76aa14802e6a4f25be0c5c.png\" width=\"4406\" height=\"1844\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/21c\/120\/bb6\/21c120bb6e76aa14802e6a4f25be0c5c.png\"\/><\/figure>\n<\/li>\n<li>\n<p>\u0410 \u0435\u0449\u0451 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c!<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1f8\/45c\/1ba\/1f845c1ba3f26f6a6bbcf0b52a36f060.png\" width=\"3800\" height=\"1608\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1f8\/45c\/1ba\/1f845c1ba3f26f6a6bbcf0b52a36f060.png\"\/><\/figure>\n<\/li>\n<\/ol>\n<p>\u041d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043d\u0435 \u0432\u043e\u0437\u0440\u0430\u0437\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f AnimatedContainer-\u043e\u043c. \u0410 \u044f \u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 Scale, TextStyle, Clip \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435! \u0412\u043e\u043e\u0431\u0449\u0435 Mix \u0438 flutter_animate \u0434\u0435\u043b\u0430\u044e\u0442 90% \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0434\u043e\u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438<\/p>\n<p>\u041b\u0438\u0447\u043d\u043e \u043c\u043d\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u043e Mix \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u043d\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e Box \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0412 \u043d\u0435\u043c \u0435\u0441\u0442\u044c <code>StyledText<\/code>, <code>StyledIcon<\/code>, <code>StyledImage<\/code>, <code>HBox<\/code>, <code>VBox<\/code>, <code>ZBox<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435<\/p>\n<p><code>HBox<\/code>, <code>VBox<\/code> \u0438 <code>ZBox<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u044b &#8212; \u0430\u043d\u0430\u043b\u043e\u0433\u0438 <code>Row<\/code>, <code>Column<\/code> \u0438 <code>Stack<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0422\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0441\u0442\u0438\u043b\u0435 Mix, \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4dd\/754\/a37\/4dd754a37b0a954fe6525990600d8317.png\" width=\"3512\" height=\"1824\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4dd\/754\/a37\/4dd754a37b0a954fe6525990600d8317.png\"\/><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u0430\u0445\u0430\u0440\u043e\u043a \u043e\u0442 Mix. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043d\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 <code>$flex<\/code> \u0438\u043b\u0438 <code>$stack<\/code>, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>chain<\/code><\/p>\n<p><code>Styled*<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>StyledText<\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 <code>Text<\/code> \u0447\u0435\u0440\u0435\u0437 <code>DefaulTextStyle<\/code>. \u041f\u0440\u0438\u0447\u0435\u043c \u044f \u043d\u0435 \u0437\u0440\u044f \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u0438\u043c\u0435\u043d\u043d\u043e <code>DefaulTextStyle<\/code>, \u0432\u0435\u0434\u044c <code>StyledText<\/code> \u0442\u043e\u0436\u0435 \u0438\u0449\u0435\u0442 \u0441\u0432\u043e\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d59\/b49\/b96\/d59b49b96eee2added97989edfd7e243.png\" width=\"3502\" height=\"2040\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d59\/b49\/b96\/d59b49b96eee2added97989edfd7e243.png\"\/><\/figure>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0435\u0433\u043e \u0444\u0438\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f<\/p>\n<h3>\u0421\u0430\u0445\u0430\u0440<\/h3>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, Mix \u043f\u043e\u0434\u0441\u043b\u0430\u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c Kotlin \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 Java. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0448\u0435\u043a Dart, \u0442\u0438\u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 chain \u0432\u044b\u0437\u043e\u0432\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <code>..<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a \u044d\u0442\u043e\u043c\u0443 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043a\u0443\u0447\u0443 helper \u043c\u0435\u0442\u043e\u0434\u043e\u0432, Inherited \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0445\u043e\u0442\u044c Mix \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0431\u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c, \u044f \u043d\u0430\u0448\u0435\u043b \u0435\u0433\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041d\u0443 \u043f\u0440\u0430\u0432\u0434\u0430, \u0437\u0430\u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c <code>padding: EdgeInsets.symmetric(vertical: 10, horizontal: 8)<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c <code>$box.padding(10, 8)<\/code>? \u0414\u0430 \u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0449\u0435, \u043c\u0435\u043d\u044c\u0448\u0435 \u0448\u0443\u043c\u0430<\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b &#8212; \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 <code>$text.upperCase<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0431\u0443\u043a\u0432\u044b \u0432 <code>StyledText<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u043c\u0438! \u0418\u043b\u0438 <code>$box.color.withOpacity(0.5)<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0443\u043a\u0430\u0436\u0435\u0442\u0435 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>$box.color<\/code>, \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f6e\/556\/cc9\/f6e556cc9a35b7051164471aea5fb814.png\" width=\"3800\" height=\"1032\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f6e\/556\/cc9\/f6e556cc9a35b7051164471aea5fb814.png\"\/><\/figure>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 Mix \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b UI \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u0439-\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441 \u0444\u043e\u043d\u043e\u043c, \u0442\u0435\u043d\u044c\u044e \u0438 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c0e\/22e\/3e7\/c0e22e3e7b6544784c1a5d21ac6e53f8.png\" width=\"4292\" height=\"1680\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c0e\/22e\/3e7\/c0e22e3e7b6544784c1a5d21ac6e53f8.png\"\/><\/figure>\n<p>\u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 Mix \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438 \u043a\u043e\u0440\u043e\u0447\u0435. \u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u043b\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442? \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435. \u0412 Mix \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f <code>$with.opacity(...)<\/code>. \u0410 \u0432\u043e\u0442 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0441\u0451 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442 <code>Opacity<\/code> \u0438 \u043d\u0430 \u0440\u0435\u0432\u044c diff \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430, \u0430 15! \u0421\u0447\u0438\u0442\u0430\u044e \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n<h3>\u0414\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0438\u0445 Mix \u0438 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0434\u043e \u0431\u043e\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0443\u044e \u043c\u043d\u043e\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e. \u041d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b 3 \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043e\u043a: outlined, filled \u0438 text. \u0412 \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u043f\u043e \u0431\u043e\u043a\u0430\u043c \u0438 loader. \u041f\u043b\u044e\u0441 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041f\u043e\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a: \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0438\u043a\u043e\u043d\u043a\u0438, \u0448\u0440\u0438\u0444\u0442 \u0438 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0431\u044b\u043b\u043e \u0443\u0436\u0435 \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u0438\u043b icon button &#8212; \u0442\u0435 \u0436\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439. \u0418 \u043e\u0442\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u044d\u0442\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438\u0432\u0435\u043b\u043e \u044d\u0442\u043e \u043a \u043a\u0430\u0448\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0438 \u0431\u0430\u0433\u0430\u043c \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 <\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u043c\u043e\u0436\u0435\u0442 Mix? \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439, filled, outlined \u0438 text. \u0412 \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c variants: \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043e\u043f\u0438\u0441\u0430\u0442\u044c decoration, \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u043a\u043e\u043d\u043e\u043a, \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 3 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e layout-\u043e\u043c<\/p>\n<h2>\u041c\u0438\u043d\u0443\u0441\u044b<\/h2>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 Flutter. \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d UI framework, \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043e\u043d \u043c\u0430\u043f\u043f\u0438\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u043d \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0425\u043e\u0447\u0443 \u044f \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443, \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0443\u0433\u043e\u043b, \u043f\u0438\u0448\u0443 <code>Style($with.sizedBox(), $with.align())<\/code>. \u0410 Mix \u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u043c\u0438, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u0443\u0433\u043b\u0443 <code>SizedBox<\/code>, \u0430 \u043d\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0418 \u0443\u0437\u043d\u0430\u044e \u044f \u043e\u0431 \u044d\u0442\u043e\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u044f\u0441\u043d\u044e \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b \u0447\u0430\u0441\u0430, \u0438\u0437\u0443\u0447\u0438\u0432 \u0432\u0441\u0435 issues \u0438 \u043a\u043e\u0434 \u043f\u0430\u043a\u0435\u0442\u0430<\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041e\u0442\u0441\u0442\u0443\u043f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <code>$box.padding<\/code> \u0438\u043b\u0438 <code>$with.padding<\/code>. \u0420\u0430\u0437\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 <code>$box.height<\/code> \u0438 <code>$box.width<\/code> \u0438\u043b\u0438 <code>$with.sizedBox<\/code>. \u043f\u0440\u0438\u0447\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c Size. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0435\u0448\u044c \u0447\u0435\u0440\u0435\u0437 <code>$box<\/code>, \u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043e\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 <code>Container<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 <code>$box<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043d\u0435\u0442. \u0410 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 <code>$with<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0430\u0436\u0435\u043d, \u043d\u043e \u043d\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438, \u0432\u0435\u0434\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u0443\u043c\u0430\u0435\u0448\u044c, \u043a\u0430\u043a\u043e\u0439 \u0431\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0448\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0448\u044c<\/p>\n<h3>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0412\u043e\u0442 \u0432\u044b \u0438 \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0430\u0441 \u0437\u0430\u0446\u0435\u043f\u0438\u043b\u043e. \u0414\u0430\u043b\u044c\u0448\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0443\u0433\u043b\u0443\u0431\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/www.fluttermix.com\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a> \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=c9nWTcXCl3U\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u043f\u0443\u0441\u043a Observable Flutter \u043f\u0440\u043e Mix<\/a> (\u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c).<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/articles\/868626\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u0425\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c Mix?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">26.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u043e\u043d\u0435\u0447\u043d\u043e!<\/span><span class=\"tm-article-poll__answer-votes\">8<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 26.67%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">46.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435\u0442!<\/span><span class=\"tm-article-poll__answer-votes\">14<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 46.67%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">26.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u0430\u043a \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043e \u0432\u043e Flutter. \u0425\u043e\u0440\u043e\u0448\u043e \u044f \u043d\u0430 \u043d\u0451\u043c \u043d\u0435 \u043f\u0438\u0448\u0443<\/span><span class=\"tm-article-poll__answer-votes\">8<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 26.67%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 30 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.   \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0441\u044f 1 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/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\/articles\/868626\/\"> https:\/\/habr.com\/ru\/articles\/868626\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u041c\u0430\u043a\u0441\u0438\u043c \u0417\u0435\u043c\u043b\u044f\u043d\u0438\u043a\u0438\u043d, \u043f\u0438\u0448\u0443 \u043d\u0430 Flutter 5 \u043b\u0435\u0442. \u0418 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0430\u043c \u043f\u0440\u0438\u0437\u043d\u0430\u0442\u044c\u0441\u044f, \u0443\u0436\u0435 \u043f\u043e\u043b \u0433\u043e\u0434\u0430 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Mix \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u0410 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0435\u043c \u043e\u043d \u043c\u043d\u0435 \u0442\u0430\u043a \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0430\u0437\u044b. Mix &#8212; UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 Flutter, \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0449\u0438\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0443. \u0412 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043b\u0435\u0436\u0430\u0442 3 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/strong> \u043e\u043d\u0438 \u0437\u0430\u0434\u0430\u044e\u0442 \u0446\u0432\u0435\u0442, \u0440\u0430\u0437\u043c\u0435\u0440, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b UI<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u044c:<\/strong> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><strong>Box:<\/strong> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0442\u0438\u043b\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 UI \u043f\u043e \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c <\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u044c \u044d\u0442\u043e <code>BoxDecoration<\/code>, \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u044d\u0442\u043e \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0432\u0435\u0442 \u0438\u043b\u0438 \u0440\u0430\u0434\u0438\u0443\u0441, \u0430 <code>Box<\/code> \u044d\u0442\u043e <code>DecoratedBox<\/code>. \u041f\u043e \u043d\u0430\u0447\u0430\u043b\u0443 Mix \u0438 \u0431\u044b\u043b \u043e\u0431\u0451\u0440\u0442\u043a\u043e\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u043a\u043e\u0440\u043e\u0447\u0435!<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e <code>Container<\/code>-\u0430. \u0415\u0441\u0442\u044c \u0435\u0449\u0451 <code>Opacity<\/code>, <code>TextStyle<\/code>, <code>Clip<\/code>, <code>Visibility<\/code>, \u0432\u0441\u0435 \u0432\u0438\u0434\u044b <code>Transform<\/code> \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435!<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0448\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u0432\u0430\u0436\u043d\u044b\u0439 \u0444\u0430\u043a\u0442. \u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0446\u0432\u0435\u0442? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439. \u0410 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u043c:<\/p>\n<ol>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0441 \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438, \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438, \u0442\u0435\u043d\u044f\u043c\u0438. \u0418 \u043f\u043e \u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0435\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u0438 \u0447\u0435\u043c \u0443\u0433\u043e\u0434\u043d\u043e \u0435\u0449\u0451<\/p>\n<figure class=\"full-width\"><\/figure>\n<\/li>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u041a \u0447\u0435\u0440\u0442\u0443 \u0441\u043b\u043e\u0432\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u043a\u043e\u0434<\/p>\n<figure class=\"full-width\"><\/figure>\n<\/li>\n<li>\n<p>\u0410 \u0435\u0449\u0451 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c!<\/p>\n<figure class=\"full-width\"><\/figure>\n<\/li>\n<\/ol>\n<p>\u041d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043d\u0435 \u0432\u043e\u0437\u0440\u0430\u0437\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f AnimatedContainer-\u043e\u043c. \u0410 \u044f \u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u0440\u043e\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 Scale, TextStyle, Clip \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435! \u0412\u043e\u043e\u0431\u0449\u0435 Mix \u0438 flutter_animate \u0434\u0435\u043b\u0430\u044e\u0442 90% \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0434\u043e\u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438<\/p>\n<p>\u041b\u0438\u0447\u043d\u043e \u043c\u043d\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u043e Mix \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u043d\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e Box \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0412 \u043d\u0435\u043c \u0435\u0441\u0442\u044c <code>StyledText<\/code>, <code>StyledIcon<\/code>, <code>StyledImage<\/code>, <code>HBox<\/code>, <code>VBox<\/code>, <code>ZBox<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435<\/p>\n<p><code>HBox<\/code>, <code>VBox<\/code> \u0438 <code>ZBox<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u044b &#8212; \u0430\u043d\u0430\u043b\u043e\u0433\u0438 <code>Row<\/code>, <code>Column<\/code> \u0438 <code>Stack<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0422\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0441\u0442\u0438\u043b\u0435 Mix, \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u0430\u0445\u0430\u0440\u043e\u043a \u043e\u0442 Mix. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043d\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 <code>$flex<\/code> \u0438\u043b\u0438 <code>$stack<\/code>, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>chain<\/code><\/p>\n<p><code>Styled*<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <code>StyledText<\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 <code>Text<\/code> \u0447\u0435\u0440\u0435\u0437 <code>DefaulTextStyle<\/code>. \u041f\u0440\u0438\u0447\u0435\u043c \u044f \u043d\u0435 \u0437\u0440\u044f \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b \u0438\u043c\u0435\u043d\u043d\u043e <code>DefaulTextStyle<\/code>, \u0432\u0435\u0434\u044c <code>StyledText<\/code> \u0442\u043e\u0436\u0435 \u0438\u0449\u0435\u0442 \u0441\u0432\u043e\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041b\u0430\u0434\u043d\u043e, \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0435\u0433\u043e \u0444\u0438\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0440\u0430\u0432\u044f\u0442\u0441\u044f<\/p>\n<h3>\u0421\u0430\u0445\u0430\u0440<\/h3>\n<p>\u041a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, Mix \u043f\u043e\u0434\u0441\u043b\u0430\u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0447\u0435\u043c Kotlin \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 Java. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0448\u0435\u043a Dart, \u0442\u0438\u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 chain \u0432\u044b\u0437\u043e\u0432\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 <code>..<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a \u044d\u0442\u043e\u043c\u0443 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u043a\u0443\u0447\u0443 helper \u043c\u0435\u0442\u043e\u0434\u043e\u0432, Inherited \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0445\u043e\u0442\u044c Mix \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0441\u0435\u0431\u044f \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043a\u0430\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c, \u044f \u043d\u0430\u0448\u0435\u043b \u0435\u0433\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041d\u0443 \u043f\u0440\u0430\u0432\u0434\u0430, \u0437\u0430\u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c <code>padding: EdgeInsets.symmetric(vertical: 10, horizontal: 8)<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c <code>$box.padding(10, 8)<\/code>? \u0414\u0430 \u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0449\u0435, \u043c\u0435\u043d\u044c\u0448\u0435 \u0448\u0443\u043c\u0430<\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b &#8212; \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 <code>$text.upperCase<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0431\u0443\u043a\u0432\u044b \u0432 <code>StyledText<\/code> \u0432\u0438\u0434\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u043c\u0438! \u0418\u043b\u0438 <code>$box.color.withOpacity(0.5)<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0446\u0432\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0443\u043a\u0430\u0436\u0435\u0442\u0435 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 <code>$box.color<\/code>, \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 Mix \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b UI \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u0439-\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441 \u0444\u043e\u043d\u043e\u043c, \u0442\u0435\u043d\u044c\u044e \u0438 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 Mix \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438 \u043a\u043e\u0440\u043e\u0447\u0435. \u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u043b\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442? \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0435. \u0412 Mix \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f <code>$with.opacity(...)<\/code>. \u0410 \u0432\u043e\u0442 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0441\u0451 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442 <code>Opacity<\/code> \u0438 \u043d\u0430 \u0440\u0435\u0432\u044c diff \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430, \u0430 15! \u0421\u0447\u0438\u0442\u0430\u044e \u044d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e<\/p>\n<h3>\u0414\u0438\u0437\u0430\u0439\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0438\u0445 Mix \u0438 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0434\u043e \u0431\u043e\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0443\u044e \u043c\u043d\u043e\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e. \u041d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b 3 \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043e\u043a: outlined, filled \u0438 text. \u0412 \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u043f\u043e \u0431\u043e\u043a\u0430\u043c \u0438 loader. \u041f\u043b\u044e\u0441 \u043d\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041f\u043e\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u0438\u0445 \u043a\u043d\u043e\u043f\u043e\u043a: \u043c\u0435\u043d\u044c\u0448\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0438\u043a\u043e\u043d\u043a\u0438, \u0448\u0440\u0438\u0444\u0442 \u0438 \u043d\u0435 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0431\u044b\u043b\u043e \u0443\u0436\u0435 \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c, \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u0438\u043b icon button &#8212; \u0442\u0435 \u0436\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439. \u0418 \u043e\u0442\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043b \u044d\u0442\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438\u0432\u0435\u043b\u043e \u044d\u0442\u043e \u043a \u043a\u0430\u0448\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0438 \u0431\u0430\u0433\u0430\u043c \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 <\/p>\n<p>\u041a\u0430\u043a \u043f\u043e\u043c\u043e\u0436\u0435\u0442 Mix? \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439, filled, outlined \u0438 text. \u0412 \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c variants: \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043e\u043f\u0438\u0441\u0430\u0442\u044c decoration, \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0438\u043a\u043e\u043d\u043e\u043a, \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 3 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e layout-\u043e\u043c<\/p>\n<h2>\u041c\u0438\u043d\u0443\u0441\u044b<\/h2>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u043e\u0439 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 Flutter. \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d UI framework, \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043e\u043d \u043c\u0430\u043f\u043f\u0438\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u0432 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u043d \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0425\u043e\u0447\u0443 \u044f \u0437\u0430\u0434\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443, \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0443\u0433\u043e\u043b, \u043f\u0438\u0448\u0443 <code>Style($with.sizedBox(), $with.align())<\/code>. \u0410 Mix \u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u043c\u0438, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432 \u0443\u0433\u043b\u0443 <code>SizedBox<\/code>, \u0430 \u043d\u0435 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0418 \u0443\u0437\u043d\u0430\u044e \u044f \u043e\u0431 \u044d\u0442\u043e\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0410 \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u044f\u0441\u043d\u044e \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b \u0447\u0430\u0441\u0430, \u0438\u0437\u0443\u0447\u0438\u0432 \u0432\u0441\u0435 issues \u0438 \u043a\u043e\u0434 \u043f\u0430\u043a\u0435\u0442\u0430<\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041e\u0442\u0441\u0442\u0443\u043f \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <code>$box.padding<\/code> \u0438\u043b\u0438 <code>$with.padding<\/code>. \u0420\u0430\u0437\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 <code>$box.height<\/code> \u0438 <code>$box.width<\/code> \u0438\u043b\u0438 <code>$with.sizedBox<\/code>. \u043f\u0440\u0438\u0447\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c Size. \u0415\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0435\u0448\u044c \u0447\u0435\u0440\u0435\u0437 <code>$box<\/code>, \u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043e\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 <code>Container<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 <code>$box<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043d\u0435\u0442. \u0410 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 <code>$with<\/code> \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u0430\u0436\u0435\u043d, \u043d\u043e \u043d\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438, \u0432\u0435\u0434\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u0443\u043c\u0430\u0435\u0448\u044c, \u043a\u0430\u043a\u043e\u0439 \u0431\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0448\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439, \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0448\u044c<\/p>\n<h3>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0412\u043e\u0442 \u0432\u044b \u0438 \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0430\u0441 \u0437\u0430\u0446\u0435\u043f\u0438\u043b\u043e. \u0414\u0430\u043b\u044c\u0448\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0443\u0433\u043b\u0443\u0431\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/www.fluttermix.com\/\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a> \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=c9nWTcXCl3U\" rel=\"noopener noreferrer nofollow\">\u0432\u044b\u043f\u0443\u0441\u043a Observable Flutter \u043f\u0440\u043e Mix<\/a> (\u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c).<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/articles\/868626\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u0425\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c Mix?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">26.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u043e\u043d\u0435\u0447\u043d\u043e!<\/span><span class=\"tm-article-poll__answer-votes\">8<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 26.67%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">46.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435\u0442!<\/span><span class=\"tm-article-poll__answer-votes\">14<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 46.67%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">26.67% <\/span><span class=\"tm-article-poll__answer-label\">\u041a\u0430\u043a \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043e \u0432\u043e Flutter. \u0425\u043e\u0440\u043e\u0448\u043e \u044f \u043d\u0430 \u043d\u0451\u043c \u043d\u0435 \u043f\u0438\u0448\u0443<\/span><span class=\"tm-article-poll__answer-votes\">8<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 26.67%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 30 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.   \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0441\u044f 1 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/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\/articles\/868626\/\"> https:\/\/habr.com\/ru\/articles\/868626\/<\/a><br \/><\/br><\/br><\/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-443447","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443447","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=443447"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443447\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}