{"id":334325,"date":"2022-06-10T15:00:47","date_gmt":"2022-06-10T15:00:47","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=334325"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=334325","title":{"rendered":"<span>Flutter for Web: \u0433\u0430\u0439\u0434 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445<\/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><em>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e Flutter \u0431\u044b\u043b \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043a\u0430\u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f Android \u0438 iOS. \u041d\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f Flutter \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c web \u0438 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0432 <\/em><a href=\"https:\/\/friflex.com\/\"><em>Friflex<\/em><\/a><em> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430 <\/em><a href=\"https:\/\/friflex.com\/flutter\/\"><em>Flutter<\/em><\/a><em> \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u041d\u0438\u043a\u0438\u0442\u0430 \u0423\u043b\u044c\u043a\u043e, Flutter fullstack developer \u0432 Friflex, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Flutter \u0434\u043b\u044f Web. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c Flutter \u0434\u043b\u044f web, \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u0434\u043b\u044f \u0432\u0430\u0441. <\/em>  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/763\/860\/01d\/76386001d22d01bccd073df5f91a2056.jpg\" width=\"1958\" height=\"1103\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/763\/860\/01d\/76386001d22d01bccd073df5f91a2056.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0 \u043c\u044b \u043f\u0440\u043e\u0439\u0434\u0435\u043c \u044d\u0442\u0430\u043f\u044b \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Flutter Web \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u0435\u0437 \u0432\u0440\u0435\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f, \u043a\u0430\u043a\u0438\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 Flutter, \u0430 \u043a\u0430\u043a\u0438\u0435 \u043d\u0435\u0442.<strong> <\/strong>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code>bash\u00a0 flutter create test_web\u00a0<\/code><\/pre>\n<p>flutter cli \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 web-\u0441\u0440\u0435\u0434\u044b.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7b0\/e51\/f2a\/7b0e51f2ac41f70cc0ad554b6d969ee6.png\" width=\"331\" height=\"553\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7b0\/e51\/f2a\/7b0e51f2ac41f70cc0ad554b6d969ee6.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u0441 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p>\/lib\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e Flutter \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;\u00a0<\/p>\n<\/li>\n<li>\n<p>\/web\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a web-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 (\u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d index.html, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440);<\/p>\n<\/li>\n<li>\n<p>\/build\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c.\u00a0 <\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<pre><code>bash  flutter run <\/code><\/pre>\n<p>Futter \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043d\u0430 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0435.<br \/>\u0421\u0440\u0430\u0437\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.\u00a0      <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6f3\/b04\/538\/6f3b045389280e367bf7f45504c33770.png\" width=\"1086\" height=\"974\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6f3\/b04\/538\/6f3b045389280e367bf7f45504c33770.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e flutter \u0432 web-\u0441\u0440\u0435\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 hash \u0440\u043e\u0443\u0442\u0438\u043d\u0433. \u041f\u043e\u0445\u043e\u0436\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432 SPA \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Vue \u0438\u043b\u0438 React (\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 HashRouter).<\/p>\n<p>\u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c web-\u0441\u0435\u0440\u0432\u0435\u0440. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0430\u0437\u0434\u0430\u0442\u044c index.html \u0438 \u0432\u0441\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0445\u0435\u0448\u0443 \u00ab\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u00bb.\u00a0<\/p>\n<p>\u00a0\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432:\u00a0<\/p>\n<ol>\n<li>\n<p>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 url \u0431\u0435\u0437 \u0445\u0435\u0448\u0430;\u00a0<\/p>\n<\/li>\n<li>\n<p>\u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.\u00a0<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0430\u0442\u0430\u043b\u043e\u0433.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u0434, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f onGenerateRoute, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 (url, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440). \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c url \u043f\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0432\u044b\u0442\u0430\u0449\u0438\u0432 \u0438\u0437 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430. \u0415\u0441\u043b\u0438 \u0443\u0434\u0430\u0435\u0442\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u043d\u0430 \u0440\u043e\u0443\u0442\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u043e\u0443\u0442. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043e\u0439\u0442\u0438.\u00a0<\/p>\n<pre><code>class AppRoutes {    static final _namedRoutes = &lt;String, RouteFactory>{  CatalogueRoute.name: (settings) => CatalogueRoute(settings: settings),    };      static Route&lt;dynamic>? onGenerateRoute(RouteSettings settings) {  final params = CatalogueItemRouteParams.parse(settings);    if (params != null) {    return CatalogueItemRoute(      catalogueItemRouteParams: params,      settings: settings,    );  } else {    print('unable to parse params');  }    if (_namedRoutes.containsKey(settings.name)) {    return _namedRoutes[settings.name]!(settings);  }  return null;    }  } <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c state-management \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Stream\u2019\u0430\u043c\u0438. Stream \u2013 \u044d\u0442\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Observer. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u043d\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u2013 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.   <\/p>\n<pre><code>class CatalogueController {    final StreamController&lt;CatalogueState> _controller =    StreamController&lt;CatalogueState>.broadcast();      CatalogueState _state = CatalogueState(isLoading: false);      final CatalogueRepository catalogueRepository;      CatalogueController({  required this.catalogueRepository,    });      Stream&lt;CatalogueState> get stream => _controller.stream;    CatalogueState get value => _state;      void emit(CatalogueState newState) {  _state = newState;  _controller.add(newState);    }      Future&lt;void> loadCatalogue() async {  if (value.isLoading) {    return;  }    emit(    (CatalogueStateBuilder.fromInstance(value)..isLoading = true).build(),  );    try {    final catalogue = await catalogueRepository.getCatalogue();      emit(      (CatalogueStateBuilder.fromInstance(value)            ..isLoading = false            ..catalogue = catalogue.toList())          .build(),    );  } on AppError catch (err) {    emit(      (CatalogueStateBuilder.fromInstance(value)            ..isLoading = false            ..error = err)          .build(),    );  }    }  } <\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c StreamBuilder, \u0447\u0442\u043e\u0431\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e Stream\u2019\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d initState, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 loadCatalogue \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.   <\/p>\n<pre><code>class _CataloguePageState extends State&lt;CataloguePage> {    @override    void initState() {  widget.catalogueController.loadCatalogue();  super.initState();    }      @override    Widget build(BuildContext context) {  return Scaffold(    appBar: AppBar(),    body: StreamBuilder&lt;CatalogueState>(      stream: widget.catalogueController.stream,      builder: (context, snapshot) {        final state = snapshot.data ?? widget.catalogueController.value;          if (state.error != null) {          return Center(            child: Text(state.error!.message),          );        }          if (state.catalogue != null) {          int crossAxisCount = 2;            if (MediaQuery.of(context).size.width > 1000) {            crossAxisCount = 4;          }            return Container(              color: Colors.blue,              child: SingleChildScrollView(                child: Column(                  children: [                    Padding(                      padding: const EdgeInsets.all(8.0),                      child: GridView.count(                        physics: const NeverScrollableScrollPhysics(),                        shrinkWrap: true,                        crossAxisCount: crossAxisCount,                        crossAxisSpacing: 8,                        mainAxisSpacing: 8,                        children: state.catalogue!                            .map(                              (e) => CatalogueCard(                                catalogueItem: e,                                onTap: () {                                  Navigator.of(context).pushNamed('\/catalogue-item\/${e.id}');                                },                              ),                            )                            .toList(),                      ),                    )                  ],                ),              ));        }          return const Center(          child: CircularProgressIndicator(),        );      },    ),  );    }  } <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u043a\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f.   <\/p>\n<pre><code>abstract class CatalogueRepository {    Future&lt;CatalogueItem> getCatalogueItem(String id);    Future&lt;Iterable&lt;CatalogueItem>> getCatalogue();  } <\/code><\/pre>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.  <\/p>\n<details class=\"spoiler\">\n<summary>Hidden text<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/efd\/1da\/01d\/efd1da01d5c7bf07600e94623b8d313d.png\" alt=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433\" title=\"\u041a\u0430\u0442\u0430\u043b\u043e\u0433\" width=\"508\" height=\"880\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/efd\/1da\/01d\/efd1da01d5c7bf07600e94623b8d313d.png\"\/><figcaption>\u041a\u0430\u0442\u0430\u043b\u043e\u0433<\/figcaption><\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cda\/12d\/4b1\/cda12d4b1f7a5b803efcc1c04e876024.png\" alt=\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u0432\u0430\u0440\u0430\" title=\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u0432\u0430\u0440\u0430\" width=\"508\" height=\"880\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cda\/12d\/4b1\/cda12d4b1f7a5b803efcc1c04e876024.png\"\/><figcaption>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u0432\u0430\u0440\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a, \u043a\u0430\u043a \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c SPA. Url \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 History API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Vue Router.\u00a0<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041d\u043e \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430? \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435!<\/p>\n<p>\u0417\u0430\u0439\u0434\u0435\u043c \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443 <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bd0\/46e\/4db\/bd046e4db8b589109bfec84f2445a7f9.png\" width=\"1086\" height=\"974\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bd0\/46e\/4db\/bd046e4db8b589109bfec84f2445a7f9.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \/web\/index.html. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u043e\u0432, \u0438 \u043e\u0434\u0438\u043d script \u0442\u0435\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 Flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0432 javascript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e dart2js. \u0417\u043d\u0430\u0447\u0438\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0447\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEO. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 time to first contentful paint, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0435\u0441\u044c JS, \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 <a href=\"https:\/\/dart.dev\/guides\/language\/language-tour#lazily-loading-a-library\"><u>deferred loading<\/u><\/a>. \u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 split chunks \u0432 webpack. \u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043e \u044f\u0434\u0440\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 production \u0431\u0438\u043b\u0434\u043e\u0432 Flutter \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0431\u0430\u043d\u0434\u043b\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. \u041f\u0440\u0438\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0438 \u0435\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f \u0432\u044b\u0448\u0435. \u0427\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f? \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 js, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0432 DOM \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043e\u0434\u043d\u0438\u043c canvas \u0442\u0435\u0433\u043e\u043c.\u00a0\u00a0<\/p>\n<p>\u0423 Flutter \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0434\u0438\u043d canvas (\u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430) \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f html \u0442\u0435\u0433\u0438, \u0441\u0442\u0438\u043b\u0438 \u0438 canvas \u0442\u0435\u0433\u0438 (\u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432).\u00a0<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 hash \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 PathUrlStrategy. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 pubspec.yaml \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\u00a0\u00a0<\/p>\n<pre><code>yaml  dependencies:    flutter_web_plugins:  sdk: flutter <\/code><\/pre>\n<p>\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c setUrlStrategy. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.     <\/p>\n<pre><code>dart  void main() {    setupServices();    setUrlStrategy(PathUrlStrategy());    runApp(const MyApp());  } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 url \u0431\u0435\u0437 \u0445\u0435\u0448\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>Hidden text<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/62f\/26b\/c4a\/62f26bc4af87b6f90bc87a363ed5be02.png\" width=\"1117\" height=\"934\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/62f\/26b\/c4a\/62f26bc4af87b6f90bc87a363ed5be02.png\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 PathUrlStrategy \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c web-\u0441\u0435\u0440\u0432\u0435\u0440 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 url \u043e\u043d \u043e\u0442\u0434\u0430\u0432\u0430\u043b index.html. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0431\u043e\u0435\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.   <\/p>\n<pre><code> bash  flutter build web <\/code><\/pre>\n<p>\u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c docker-compose \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e. \u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u0434\u043d\u044f\u0442\u044c nginx \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u2013 \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u0442\u044b\u0439 volume \/var\/www\/html \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 web-\u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.   <\/p>\n<pre><code>version: '2'  services:    nginx:  image: \"nginx:latest\"  restart: always  ports:    - 80:80  volumes:    - \".\/nginx\/logs:\/etc\/logs\/nginx\"    - \".\/nginx\/conf.d:\/etc\/nginx\/conf.d\/\"    - \"..\/build\/web:\/var\/www\/html\" <\/code><\/pre>\n<p>\u0414\u043b\u044f nginx \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441 \u043e\u0434\u043d\u0438\u043c location \u2013 \u043e\u0442\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u043f\u043e url, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b\u0430 \u043d\u0435\u0442 \u2013 \u043e\u0442\u0434\u0430\u0435\u043c index.html   <\/p>\n<pre><code>server {  listen 80 default;  root \/var\/www\/html;  location \/ {      try_files $uri \/index.html;  }      } <\/code><\/pre>\n<p>\u041f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b:   <\/p>\n<pre><code>bash  cd docker  docker-compose up -d --build <\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430<a href=\"http:\/\/localhost\/\"> <u>http:\/\/localhost<\/u><\/a> \u0438 \u0432\u0438\u0434\u0438\u043c \u043a\u0430\u043a nginx \u043e\u0442\u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433.   <\/p>\n<h3>Flutter for web: \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430<\/h3>\n<p>\u0420\u0435\u0437\u044e\u043c\u0438\u0440\u0443\u044f, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0443 Flutter \u0434\u043b\u044f web \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Flutter \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439? <\/p>\n<ol>\n<li>\n<p>Flutter \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <strong><em>\u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u0446\u0435\u043b\u0435\u0432\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430<\/em><\/strong>, \u043f\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043b\u0438\u0431\u043e \u0435\u0441\u043b\u0438 <strong><em>\u0446\u0435\u043b\u0435\u0432\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c<\/em><\/strong> \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c <strong><em>\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e<\/em><\/strong>.\u00a0<\/p>\n<\/li>\n<li>\n<p><strong><em>Dart<\/em><\/strong> \u2013 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 <strong><em>\u0431\u043e\u043d\u0443\u0441<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Flutter. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u0435\u043a\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u043e\u0434 JS.\u00a0<\/p>\n<\/li>\n<li>\n<p>Flutter \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u0435\u0435 <strong><em>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430).<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Flutter \u0434\u043b\u044f web \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 <strong><em>\u0435\u0441\u0442\u044c <\/em><\/strong>\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0432\u0448\u0430\u044f\u0441\u044f <strong><em>Flutter \u043a\u043e\u043c\u0430\u043d\u0434\u0430<\/em><\/strong>, \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u043e\u0442\u043e\u0432\u0430 \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 Flutter.<\/p>\n<\/li>\n<li>\n<p>Flutter \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b <strong><em>\u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c PWA<\/em><\/strong>. \u0421 \u0432\u0435\u0440\u0441\u0438\u0438 1.20 \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 Flutter\u2019\u043e\u043c, \u0441\u0440\u0430\u0437\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 PWA, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043e\u0444\u043b\u0430\u0439\u043d \u0440\u0435\u0436\u0438\u043c\u0435.\u00a0<\/p>\n<\/li>\n<\/ol>\n<h2>Flutter for web: \u043c\u0438\u043d\u0443\u0441\u044b  <\/h2>\n<p>\u0415\u0441\u0442\u044c \u0438 \u0442\u0430\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 Flutter \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0442\u0438.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f, \u043d\u0430 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f web-\u043f\u0440\u043e\u0435\u043a\u0442\u0430.\u00a0<\/p>\n<ol>\n<li>\n<p>Flutter \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 SEO \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043e\u043d\u043b\u0430\u0439\u043d-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u043e\u0432. \u0412 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Flutter \u0435\u0441\u0442\u044c <a href=\"https:\/\/docs.flutter.dev\/development\/platform-integration\/web\/faq#search-engine-optimization-seo\"><u>\u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435<\/u><\/a> \u043e\u0431 \u044d\u0442\u043e\u043c. \u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0448\u043b\u044e\u0437, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u0438 \u0432 html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 http \u043a\u043e\u0434\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u0422\u0430\u043a\u043e\u0439 \u0448\u043b\u044e\u0437 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 PHP + Laravel.\u00a0 \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u0430\u043c\u0438. \u041f\u043e\u0434 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 h1 \u0438 h2 \u0442\u0435\u0433\u043e\u0432, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0438\u0445 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Flutter \u0432 web-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u0412 \u043e<a href=\"https:\/\/docs.flutter.dev\/development\/tools\/sdk\/release-notes\/supported-platforms\"><u>\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/a> \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 Flutter \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e. <\/p>\n<\/li>\n<\/ol>\n<p>Flutter \u043c\u043e\u0436\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0434\u043b\u044f SPA \u0438 PWA web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2013 \u0430\u0434\u043c\u0438\u043d\u043a\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0447\u0435\u0440\u0435\u0437 JSON API, web-\u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (\u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 Google Docs) \u0438\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434. Flutter \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043d\u044f\u0442\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0438\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f SEO, Flutter \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432 \u0441\u0438\u043b\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Server Side Rendering (\u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JS \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435). \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, Flutter\u00a0 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0439 DOM \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e.\u00a0<\/p>\n<p><a href=\"https:\/\/github.com\/ulkenauer\/flutter-web-test\"><u>\u0421\u0441\u044b\u043b\u043a\u0430<\/u><\/a> \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439\u00a0<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \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\/company\/friflex\/blog\/666952\/\"> https:\/\/habr.com\/ru\/company\/friflex\/blog\/666952\/<\/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><em>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e Flutter \u0431\u044b\u043b \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043a\u0430\u043a \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f Android \u0438 iOS. \u041d\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f Flutter \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c web \u0438 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u044b \u0432 <\/em><a href=\"https:\/\/friflex.com\/\"><em>Friflex<\/em><\/a><em> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430 <\/em><a href=\"https:\/\/friflex.com\/flutter\/\"><em>Flutter<\/em><\/a><em> \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0445\u043e\u0434\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u041d\u0438\u043a\u0438\u0442\u0430 \u0423\u043b\u044c\u043a\u043e, Flutter fullstack developer \u0432 Friflex, \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Flutter \u0434\u043b\u044f Web. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c Flutter \u0434\u043b\u044f web, \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u0434\u043b\u044f \u0432\u0430\u0441. <\/em>  <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u00a0 \u043c\u044b \u043f\u0440\u043e\u0439\u0434\u0435\u043c \u044d\u0442\u0430\u043f\u044b \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Flutter Web \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0431\u0435\u0437 \u0432\u0440\u0435\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f, \u043a\u0430\u043a\u0438\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 Flutter, \u0430 \u043a\u0430\u043a\u0438\u0435 \u043d\u0435\u0442.<strong> <\/strong>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code>bash\u00a0 flutter create test_web\u00a0<\/code><\/pre>\n<p>flutter cli \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0430\u043c \u0441\u043a\u0435\u043b\u0435\u0442\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 web-\u0441\u0440\u0435\u0434\u044b.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435. <\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430\u0441 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p>\/lib\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e Flutter \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;\u00a0<\/p>\n<\/li>\n<li>\n<p>\/web\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a web-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 (\u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d index.html, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440);<\/p>\n<\/li>\n<li>\n<p>\/build\/ \u2013 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c.\u00a0 <\/p>\n<\/li>\n<\/ul>\n<p>\u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<pre><code>bash  flutter run <\/code><\/pre>\n<p>Futter \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043d\u0430 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0435.<br \/>\u0421\u0440\u0430\u0437\u0443 \u043e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.\u00a0      <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e flutter \u0432 web-\u0441\u0440\u0435\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 hash \u0440\u043e\u0443\u0442\u0438\u043d\u0433. \u041f\u043e\u0445\u043e\u0436\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0432 SPA \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Vue \u0438\u043b\u0438 React (\u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 HashRouter).<\/p>\n<p>\u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c web-\u0441\u0435\u0440\u0432\u0435\u0440. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0430\u0437\u0434\u0430\u0442\u044c index.html \u0438 \u0432\u0441\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e \u0445\u0435\u0448\u0443 \u00ab\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u00bb.\u00a0<\/p>\n<p>\u00a0\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432:\u00a0<\/p>\n<ol>\n<li>\n<p>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 url \u0431\u0435\u0437 \u0445\u0435\u0448\u0430;\u00a0<\/p>\n<\/li>\n<li>\n<p>\u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.\u00a0<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0430\u0442\u0430\u043b\u043e\u0433.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u0434, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f onGenerateRoute, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 (url, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440). \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c url \u043f\u043e \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0432\u044b\u0442\u0430\u0449\u0438\u0432 \u0438\u0437 \u043d\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430. \u0415\u0441\u043b\u0438 \u0443\u0434\u0430\u0435\u0442\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u043d\u0430 \u0440\u043e\u0443\u0442\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u043e\u0443\u0442. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u043e\u0439 \u0438\u0437 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043e\u0439\u0442\u0438.\u00a0<\/p>\n<pre><code>class AppRoutes {    static final _namedRoutes = &lt;String, RouteFactory>{  CatalogueRoute.name: (settings) => CatalogueRoute(settings: settings),    };      static Route&lt;dynamic>? onGenerateRoute(RouteSettings settings) {  final params = CatalogueItemRouteParams.parse(settings);    if (params != null) {    return CatalogueItemRoute(      catalogueItemRouteParams: params,      settings: settings,    );  } else {    print('unable to parse params');  }    if (_namedRoutes.containsKey(settings.name)) {    return _namedRoutes[settings.name]!(settings);  }  return null;    }  } <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c state-management \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Stream\u2019\u0430\u043c\u0438. Stream \u2013 \u044d\u0442\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d Observer. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u043e\u043d\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u2013 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u0434\u0443 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.   <\/p>\n<pre><code>class CatalogueController {    final StreamController&lt;CatalogueState> _controller =    StreamController&lt;CatalogueState>.broadcast();      CatalogueState _state = CatalogueState(isLoading: false);      final CatalogueRepository catalogueRepository;      CatalogueController({  required this.catalogueRepository,    });      Stream&lt;CatalogueState> get stream => _controller.stream;    CatalogueState get value => _state;      void emit(CatalogueState newState) {  _state = newState;  _controller.add(newState);    }      Future&lt;void> loadCatalogue() async {  if (value.isLoading) {    return;  }    emit(    (CatalogueStateBuilder.fromInstance(value)..isLoading = true).build(),  );    try {    final catalogue = await catalogueRepository.getCatalogue();      emit(      (CatalogueStateBuilder.fromInstance(value)            ..isLoading = false            ..catalogue = catalogue.toList())          .build(),    );  } on AppError catch (err) {    emit(      (CatalogueStateBuilder.fromInstance(value)            ..isLoading = false            ..error = err)          .build(),    );  }    }  } <\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c StreamBuilder, \u0447\u0442\u043e\u0431\u044b \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e Stream\u2019\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d initState, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 loadCatalogue \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.   <\/p>\n<pre><code>class _CataloguePageState extends State&lt;CataloguePage> {    @override    void initState() {  widget.catalogueController.loadCatalogue();  super.initState();    }      @override    Widget build(BuildContext context) {  return Scaffold(    appBar: AppBar(),    body: StreamBuilder&lt;CatalogueState>(      stream: widget.catalogueController.stream,      builder: (context, snapshot) {        final state = snapshot.data ?? widget.catalogueController.value;          if (state.error != null) {          return Center(            child: Text(state.error!.message),          );        }          if (state.catalogue != null) {          int crossAxisCount = 2;            if (MediaQuery.of(context).size.width > 1000) {            crossAxisCount = 4;          }            return Container(              color: Colors.blue,              child: SingleChildScrollView(                child: Column(                  children: [                    Padding(                      padding: const EdgeInsets.all(8.0),                      child: GridView.count(                        physics: const NeverScrollableScrollPhysics(),                        shrinkWrap: true,                        crossAxisCount: crossAxisCount,                        crossAxisSpacing: 8,                        mainAxisSpacing: 8,                        children: state.catalogue!                            .map(                              (e) => CatalogueCard(                                catalogueItem: e,                                onTap: () {                                  Navigator.of(context).pushNamed('\/catalogue-item\/${e.id}');                                },                              ),                            )                            .toList(),                      ),                    )                  ],                ),              ));        }          return const Center(          child: CircularProgressIndicator(),        );      },    ),  );    }  } <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u043e\u043a\u043e\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f.   <\/p>\n<pre><code>abstract class CatalogueRepository {    Future&lt;CatalogueItem> getCatalogueItem(String id);    Future&lt;Iterable&lt;CatalogueItem>> getCatalogue();  } <\/code><\/pre>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.  <\/p>\n<details class=\"spoiler\">\n<summary>Hidden text<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"\"><figcaption>\u041a\u0430\u0442\u0430\u043b\u043e\u0433<\/figcaption><\/figure>\n<figure class=\"\"><figcaption>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u0432\u0430\u0440\u0430<\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043e\u043a, \u043a\u0430\u043a \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c SPA. Url \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 History API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Vue Router.\u00a0<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0441 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041d\u043e \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430? \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435!<\/p>\n<p>\u0417\u0430\u0439\u0434\u0435\u043c \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443 <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \/web\/index.html. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u0430\u0442\u0435\u0433\u043e\u0432, \u0438 \u043e\u0434\u0438\u043d script \u0442\u0435\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043d\u0430\u0448\u0435 Flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u0440\u0430\u043d\u0441\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0432 javascript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e dart2js. \u0417\u043d\u0430\u0447\u0438\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0447\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEO. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 time to first contentful paint, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0435\u0441\u044c JS, \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c \u0435\u0433\u043e \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 <a href=\"https:\/\/dart.dev\/guides\/language\/language-tour#lazily-loading-a-library\"><u>deferred loading<\/u><\/a>. \u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 split chunks \u0432 webpack. \u041f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u0440\u0443\u0436\u0435\u043d\u043e \u044f\u0434\u0440\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 production \u0431\u0438\u043b\u0434\u043e\u0432 Flutter \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0431\u0430\u043d\u0434\u043b\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e. \u041f\u0440\u0438\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0438 \u0435\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.\u00a0<\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f \u0432\u044b\u0448\u0435. \u0427\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f? \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 js, \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u0432 DOM \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u0432\u0435\u0441\u044c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d \u043e\u0434\u043d\u0438\u043c canvas \u0442\u0435\u0433\u043e\u043c.\u00a0\u00a0<\/p>\n<p>\u0423 Flutter \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0434\u0438\u043d canvas (\u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430) \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f html \u0442\u0435\u0433\u0438, \u0441\u0442\u0438\u043b\u0438 \u0438 canvas \u0442\u0435\u0433\u0438 (\u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432).\u00a0<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0434\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 hash \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 PathUrlStrategy. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432 pubspec.yaml \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\u00a0\u00a0<\/p>\n<pre><code>yaml  dependencies:    flutter_web_plugins:  sdk: flutter <\/code><\/pre>\n<p>\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c setUrlStrategy. \u0412 \u0446\u0435\u043b\u043e\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.     <\/p>\n<pre><code>dart  void main() {    setupServices();    setUrlStrategy(PathUrlStrategy());    runApp(const MyApp());  } <\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 url \u0431\u0435\u0437 \u0445\u0435\u0448\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>Hidden text<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 PathUrlStrategy \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c web-\u0441\u0435\u0440\u0432\u0435\u0440 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 url \u043e\u043d \u043e\u0442\u0434\u0430\u0432\u0430\u043b index.html. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0431\u043e\u0435\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.   <\/p>\n<pre><code> bash<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-334325","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334325","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=334325"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334325\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=334325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=334325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}