{"id":367609,"date":"2024-05-21T03:24:29","date_gmt":"2024-05-21T03:24:29","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=367609"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=367609","title":{"rendered":"<span>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 Server-Driven UI \u043d\u0430 Flutter c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Duit<\/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>\u0418\u0442\u0430\u043a, \u0437\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a\u0438\u0442\u0430 \u0421\u0438\u043d\u044f\u0432\u0438\u043d, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Flutter \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0438 \u0441 React Native. \u041c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u044e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0443 \u0438 \u043d\u0435 \u0431\u043e\u0438\u043c\u0441\u044f \u0441\u043c\u0435\u043b\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0441 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 Duit.<\/p>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">Custom widgets<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">Components<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82\" rel=\"noopener noreferrer nofollow\">Transport extensions<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">Actions &amp; Events<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>18 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2023 \u0433\u043e\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043b\u0441\u044f \u0440\u0435\u043b\u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 SDUI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"https:\/\/github.com\/lesleysin\/flutter_duit\" rel=\"noopener noreferrer nofollow\">Duit<\/a>. \u041e\u0431 \u044d\u0442\u043e\u043c \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/articles\/781954\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Duit, \u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f\u0445 \u043e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u0438 \u0442\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e. <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f v1.7.0. \u0411\u044b\u043b\u0430 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 (\u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0445 29), \u0430 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <em>Components<\/em> (\u0433\u0440\u0443\u043f\u043f\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432), \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 (\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a), \u0430 \u0442\u0430\u043a \u0436\u0435 \u043d\u043e\u0432\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435). \u0422\u0430\u043a \u0436\u0435 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 WIKI \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0440\u0430\u0441\u0442\u0435\u0442 \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0443\u0436\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u0441\u0432\u043e\u0438\u043c \u0434\u043e\u043b\u0433\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Duit, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Flutter \u0438 Dart, \u043d\u043e \u0438 Express (node js) \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u0430\u0439\u0430\u0443\u0442\u0430 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438  Express (\u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u044b).<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0\" id=\"\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430\"><\/a><\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043d\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u043e\u0432\u043e\u0433\u043e flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Express. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043e\u0449\u0443\u0442\u0438\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Typescript, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f node js, \u0432 \u043d\u0430\u0448\u0435\u043c \u0434\u0435\u043c\u043e-\u0431\u0435\u043a\u0435\u043d\u0434\u0435 \u043c\u044b \u0442\u0430\u043a \u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u044b \u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<h4>Flutter<\/h4>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u0447 Duit, \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>dio &#8212; http-\u043a\u043b\u0438\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>go_router &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>flutter_svg &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f SVG<\/p>\n<\/li>\n<li>\n<p>flutter_duit &#8212; SDUI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/p>\n<\/li>\n<li>\n<p>duit_kernel &#8212; \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c flutter_duit, \u043f\u0440\u044f\u043c\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 (\u0441\u043c. \u043d\u0438\u0436\u0435)<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0447\u0438\u0442\u0430\u044e \u043d\u0443\u0436\u043d\u044b\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c duit_kernel. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043e\u0431\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c Duit \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u043e\u043c \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u041d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 &#8212; \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441 <em>DuitRegistry<\/em>. \u0415\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0446\u0435\u043b\u044c &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0431\u0430\u043d\u043d\u0435\u0440\u044b, \u0447\u0435\u043d\u0434\u0436\u043b\u043e\u0433\u0438 \u0438 \u0442\u0434), \u0442\u043e \u0432\u0430\u043c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c duit_kernel. \u0427\u0442\u043e \u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u043e \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h3>Backend<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0433\u043e Express, Typescript \u0438 \u0442\u0434 &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/duit_js\" rel=\"noopener noreferrer nofollow\">duit_js<\/a>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F\" id=\"\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\"><\/a><\/p>\n<h2>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430<\/h2>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e. \u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043c \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u043a\u0435\u0439\u0441 \u0438\u043b\u0438 \u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Duit \u043c\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u0438\u0448\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0435\u0433\u043e \u0440\u043e\u043b\u044c Host-View.<\/p>\n<h4>Flutter <\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448 \u044d\u043a\u0440\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Duit<\/p>\n<pre><code class=\"dart\">import \"package:flutter\/material.dart\"; import \"package:flutter_duit\/flutter_duit.dart\";  \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 StatefulWidget \/\/\u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 class DuitScreen extends StatefulWidget {   final String path;    const DuitScreen({     super.key,     \/\/\u042d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 path     \/\/\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     this.path = \"\/main\",   });    @override   State&lt;DuitScreen> createState() => _DuitScreenState(); }  class _DuitScreenState extends State&lt;DuitScreen> {   \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 DuitDriver   late final DuitDriver _driver;    @override   void initState() {     \/\/\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c DuitDriver     _driver = DuitDriver(       widget.path,       \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f       \/\/\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTTP \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f       \/\/\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430       transportOptions: HttpTransportOptions(         \/\/\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430         baseUrl: \"http:\/\/localhost:8999\",         defaultHeaders: {           \"Content-Type\": \"application\/json\",         },       ),     );     super.initState();   }    @override   void dispose() {     \/\/\u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430     _driver.dispose();     super.dispose();   }    @override   Widget build(BuildContext context) {     \/\/\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c DuitViewHost \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 DuitDriver     return DuitViewHost(       driver: _driver,       context: context,       placeholder: const CircularProgressIndicator(),     );   } } <\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u0434\u0435. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0430\u0448 \u044d\u043a\u0440\u0430\u043d, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u0440\u043e\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e). \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 State, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 dispose. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 build \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>DuitViewHost<\/code> &#8212; \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 (\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043b\u0430\u0439\u0430\u0443\u0442\u0430, \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443). \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043d\u043e \u0441 \u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0449\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0440\u043e\u0443\u0442\u0435\u0440<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart'; import 'package:go_router\/go_router.dart';  import 'duit_screen.dart';  final router = GoRouter(   initialLocation: \"\/duit\",   routes: [     ShellRoute(         routes: [           GoRoute(             path: '\/duit',             builder: (context, state) {               final path = state.extra as String?;               return DuitScreen(                 path: path,               );             },           ),         ],         builder: (context, state, child) {           return Scaffold(             body: SafeArea(               child: child,             ),           );         }),   ], ); <\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart';  import 'navigation\/router.dart';  void main() {   runApp(const MyApp()); }  class MyApp extends StatelessWidget {   const MyApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp.router(       routerConfig: router,     );   } } <\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0442\u0430\u043f\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438  &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u043d\u0430 \u043e\u0442\u043a\u0443\u043f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>ExternalEventHandler<\/code><em>. <\/em>\u041a\u043b\u0430\u0441\u0441, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 2 \u0432\u0435\u0449\u0438: \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a. <\/p>\n<pre><code class=\"dart\">class _Handler implements ExternalEventHandler {   @override   FutureOr&lt;void> handleNavigation(     BuildContext context,     String path,     Object? extra,   ) {     final map = extra as Map&lt;String, dynamic>;     final duitPath = map[\"path\"] as String;     context.push(path, extra: duitPath);   }    @override   FutureOr&lt;void> handleOpenUrl(String url) {     \/\/ TODO: implement handleOpenUrl     throw UnimplementedError();   } }  ***    @override   void initState() {     \/\/\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c DuitDriver     _driver = DuitDriver(       widget.path,       \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 _Handler \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0434\u0440\u0430\u0439\u0432\u0435\u0440       + eventHandler: _Handler(),       \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f       \/\/\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTTP \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f       \/\/\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430       transportOptions: HttpTransportOptions(         \/\/\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430         baseUrl: \"http:\/\/localhost:8999\",         defaultHeaders: {           \"Content-Type\": \"application\/json\",         },       ),     );     super.initState();   } <\/code><\/pre>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0439 \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0431\u0435\u043a\u0435\u043d\u0434\u0443.<\/p>\n<h4>Backend<\/h4>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0436\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u0437\u043e\u0440\u0443 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f UI \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0435\u043a\u0435\u043d\u0434\u0430. <\/p>\n<pre><code class=\"typescript\">\/\/\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440 const app = express(); const port = 8999;  app.use(router); app.use(bodyParser.json());  app.listen(port, () => {   console.log(`[server]: Server is running at http:\/\/localhost:${port}`); });<\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u044d\u043a\u0440\u0430\u043d\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: <em>\/main<\/em> \u0438 <em>\/cart<\/em>. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 &#171;\u043a\u043e\u0440\u0437\u0438\u043d\u0443&#187;. \u0410 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u0433\u0434\u0435 \u043e\u043d \u0441\u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. <\/p>\n<pre><code class=\"typescript\">import { Router } from \"express\"; import { MainScreen } from \".\/views\/screens\/main\"; import { CartScreen } from \".\/views\/screens\/cart\";  export const router = Router();  router.get(\"\/main\", (_, res) => {     res.status(200).send(MainScreen()) })  router.get(\"\/cart\", (_, res) => {     res.status(200).send(CartScreen()) })<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0434\u0435 \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0445, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e. <\/p>\n<pre><code class=\"typescript\">import { DuitView, SingleChildScrollView } from \"duit_js\";  export function MainScreen () {     const builder = DuitView.builder();      const root = SingleChildScrollView({         attributes: {},     });      builder.rootFrom(root);      return builder.build(); }<\/code><\/pre>\n<p>\u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u0440\u043e\u0441\u0442 \u0438 \u043f\u043e\u043d\u044f\u0442\u0435\u043d. \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>DuitView.builder()<\/code> \u0438 \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0438\u043f\u0430 <code>UiBuilder<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e JSON-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0435\u0433\u043e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0442\u043e\u0434\u044b. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0440\u0443\u0442\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0448\u0435\u0433\u043e JSON \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e \u0440\u0443\u0442 \u0432 \u0431\u0438\u043b\u0434\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <code>rootFrom<\/code> . \u0412 \u043a\u043e\u043d\u0446\u0435 \u043c\u044b \u0431\u0438\u043b\u0434\u0438\u043c \u043d\u0430\u0448\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 UI \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448 UI \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043a\u0443\u0434\u043d\u043e \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043c\u0441\u044f \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c \u0441\u0442\u0430\u0442\u044c\u0438, \u0433\u0434\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B\" id=\"\u0432\u0438\u0434\u0436\u0435\u0442\u044b\"><\/a><\/p>\n<h2>Custom widgets &#8212; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 SVG<\/h2>\n<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Duit \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0435\u0433\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438, \u043d\u043e \u0432\u0441\u0435\u0445 \u0438\u0445 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043e\u0434\u043d\u043e \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e &#8212; \u043e\u043d\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Flutter. \u0422\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0435 \u0442\u044f\u043d\u0443\u0442\u044c \u0438\u0445 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>\u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0432\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 flutter \u0438 \u0431\u0435\u043a\u0435\u043d\u0434\u0430). \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 SVG  \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/pub.dev\/packages\/flutter_svg\" rel=\"noopener noreferrer nofollow\">flutter_svg<\/a> \u0432 Duit.<\/p>\n<h3>Backend<\/h3>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0437\u0431\u043e\u0440 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u0430\u044f. Duit \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440 3 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430: <code>CustomTreeElement<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (Checkbox, Text), <code>CustomSingleChildWidget<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (Center, SizedBox) \u0438 <code>CustomMultiChildWidget<\/code> \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Svg \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 &#171;\u0434\u0435\u0442\u0435\u0439&#187;, \u0442\u043e \u043c\u044b, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043a\u043b\u0430\u0441\u0441 <code>SvgWidget<\/code>, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 <code>CustomTreeElement.<\/code><\/p>\n<pre><code class=\"typescript\">interface SvgAttributes {     width?: number;     height?: number;     content: string; }  class SvgWidget extends CustomTreeElement&lt;SvgAttributes> {     constructor(attrs: SvgAttributes, tag: string, id?: string) {        super(attrs, tag, id, undefined, false);     } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0442\u0430\u043b\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>SvgAttributes &#8212; \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 flutter \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Typescript, \u0442\u043e \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>tag <\/strong>\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 flutter \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0422\u0435\u0433 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432 \u0434\u043b\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0432 \u043a\u043e\u0434\u0435.<\/p>\n<pre><code class=\"typescript\">const Svg = (attributes: SvgAttributes, id?: string) => {     return new SvgWidget(attributes, \"svg\", id); }<\/code><\/pre>\n<h4>Flutter<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0448\u0430\u0433\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 Duit, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 JSON \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u044b Flutter.<\/p>\n<ul>\n<li>\n<p>\u041f\u0430\u0440\u0441\u0438\u043d\u0433 JSON. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c duit-\u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0434\u043b\u044f \u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 (\u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438). \u0417\u0430\u0442\u0435\u043c \u044d\u0442\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e JSON.<\/p>\n<\/li>\n<li>\n<p>\u0411\u0438\u043b\u0434. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430 \u0435\u0435 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0438\u0434\u0436\u0435\u0442 Flutter, \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>(Optional) \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u044f\u0442\u044b\u0439 duit-\u0432\u0438\u0434\u0436\u0435\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>controlled=true<\/code>, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0438 \u0438\u0445 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b &#171;\u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430&#187; duit-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u043e\u043c\u0435\u043d\u044b.<\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u043e\u043f\u0438\u0448\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u043e\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430.<\/p>\n<pre><code class=\"dart\">class SvgWidgetAttributes implements DuitAttributes&lt;SvgWidgetAttributes> {   final String content;   final double? width, height;    SvgWidgetAttributes({     required this.content,     this.height,     this.width,   });    static SvgWidgetAttributes fromJson(Map&lt;String, dynamic> json) {     final w = json[\"width\"] as num?;     final h = json[\"height\"] as num?;     return SvgWidgetAttributes(       content: json[\"content\"] ?? \"\",       height: w?.toDouble(),       width: h?.toDouble(),     );   }    @override   SvgWidgetAttributes copyWith(other) {     return SvgWidgetAttributes(       content: other.content,       height: other.height ?? height,       width: other.width ?? width,     );   } }<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441. \u041e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>DuitAttributes<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>copyWith<\/code>. \u041e\u043d \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u0449\u0435\u043f\u0440\u0438\u043d\u044f\u0442\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 (\u043a\u043e\u0433\u0434\u0430 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e nullable \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u043b\u044f\u043c \u043a\u043b\u0430\u0441\u0441\u0430). \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0442\u0438\u043f\u0430 <code>SvgWidgetAttributes<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043f\u0438\u044e \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 <code>fromJson<\/code> \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u041d\u043e \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <strong>tag<\/strong> \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c \u0441 \u0442\u0435\u0433\u043e\u043c \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <strong>type<\/strong> \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a <code>\"Custom\".<\/code><\/p>\n<pre><code class=\"dart\">final class SvgWidget extends DuitElement {      SvgWidget({     required super.id,     required super.attributes,     required super.viewController,     required super.controlled,   }) : super(           type: \"Custom\",           tag: \"svg\",         ); }<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043c\u0430\u043f\u043f\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u0442\u0430\u043f\u0430\u0445 \u0435\u0435 &#171;\u0436\u0438\u0437\u043d\u0438&#187;.<\/p>\n<pre><code class=\"dart\">DuitAttributes svgAttributesMapper(   String type,   Map&lt;String, dynamic>? json, ) {   return SvgWidgetAttributes.fromJson(json ?? {}); }  Widget svgRenderer(TreeElement model) {   final data = model.attributes?.payload as SvgWidgetAttributes?;   return Text(data?.content ?? \"svg\"); }  DuitElement svgModelMapper(   String id,   bool controlled,   ViewAttributeWrapper attributes,   UIElementController? controller, ) {   return SvgWidget(     id: id,     attributes: attributes,     viewController: controller,     controlled: controlled,   ); }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<ul>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>svgAttributesMapper<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u043c\u0430\u043f\u043f\u0438\u043d\u0433 JSON, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0430 \u043a\u043b\u0430\u0441\u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u043d\u0435\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 fromJson, \u043d\u043e \u043f\u0430\u0440\u0441\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438 \u0432 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>svgRenderer<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u043d\u0430\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 (\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432) \u0438 \u0441\u043b\u0443\u0436\u0438\u0442 \u043c\u0435\u0441\u0442\u043e\u043c, \u0433\u0434\u0435, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, &#171;\u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u044c\u044e\u0445\u0443&#187;. <\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>svgModelMapper<\/code> \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0438 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0435 \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0444\u0443\u043a\u043d\u0446\u0438\u0438 <code>svgRenderer<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0448\u0430\u0433 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442  &#8212; \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f.<\/p>\n<pre><code class=\"dart\">void main() async {   WidgetsFlutterBinding.ensureInitialized();   DuitRegistry.register(     \"svg\",     svgModelMapper,     svgRenderer,     svgAttributesMapper,   );   runApp(const MyApp()); }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u0430\u0441\u0441 <code>DuitRegistry<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u043e\u0432\/\u0445\u043e\u0441\u0442-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u043d\u0438\u043c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0432\u044b\u0448\u0435 \u0433\u0440\u0443\u043f\u043f\u0443 \u043c\u0430\u043f\u043f\u0435\u0440\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 <code>register<\/code> \u0438 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0435\u0433 \u0432 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043c\u044b \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442! \u0415\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 Duit. <\/p>\n<p>\u041c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e UI. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441\u0440\u0430\u0437\u0443 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B\" id=\"\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\"><\/a><\/p>\n<h2>Components &#8212; \u0432\u043f\u0438\u0445\u043d\u0443\u0442\u044c \u043d\u0435\u0432\u043f\u0438\u0445\u0443\u0435\u043c\u043e\u0435<\/h2>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e UI \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 JSON, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0443\u043c\u043e\u043b\u0438\u043c\u043e \u0440\u0430\u0441\u0442\u0438, \u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u042d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0435\u0443\u043c\u043e\u043b\u0438\u043c\u043e \u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0431\u0449\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0411\u043e\u043b\u044c\u0448\u043e\u0439 JSON -> \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0441\u0435\u0442\u0438 -> \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 -> \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 <a href=\"https:\/\/youtu.be\/1jFm7upknIg?si=ovYjM_BbXmExb6XU\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e<\/a> \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f \u0413\u0435\u043d\u043d\u0430\u0434\u0438\u044f \u0415\u0432\u0441\u0442\u0440\u0430\u0442\u043e\u0432\u0430 \u043f\u0440\u043e SUI, Flutter \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 \u043e\u0442 \u042f\u043d\u0434\u0435\u043a\u0441\u0430. \u042f <em>\u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u043b\u0441\u044f<\/em> \u044d\u0442\u043e\u0439 \u0438\u0434\u0435\u0435\u0439 \u0438, <em>\u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438 \u0435\u0435 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0432<\/em>, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0441\u0432\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 Duit (<strong>Components) <\/strong>&#8212; \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u0430\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u043d\u044b\u0445 \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c JSON.<\/p>\n<h4>Backend<\/h4>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u043a\u0435\u043d\u0434-\u0430\u0434\u0430\u043f\u0442\u0435\u0440\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>ComponentDescription<\/code> \u0438 <code>Component<\/code>, \u043d\u043e \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443. \u0421\u043f\u0435\u0440\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<pre><code class=\"typescript\">export const ItemDescription = ComponentDescription(     \"item\",     Container({         attributes: {             decoration: {                 color: \"#ffffff\",                 borderRadius: 12,             },             refs: [{                 attributeKey: 'decoration',                 objectKey: \"selectionColor\"             }]         }     }).addChild(         Padding({             attributes: {                 padding: 16,             }         }).addChild(DecoratedBox({             attributes: {                 decoration: {                     borderRadius: 12,                 }             }         })).addChild(             Row({                 attributes: {                     mainAxisAlignment: \"spaceBetween\",                 }             }).addChildren([                 DecoratedBox({                     attributes: {                         decoration: {                             borderRadius: 16,                             border: {                                 color: \"#f5c5c1\",                                 width: 1.5,                             }                         }                     }                 }).addChild(                     Image({                         attributes: {                             type: \"network\",                             src: \"\",                             width: 64,                             height: 64,                             fit: 'fill',                             refs: [                                 {                                     attributeKey: 'src',                                     objectKey: \"image\"                                 }                             ]                         }                     })                 ),                 SizedBox({ attributes: { width: 24 } }),                 Column({                     attributes: {                         mainAxisAlignment: \"spaceEvenly\"                     }                 }).addChildren([                     Row({                         attributes: {                             mainAxisSize: 'max',                         }                     }).addChildren([                         TextBold(\"\", [                             {                                 attributeKey: 'data',                                 objectKey: \"price\"                             }                         ]),                         SizedBox({ attributes: { width: 24 } }),                         Text({                             attributes: {                                 data: \"\",                                 refs: [                                     {                                         attributeKey: 'data',                                         objectKey: \"discount\"                                     }                                 ]                             }                         }),                     ]),                     TextBold(\"\", [                         {                             attributeKey: 'data',                             objectKey: \"name\"                         }                     ]),                     Text({                         attributes: {                             data: \"\",                             maxLines: 3,                             overflow: \"ellipsis\",                             refs: [                                 {                                     attributeKey: 'data',                                     objectKey: \"description\"                                 }                             ]                         }                     })                 ]),                 SizedBox({ attributes: { width: 24 } }),                 Column({ attributes: {} }).addChildren([                     Svg({                         height: 24,                         width: 24,                         content: \"svg here\"                     }),                 ])              ])         )     ), )<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0430\u0436\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430:<\/p>\n<ul>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>ComponentDescription<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430: \u0442\u0435\u0433 (\u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438) \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043b\u0430\u0439\u0430\u0443\u0442\u0430 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0433\u0440\u0443\u043f\u043f\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432).<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0441\u043e\u0431\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432,  \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>refs<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u044e\u0447\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 (<em>attributeKey<\/em>) \u0438 \u043a\u043b\u044e\u0447\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (<em>objectKey<\/em>). <\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0438\u0448\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0431\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">export interface ItemData {     name: string     description: string     price: string     discount: string     image: string }<\/code><\/pre>\n<p>\u0418 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b!<\/p>\n<pre><code class=\"typescript\">export function MainScreen() {     const builder = DuitView.builder();      const col = Column({attributes: {}});      const widgets: DuitElement[] = [];      componentsData.forEach((data, index) => {         const widget = GestureDetector({             attributes: {                 behavior: \"opaque\",                 onTap: new HttpAction(`\/add\/${index}`, { method: \"POST\" }),             }         }).addChild(Component({             id: `item${index}`,             data: data,             tag: ItemDescription.tag,         }));          widgets.push(widget);         widgets.push(SizedBox({ attributes: { height: 16 } }))     })      col.addChildren([         ...widgets,         ElevatedButton({             attributes: {}, action: new LocalExecutedAction(CreateNavigationEvent(\"\/duit\", { path: \"\/cart\" }))         }).addChild(Text({ attributes: { data: \"\u041d\u0430\u0436\u043c\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443\" } })),     ])      const res = SingleChildScrollView({         attributes: {             padding: 16,         },     }).addChild(col);      builder.rootFrom(res);      return builder.build(); }<\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>Component<\/code> \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0437 \u0442\u0435\u0433\u0430 \u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442 (\u0432\u044b\u0448\u0435 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <em>ItemData<\/em>).<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 JSON. \u0412\u043e\u0442 \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u043c\u043e\u043d\u0441\u0442\u0440\u0443\u043e\u0437\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432:<\/p>\n<pre><code class=\"json\">    {       \"controlled\": true,       \"action\": null,       \"id\": \"1411d6d1-fd38-497a-8eb3-bbdaf7207b54\",       \"type\": \"Component\",       \"data\": {         \"name\": \"\u0422\u043e\u0432\u0430\u0440\",         \"description\": \"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u043e\u0432\u0430\u0440\u0430\",         \"price\": \"$ 150\",         \"discount\": \"4%\",         \"image\": \"https:\/\/some_image_url\",         \"isSelected\": false,         \"selectedColor\": {           \"borderRadius\": 12,           \"color\": \"#DCDCDC\"         }       },       \"tag\": \"item\"     }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e). \u041d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f?<\/p>\n<ul>\n<li>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432 \u043b\u0430\u0439\u0430\u0443\u0442\u0435 \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u044b\u043b\u0438 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u044b \u043e\u0448\u0438\u0431\u043a\u0438, \u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0446\u0435\u043d\u043d\u0443\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u044b\u043a\u0430\u0442\u0438\u0442\u044c \u0444\u0438\u043a\u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435. \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043b\u043e\u0432\u0438\u0442\u044c \u043b\u0438\u0446\u043e\u043c \u0432 \u043e\u0442\u0432\u0435\u0442 JSON \u0438\u0437 \u0441\u043e\u0442\u0435\u043d \u043a\u043b\u044e\u0447\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0441\u0430\u043c\u043e\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0438\u0434\u0435\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u0444\u043b\u0430\u0433\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u0439\u043c\u0441\u0442\u0435\u043c\u043f). <\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u0440\u043e\u0443\u0442\u0435\u0440 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u0443\u0442\u044c. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043a \u043d\u0435\u043c\u0443 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f.<\/p>\n<pre><code class=\"typescript\">router.get(\"\/components\", (_, res) => {     res.status(200).send([ItemDescription]) })<\/code><\/pre>\n<h4>Flutter<\/h4>\n<p>\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Flutter \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0441 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043c\u043e\u0433\u0443\u0442 \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u0430\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>\u041d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438\u0448\u044c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 <code>DuitRegistry<\/code>, \u043f\u0440\u0438\u0447\u0435\u043c \u0441\u0440\u0430\u0437\u0443 &#171;\u043f\u0430\u0447\u043a\u043e\u0439&#187;<\/p>\n<pre><code class=\"dart\">DuitRegistry.registerComponents([...res.data]);<\/code><\/pre>\n<p>\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435 \u044d\u043d\u0434\u043f\u0440\u043e\u0438\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 \u0434\u0435\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0437\u0430\u0442\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82\" id=\"\u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\"><\/a><\/p>\n<h2>Transport extension &#8212; \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c http \u043d\u0430 dio<\/h2>\n<p>\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Duit \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0435\u0442\u044c\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/pub.dev\/packages\/http\" rel=\"noopener noreferrer nofollow\">http<\/a>. \u041d\u043e \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0446\u0435\u043b\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u0431\u0430\u0437\u0435 \u0438\u043d\u044b\u0445 http-\u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 retry \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0438 \u0442.\u0434. \u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u044d\u0442\u0438\u0445 \u0432\u0435\u0449\u0435\u0439 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Duit \u0438 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p>\u041f\u0430\u043a\u0435\u0442 http \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>Transport<\/code>. \u0410 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c \u0430\u043a\u0442\u043e\u0440\u043e\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 \u043d\u0430\u0448\u0435\u0433\u043e UI. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0432\u044b\u0431\u0440\u0430\u043b dio, \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c, \u043a\u0430\u043a \u0438 http.<\/p>\n<pre><code class=\"dart\">class DioTransportOptions extends TransportOptions {   @override   String? baseUrl;    @override   Map&lt;String, String> defaultHeaders;    @override   String type = \"dio\";    final Dio dio;    DioTransportOptions({     required this.baseUrl,     required this.dio,     this.defaultHeaders = const {},   }); }<\/code><\/pre>\n<p>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043b\u0443\u0436\u0430\u0449\u0438\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430. \u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (baseUrl, type, defaultHeader), \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<pre><code class=\"dart\">class DioTransport extends Transport {   final DioTransportOptions options;    DioTransport(super.url, this.options);    @override   Future&lt;Map&lt;String, dynamic>?> connect() async {     final res = await options.dio.get(url);     return jsonDecode(res.data) as Map&lt;String, dynamic>;   }    @override   void dispose() {     \/\/ TODO: \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f   }    @override   FutureOr&lt;Map&lt;String, dynamic>?> execute(     ServerAction action,     Map&lt;String, dynamic> payload,   ) async {     String method = switch (action.meta) {       null => \"GET\",       HttpActionMetainfo() => action.meta!.method,     };      var urlString = action.event;      if (method == \"GET\" &amp;&amp; payload.isNotEmpty) {       urlString += \"?\";       payload.forEach((key, value) {         urlString += \"$key=$value\";       });     }      final res = await options.dio.request(       urlString,       options: Options(         method: method,       ),       data: method == \"GET\" ? null : payload,     );     return jsonDecode(res.data) as Map&lt;String, dynamic>;   } }<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043a\u043e\u0434 \u0432\u044b\u0448\u0435:<\/p>\n<ul>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>connect<\/code> \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>execute<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430  \u0432\u044b\u0437\u043e\u0432\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430\u0431\u043e\u0440 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u044f \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<pre><code class=\"dart\">extension DioTransportExtension on UIDriver {   void applyDioTransportExtension() {     transport = DioTransport(       source,       transportOptions as DioTransportOptions,     );   } }<\/code><\/pre>\n<p>\u041a\u043e\u0434 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 DioTransport, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"https:\/\/github.com\/lesleysin\/duit_kernel\/blob\/main\/lib\/src\/ui_driver.dart\" rel=\"noopener noreferrer nofollow\">UIDriver<\/a> (DuitDriver), \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 transport.<\/p>\n<pre><code class=\"dart\">  @override   void initState() {     _driver = DuitDriver(       widget.path ?? \"\/main\",       eventHandler: _Handler(),       transportOptions: DioTransportOptions(         \/\/\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430         baseUrl: \"http:\/\/localhost:8999\",         defaultHeaders: {           \"Content-Type\": \"application\/json\",         },         + dio: dio,       ),     + )..applyDioTransportExtension(); \/\/\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f     super.initState();   }<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044d\u0442\u043e\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u043f\u0430\u043a\u0435\u0442\u0435 dio.<\/p>\n<p><a class=\"anchor\" name=\"%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F\" id=\"\u0441\u043e\u0431\u044b\u0442\u0438\u044f\"><\/a><\/p>\n<h2>Actions &amp; Events &#8212; \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/h2>\n<p>\u041c\u044b \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u0435-\u0447\u0442\u043e \u0432\u0430\u0436\u043d\u043e\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Duit &#8212; \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f UI, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0445.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e Duit \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e action\/event. \u0418 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0432\u0435\u0449\u0435\u0439:<\/p>\n<ul>\n<li>\n<p><strong>Action<\/strong> (\u0434\u0430\u043b\u0435\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u044d\u043a\u0448\u0435\u043d\u044b) &#8212; \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u0430\u044f \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f \u043a \u0432\u0438\u0434\u0436\u0435\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 (\u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b, \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430). \u041e\u043d\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u043e, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043d\u0430\u0434\u043e \u043b\u0438 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u0430-\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442  url \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u0442.\u0434. \u042d\u043a\u0448\u0435\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0438\u0434\u043e\u0432 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>Events<\/strong> (\u0434\u0430\u043b\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0438\u0432\u0435\u043d\u0442\u044b) &#8212; \u043c\u043e\u0434\u0435\u043b\u044c, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0441\u043e\u0431\u043e\u0439 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c (UpdateEvent), \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c layout (LayoutUpdateEvent), \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (NavigationEvent) \u0438\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0441\u0441\u044b\u043b\u043a\u0443 (OpenUrlEvent). \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u043e\u043c \u043a\u0430\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0442\u0430\u043a \u0438 \u0431\u044b\u0442\u044c &#171;\u0437\u0430\u043f\u0443\u0448\u0435\u043d\u043e&#187; \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f websockets).  \u0422\u0430\u043a\u0436\u0435 \u0438\u0432\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u044d\u043a\u0448\u0435\u043d\u0443 &#8212; \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 <code>LocalExecutedAction<\/code> . <\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f: \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0443 (http, ws) \u0438\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043e\u0434\u0435\u043b\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0443\u0436\u0435 &#171;\u0437\u0430\u0448\u0438\u0442&#187; \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442 \u044f\u0432\u043d\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043a\u043e\u0434\u0430, \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u0432\u044b\u0448\u0435, \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043d\u043e \u043c\u044b \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u043b\u0438 \u043d\u0430 \u043d\u0438\u0445 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<pre><code class=\"typescript\">        ElevatedButton({             attributes: {}, action: new LocalExecutedAction(                 CreateNavigationEvent(\"\/duit\",                     {                         path: \"\/cart\"                     }                 )             )         }).addChild(Text({ attributes: { data: \"\u041d\u0430\u0436\u043c\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0443\" } })),<\/code><\/pre>\n<p>\u041d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 MainScreen \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0438 \u043a \u043d\u0435\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 LocalExecutedAction. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u0432\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0431\u0435\u0437 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u0431\u0435\u043a\u0435\u043d\u0434\u0443.<\/p>\n<pre><code class=\"typescript\">GestureDetector({     attributes: {         behavior: \"opaque\",         onTap: new HttpAction(`\/add\/${index}`, { method: \"POST\" }),     } }).addChild(     Component({         id: `item${index}`,         data: data,         tag: ItemDescription.tag,     }) );<\/code><\/pre>\n<p>\u041d\u0430 \u0442\u043e\u043c \u0436\u0435 \u044d\u043a\u0440\u0430\u043d\u0435 MainScreen \u043c\u044b \u043c\u0430\u043f\u0438\u043b\u0438 \u043d\u0430\u0448\u0438 \u043c\u043e\u043a-\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0430\u0448\u0438 \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044f \u0438\u0445 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442 GestureDetector. \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>onTap<\/code> . <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 HttpAction &#8212; \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0435 \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 http \u0438 \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0432\u0438\u0434\u043e\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u042d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u044f\u0434 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>Path &#8212; \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0437\u0430\u043f\u0440\u043e\u0441. <\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u0430 &#8212; \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u043c, \u043c\u044b \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c POST-\u0437\u0430\u043f\u0440\u043e\u0441 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e GET).<\/p>\n<\/li>\n<li>\n<p>ActionDependencies &#8212; \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434 (\u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c, \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438 \u0440\u0430\u0434\u0438\u043e-\u0431\u0430\u0442\u043e\u043d\u044b) \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u0440\u044f\u0434 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c &#171;\u0441\u043e\u0431\u0440\u0430\u0442\u044c&#187; \u0438\u0437 \u043d\u0438\u0445 \u0447\u0435\u0439\u043d\u0434\u0436-\u0441\u0435\u0442. <\/p>\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u044e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438, \u043d\u0430 \u043d\u0435\u0439 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e FormField (&#171;\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430&#187; \u0438 &#171;\u041e\u043f\u0438\u0448\u0438\u0442\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443&#187;) , \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438 \u043a\u043d\u043e\u043f\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 (\u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445). <\/p>\n<p>FormField \u0438\u043c\u0435\u044e \u0441\u0432\u043e\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 ID, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a \u043d\u0438\u043c \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u044d\u043a\u0448\u0435\u043d \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">const action = new HttpAction(`\/endpoint`, {     method: \"POST\" }, [     {         id: \"email_field\",         target: \"email\"     },     {         id: \"problem_field\",         target: \"problem_description\"     } ])<\/code><\/pre>\n<p>\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c ID \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>target<\/code> , \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u043e\u043c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 body http-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 (\u043b\u0438\u0431\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 query-params, \u0435\u0441\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 GET).<\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0430, \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u043e ID \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442 \u043a\u043b\u0430\u0441\u0441, \u0433\u0434\u0435 \u043e\u043d \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434, \u0433\u0434\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439 body:<\/p>\n<pre><code class=\"json\">{     \"email\": \"somemail@gmail.com\",     \"problem_description\": \"Lorem Ipsum\" }<\/code><\/pre>\n<p>\u041d\u043e \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0434\u043b\u044f GestureDetector! \u042d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u0431\u043e\u0440 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 \u0440\u043e\u0443\u0442\u0435\u0440\u0435:<\/p>\n<pre><code class=\"typescript\">router.post(\"\/add\/:id\", (req, res) => {     const numid = Number(req.params.id);     const isSelected = componentsData[numid].isSelected;     componentsData[numid].isSelected = !isSelected;     const itemData = { ...componentsData[numid] };     itemData.selectionColor = {         borderRadius: 12,         color: !isSelected ? \"#88f564\" : \"#DCDCDC\"     }     const keyId = \"item\" + numid;     const payload = {};     payload[keyId] = itemData;     const update = new UpdateEvent(payload);     res.status(200).send(JSON.stringify(update)) })<\/code><\/pre>\n<p>\u0410\u043a\u0442\u0438\u0432\u043d\u043e \u0441\u0438\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443: \u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u043f\u0443 \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0433\u0434\u0435 \u043a\u043b\u044e\u0447 \u044d\u0442\u043e ID \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 &#8212; \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0436\u0430\u0432 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430, \u043c\u044b \u043f\u043e\u043a\u0440\u0430\u0441\u0438\u043c \u0435\u0433\u043e \u0432 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0446\u0432\u0435\u0442, \u0430 \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443, \u0442\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0441 \u0438\u043c\u043f\u0440\u043e\u0432\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 &#171;\u043a\u043e\u0440\u0437\u0438\u043d\u043e\u0439&#187;, \u0433\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u0435.<\/p>\n<p><a class=\"anchor\" name=\"%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/7a8\/417\/ef1\/7a8417ef121ee688a59ae69add06c641.jpg\" alt=\"\u041c\u043e\u0435 \u043b\u0438\u0446\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e\u0442 \u043e\u043f\u0443\u0441\" title=\"\u041c\u043e\u0435 \u043b\u0438\u0446\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e\u0442 \u043e\u043f\u0443\u0441\" width=\"741\" height=\"800\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7a8\/417\/ef1\/7a8417ef121ee688a59ae69add06c641.jpg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption>\u041c\u043e\u0435 \u043b\u0438\u0446\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u043f\u0438\u0441\u0430\u043b \u044d\u0442\u043e\u0442 \u043e\u043f\u0443\u0441<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u043e\u0439. \u0417\u0430\u043c\u0435\u0442\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u044f \u043e\u0436\u0438\u0434\u0430\u043b. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438, \u043d\u0430 \u0431\u0430\u0437\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Duit. <\/p>\n<p>\u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Duit \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0430\u043b\u043e \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 &#171;\u043e\u0431\u044b\u0447\u043d\u044b\u0445&#187; flutter \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0440\u044f\u0434 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0432 \u0432\u0438\u0434\u0435 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u0438 Duit \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438!<\/p>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/lesleysin\/flutter_duit\" rel=\"noopener noreferrer nofollow\">flutter_duit<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/lesleysin\/duit_js\" rel=\"noopener noreferrer nofollow\">duit_js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pub.dev\/packages\/flutter_svg\" rel=\"noopener noreferrer nofollow\">flutter_svg<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pub.dev\/packages\/dio\" rel=\"noopener noreferrer nofollow\">dio<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/pub.dev\/packages\/go_router\" rel=\"noopener noreferrer nofollow\">go_router<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/lesleysin\/duit_demo_app\" rel=\"noopener noreferrer nofollow\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0434\u0435\u043c\u043e-\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p>\u041c\u043e\u0439 <a href=\"https:\/\/t.me\/boltology_tech\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043d\u0430\u043b<\/a> \u0432 Telegram, \u0442\u0430\u043c \u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0441\u044f \u043a \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 <a href=\"https:\/\/t.me\/mobile_broadcast_news\" rel=\"noopener noreferrer nofollow\">Mobile Broadcast<\/a><\/p>\n<\/li>\n<\/ul>\n<p>P.S. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0432\u0441\u0435\u0445 \u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e, \u043a\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b \u044d\u0442\u043e \u0434\u043e \u043a\u043e\u043d\u0446\u0430!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/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\/articles\/792142\/\"> https:\/\/habr.com\/ru\/articles\/792142\/<\/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>\u0418\u0442\u0430\u043a, \u0437\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a\u0438\u0442\u0430 \u0421\u0438\u043d\u044f\u0432\u0438\u043d, \u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Flutter \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0438 \u0441 React Native. \u041c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u044e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0443 \u0438 \u043d\u0435 \u0431\u043e\u0438\u043c\u0441\u044f \u0441\u043c\u0435\u043b\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u0438 \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0441 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 Duit.<\/p>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<ul>\n<li>\n<p><a href=\"#%D0%BF%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">Custom widgets<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">Components<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BF%D0%BE%D1%80%D1%82\" rel=\"noopener noreferrer nofollow\">Transport extensions<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">Actions &amp; Events<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>18 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2023 \u0433\u043e\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043b\u0441\u044f \u0440\u0435\u043b\u0438\u0437 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 SDUI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"https:\/\/github.com\/lesleysin\/flutter_duit\" rel=\"noopener noreferrer nofollow\">Duit<\/a>. \u041e\u0431 \u044d\u0442\u043e\u043c \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e <a href=\"https:\/\/habr.com\/ru\/articles\/781954\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Duit, \u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u044f\u0445 \u043e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432 \u0438 \u0442\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e. <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f v1.7.0. \u0411\u044b\u043b\u0430 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 (\u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0445 29), \u0430 \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <em>Components<\/em> (\u0433\u0440\u0443\u043f\u043f\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432), \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 (\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f, \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a), \u0430 \u0442\u0430\u043a \u0436\u0435 \u043d\u043e\u0432\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435). \u0422\u0430\u043a \u0436\u0435 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 WIKI \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0440\u0430\u0441\u0442\u0435\u0442 \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0443\u0436\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u0441\u0432\u043e\u0438\u043c \u0434\u043e\u043b\u0433\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Duit, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Flutter \u0438 Dart, \u043d\u043e \u0438 Express (node js) \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u0430\u0439\u0430\u0443\u0442\u0430 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0413\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438  Express (\u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043c\u0438\u0434\u043b\u0432\u0430\u0440\u044b).<\/p>\n<p><a class=\"anchor\" name=\"%D0%BF%D0%BE%D0%B4%D0%B3%D0%BE%D1%82%D0%BE%D0%B2%D0%BA%D0%B0\" id=\"\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430\">\u043e\u0432\u043a\u0430&#187;><\/a><\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u043d\u0430\u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u043e\u0432\u043e\u0433\u043e flutter-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Express. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043e\u0449\u0443\u0442\u0438\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Typescript, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f node js, \u0432 \u043d\u0430\u0448\u0435\u043c \u0434\u0435\u043c\u043e-\u0431\u0435\u043a\u0435\u043d\u0434\u0435 \u043c\u044b \u0442\u0430\u043a \u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u044b \u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u043a \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<h4>Flutter<\/h4>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u0447 Duit, \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>dio &#8212; http-\u043a\u043b\u0438\u0435\u043d\u0442<\/p>\n<\/li>\n<li>\n<p>go_router &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>flutter_svg &#8212; \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f SVG<\/p>\n<\/li>\n<li>\n<p>flutter_duit &#8212; SDUI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a<\/p>\n<\/li>\n<li>\n<p>duit_kernel &#8212; \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c flutter_duit, \u043f\u0440\u044f\u043c\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 (\u0441\u043c. \u043d\u0438\u0436\u0435)<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0447\u0438\u0442\u0430\u044e \u043d\u0443\u0436\u043d\u044b\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c duit_kernel. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043e\u0431\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c Duit \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0443\u0442\u0438 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u043e\u043c \u0432\u0441\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u041d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 &#8212; \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441 <em>DuitRegistry<\/em>. \u0415\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0446\u0435\u043b\u044c &#8212; \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0435 \u0431\u0430\u043d\u043d\u0435\u0440\u044b, \u0447\u0435\u043d\u0434\u0436\u043b\u043e\u0433\u0438 \u0438 \u0442\u0434), \u0442\u043e \u0432\u0430\u043c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c duit_kernel. \u0427\u0442\u043e \u0436\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u043e \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<h3>Backend<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435. \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0430\u043c\u043e\u0433\u043e Express, Typescript \u0438 \u0442\u0434 &#8212; <a href=\"https:\/\/www.npmjs.com\/package\/duit_js\" rel=\"noopener noreferrer nofollow\">duit_js<\/a>.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BD%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D1%8F\" id=\"\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\">\u0430\u0446\u0438\u044f&#187;<\/a><\/p>\n<h2>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430<\/h2>\n<p>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e. \u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043c \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u043a\u0435\u0439\u0441 \u0438\u043b\u0438 \u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Duit \u043c\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u0438\u0448\u044c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0435\u0433\u043e \u0440\u043e\u043b\u044c Host-View.<\/p>\n<h4>Flutter <\/h4>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0448 \u044d\u043a\u0440\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Duit<\/p>\n<pre><code class=\"dart\">import \"package:flutter\/material.dart\"; import \"package:flutter_duit\/flutter_duit.dart\";  \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0441\u044f \u043e\u0442 StatefulWidget \/\/\u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 class DuitScreen extends StatefulWidget {   final String path;    const DuitScreen({     super.key,     \/\/\u042d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 path     \/\/\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     this.path = \"\/main\",   });    @override   State&lt;DuitScreen> createState() => _DuitScreenState(); }  class _DuitScreenState extends State&lt;DuitScreen> {   \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 DuitDriver   late final DuitDriver _driver;    @override   void initState() {     \/\/\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c DuitDriver     _driver = DuitDriver(       widget.path,       \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f       \/\/\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTTP \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f       \/\/\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430       transportOptions: HttpTransportOptions(         \/\/\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430         baseUrl: \"http:\/\/localhost:8999\",         defaultHeaders: {           \"Content-Type\": \"application\/json\",         },       ),     );     super.initState();   }    @override   void dispose() {     \/\/\u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430     _driver.dispose();     super.dispose();   }    @override   Widget build(BuildContext context) {     \/\/\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c DuitViewHost \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 DuitDriver     return DuitViewHost(       driver: _driver,       context: context,       placeholder: const CircularProgressIndicator(),     );   } } <\/code><\/pre>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u0434\u0435. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0430\u0448 \u044d\u043a\u0440\u0430\u043d, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u0440\u043e\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e). \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 State, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 dispose. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 build \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>DuitViewHost<\/code> &#8212; \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 (\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043b\u0430\u0439\u0430\u0443\u0442\u0430, \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443). \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0438 \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043d\u043e \u0441 \u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0449\u0435.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0440\u043e\u0443\u0442\u0435\u0440<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart'; import 'package:go_router\/go_router.dart';  import 'duit_screen.dart';  final router = GoRouter(   initialLocation: \"\/duit\",   routes: [     ShellRoute(         routes: [           GoRoute(             path: '\/duit',             builder: (context, state) {               final path = state.extra as String?;               return DuitScreen(                 path: path,               );             },           ),         ],         builder: (context, state, child) {           return Scaffold(             body: SafeArea(               child: child,             ),           );         }),   ], ); <\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart';  import 'navigation\/router.dart';  void main() {   runApp(const MyApp()); }  class MyApp extends StatelessWidget {   const MyApp({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp.router(       routerConfig: router,     );   } } <\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0442\u0430\u043f\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438  &#8212; \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0431\u0435\u043a\u0435\u043d\u0434\u0435, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u043d\u0430 \u043e\u0442\u043a\u0443\u043f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>ExternalEventHandler<\/code><em>. <\/em>\u041a\u043b\u0430\u0441\u0441, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 2 \u0432\u0435\u0449\u0438: \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a. <\/p>\n<pre><code class=\"dart\">class _Handler implements ExternalEventHandler {   @override   FutureOr&lt;void> handleNavigation(     BuildContext context,     String path,     Object? extra,   ) {     final map = extra as Map&lt;String, dynamic>;     final duitPath = map[\"path\"] as String;     context.push(path, extra: duitPath);   }    @override   FutureOr&lt;void> handleOpenUrl(String url) {     \/\/ TODO: implement handleOpenUrl     throw UnimplementedError();   } }  ***    @override   void initState() {     \/\/\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c DuitDriver     _driver = DuitDriver(       widget.path,       \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0430\u043d\u0441 _Handler \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0434\u0440\u0430\u0439\u0432\u0435\u0440       + eventHandler: _Handler(),       \/\/\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f       \/\/\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HTTP \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f       \/\/\u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430       transportOptions: HttpTransportOptions(         \/\/\u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0430         baseUrl: \"http:\/\/localhost:8999\",         defaultHeaders: {           \"Content-Type\": \"application\/json\",         },       ),     );     super.initState();   } <\/code><\/pre>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0439 \u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0431\u0435\u043a\u0435\u043d\u0434\u0443.<\/p>\n<h4>Backend<\/h4>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0436\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u0437\u043e\u0440\u0443 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f UI \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0431\u0435\u043a\u0435\u043d\u0434\u0430. <\/p>\n<pre><code class=\"typescript\">\/\/\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440 const app = express(); const port = 8999;  app.use(router); app.use(bodyParser.json());  app.listen(port, () => {   console.log(`[server]: Server is running at http:\/\/localhost:${port}`); });<\/code><\/pre>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0434\u0432\u0443\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u044d\u043a\u0440\u0430\u043d\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: <em>\/main<\/em> \u0438 <em>\/cart<\/em>. \u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 &#171;\u043a\u043e\u0440\u0437\u0438\u043d\u0443&#187;. \u0410 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u0433\u0434\u0435 \u043e\u043d \u0441\u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. <\/p>\n<pre><code class=\"typescript\">import { Router } from \"express\"; import { MainScreen } from \".\/views\/screens\/main\"; import { CartScreen } from \".\/views\/screens\/cart\";  export const router = Router();  router.get(\"\/main\", (_, res) => {     res.status(200).send(MainScreen()) })  router.get(\"\/cart\", (_, res) => {     res.status(200).send(CartScreen()) })<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0434\u0435 \u0443\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043d\u0438\u0445, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e. <\/p>\n<pre><code class=\"typescript\">import { DuitView, SingleChildScrollView } from \"duit_js\";  export function MainScreen () {     const builder = DuitView.builder();      const root = SingleChildScrollView({<\/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-367609","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/367609","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=367609"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/367609\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=367609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=367609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=367609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}