{"id":324203,"date":"2021-06-02T15:00:41","date_gmt":"2021-06-02T15:00:41","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=324203"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=324203","title":{"rendered":"\u041e\u0441\u043d\u043e\u0432\u044b Flutter \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 (\u0427\u0430\u0441\u0442\u044c III)"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0432\u0441\u0435\u0445 \u0436\u0438\u0432\u0443\u0449\u0438\u0445 \u0432 \u0421\u0438\u0431\u0438\u0440\u0438 \u0441 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435\u043c \u043b\u0435\u0442\u0430!)))<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u043c\u0430 &#8212; \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f.<\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 Flutter, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u044b \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. <\/p>\n<p>\u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0432\u0435\u0441\u044c\u043c\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 use case: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 BottomNavigationBar.<\/p>\n<p>&#8216;\u041d\u0443 \u0447\u0442\u043e \u0436 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0442\u0435\u0440\u044f\u0442\u044c \u043d\u0438 \u043c\u0438\u043d\u0443\u0442\u044b, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c!<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0448 \u043f\u043b\u0430\u043d<\/summary>\n<div class=\"spoiler__content\">\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/en\/post\/560008\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 1<\/a>&nbsp;&#8212; \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/en\/post\/560282\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 2<\/a> &#8212; \u0444\u0430\u0439\u043b pubspec.yaml \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 flutter \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 3 (\u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f) &#8212; BottomNavigationBar \u0438 Navigator;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 4 &#8212; MVC. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 5 &#8212; http \u043f\u0430\u043a\u0435\u0442. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Repository \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u0435\u0440\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0432\u044b\u0432\u043e\u0434 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 6 &#8212; \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0432\u044b\u0432\u043e\u0434 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u0441\u0435\u0442\u043a\u0438, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438\u0437 \u0441\u0435\u0442\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 7 &#8212; \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0439 \u0442\u0435\u043c\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 8 &#8212; \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438;<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<h2>Navigator \u0438 \u0441\u0442\u044d\u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h2>\n<p>Flutter \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 Activity.<\/p>\n<p>\u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Route.<\/p>\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 Navigator:<\/p>\n<pre><code class=\"dart\">\/\/ Navigator.of(context) \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Navigator \/\/ \u0432\u0438\u0434\u0436\u0435\u0442\u0430: NavigatorState, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u043c\u0435\u0435\u0442 push \u0438 pop \u043c\u0435\u0442\u043e\u0434\u044b \/\/ push \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0441\u0442\u0435\u043a\u0430 Navigator \/\/ pop \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0441\u0442\u044d\u043a\u0430 \/\/ MaterialPageRoute \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \/\/ \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 Navigator.of(context).push( \tMaterialPageRoute(builder: (context) =&gt; OurPage()) );<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u044d\u043a Navigator&#8217;a \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u044d\u043a\u0440\u0430\u043d\u0430: \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043d\u0438\u0433 \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u043d\u0438\u0433\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043d\u0438\u0433:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6b0\/7ac\/adc\/6b07acadc21affacc4623a7e54f724bc.png\" width=\"334\" height=\"116\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c  \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043d\u0438\u0433:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/885\/928\/302\/885928302fd8d49b0fdc2c7bd0971144.png\" width=\"223\" height=\"144\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0430 \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u0441\u0442\u044d\u043a\u0430 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u043f\u0438\u0441\u043a\u0443 \u043a\u043d\u0438\u0433.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Back \u0438\u043b\u0438 Up (\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443) \u0438 \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/171\/3fa\/0f2\/1713fa0f2cc2adcea21702dbca159c61.png\" width=\"183\" height=\"82\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>push(route)<\/code>, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c <code>pop()<\/code> \u043c\u0435\u0442\u043e\u0434.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435!<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438<\/h2>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438\u0437 \u0441\u0435\u0440\u0438\u0430\u043b\u0430 My Little Pony \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0430\u043f\u043a\u0435 pages:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/36c\/4b1\/2d7\/36c4b12d758c14c68e9591f591dce0e5.png\" width=\"1393\" height=\"680\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart';  \/\/ \u043a\u043b\u0430\u0441\u0441 \u043f\u043e\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043c\u044f \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 id class Pony {   final int id;   final String name;   final String desc;    Pony(this.id, this.name, this.desc); }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043d\u0438 \/\/ final \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \/\/ \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u0438 ponies \/\/ \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043d\u044f\u0448\u0435\u043a final List&lt;Pony&gt; ponies = [   Pony(       0,       \"Twillight Sparkle\",       \"Twilight Sparkle is the central main character of My Little Pony Friendship is Magic. She is a female unicorn pony who transforms into an Alicorn and becomes a princess in Magical Mystery Cure\"   ),   Pony(       1,       \"Starlight Glimmer\",       \"Starlight Glimmer is a female unicorn pony and recurring character, initially an antagonist but later a protagonist, in the series. She first possibly appears in My Little Pony: Friends Forever Issue and first explicitly appears in the season five premiere.\"   ),   Pony(       2,       \"Applejack\",       \"Applejack is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She lives and works at Sweet Apple Acres with her grandmother Granny Smith, her older brother Big McIntosh, her younger sister Apple Bloom, and her dog Winona. She represents the element of honesty.\"   ),   Pony(       3,       \"Pinkie Pie\",       \"Pinkie Pie, full name Pinkamena Diane Pie,[note 2] is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She is an energetic and sociable baker at Sugarcube Corner, where she lives on the second floor with her toothless pet alligator Gummy, and she represents the element of laughter.\"   ),   Pony(       4,       \"Fluttershy\",       \"Fluttershy is a female Pegasus pony and one of the main characters of My Little Pony Friendship is Magic. She lives in a small cottage near the Everfree Forest and takes care of animals, the most prominent of her charges being Angel the bunny. She represents the element of kindness.\"   ), ];  \/\/ PonyListPage \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \/\/ \u0442.\u043a. \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \/\/ \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 class PonyListPage extends StatelessWidget {      \/\/ build \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043e\u0442\u043c\u0435\u0442\u0438\u043b\u0438, \u0441\u0442\u0440\u043e\u0438\u0442   \/\/ \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043d\u0430\u0448\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: Text(\"Pony List Page\")),       \/\/ \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430       body: Padding(         \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 EdgeInsets \u0445\u0440\u0430\u043d\u0438\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 double \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:         \/\/ left, top, right, bottom - \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430, \u0441\u0432\u0435\u0440\u0445\u0443, \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043d\u0438\u0437\u0443         \/\/ EdgeInsets.all(10) - \u0437\u0430\u0434\u0430\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043e \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u0440\u043e\u043d         \/\/ EdgeInsets.only(left: 10, right: 15) - \u0437\u0430\u0434\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f         \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438\u043b\u0438 \u0441\u0442\u043e\u0440\u043e\u043d         \/\/ EdgeInsets.symmetric - \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435         \/\/ \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 (left \u0438 right) \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 (top \u0438 bottom)         padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),         \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a           child: ListView(             \/\/ map \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f             \/\/ \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c             \/\/ \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0432\u0438\u0434\u0436\u0435\u0442 Material).             \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c map \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a             \/\/ \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435             \/\/ \u044d\u0442\u043e Material \u0432\u0438\u0434\u0436\u0435\u0442\u044b             children: ponies.map&lt;Widget&gt;((pony) {               \/\/ Material \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e,               \/\/ \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043f\u0438\u0441\u043a\u0430               \/\/ \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c ripple \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e               return Material(                 color: Colors.pinkAccent,                 \/\/ InkWell \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c                 \/\/ \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430\u0436\u0430\u0442\u0438\u0435                 child: InkWell(                   \/\/ splashColor - \u0446\u0432\u0435\u0442 ripple \u044d\u0444\u0444\u0435\u043a\u0442\u0430                   splashColor: Colors.pink,                   \/\/ \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430                   onTap: () {                     \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435                   },                   \/\/ \u0434\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435                   \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Container \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c Text                   \/\/ Container \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 (padding)                   \/\/ \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (margin),                   \/\/ \u0430 \u0442\u0430\u043a\u0436\u0435 \u0442\u0435\u043d\u044c, \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432,                   \/\/ \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430                   child: Container(                       padding: EdgeInsets.all(15),                       child: Text(                           pony.name,                           style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white)                       )                   ),                 ),               );               \/\/ map \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Iterable \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e               \/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e toList() \u0444\u0443\u043d\u043a\u0446\u0438\u0438             }).toList(),           )       ),     );   }  }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 Dart \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e PonyDetailPage:<\/p>\n<pre><code class=\"dart\"> import 'package:flutter\/material.dart';  import 'pony_list_page.dart';  \/\/ \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 PonyListPage \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \/\/ \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f class PonyDetailPage extends StatelessWidget {   \/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c id \u043f\u043e\u043d\u0438   final int ponyId;    \/\/ \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 PonyDetailPage \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 ponyId,   \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d \u043d\u0430\u0448\u0435\u043c\u0443 \u0440\u0430\u043d\u0435\u0435   \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u044e   PonyDetailPage(this.ponyId);    @override   Widget build(BuildContext context) {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u043d\u0438 \u043f\u043e \u0435\u0433\u043e id     \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c ponies      \/\/ \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 pony_list_page.dart     final pony = ponies[ponyId];     return Scaffold(       appBar: AppBar(         title: Text(\"Pony Detail Page\"),       ),       body: Padding(         \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430         padding: EdgeInsets.all(15),         \/\/ Column \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438         \/\/ crossAxisAlignment - \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 (\u043a\u043e\u043b\u043e\u043d\u043a\u0430) \u0438\u043b\u0438         \/\/ \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 (\u0441\u0442\u0440\u043e\u043a\u0430)         \/\/ mainAxisAlignment \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442         \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b         \/\/ \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438         child: Column(           crossAxisAlignment: CrossAxisAlignment.stretch,           children: [             Container(                 padding: EdgeInsets.all(10),                 \/\/ \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c color \u0434\u043b\u044f Container,                 \/\/ \u0442.\u043a. \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e decoration \u0431\u044b\u043b\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e                 \/\/ color: Colors.pinkAccent,                                  \/\/ BoxDecoration \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430,                 \/\/ \u043f\u043e\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 Container,                 \/\/ \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a: gradient, borderRadius, border, shape                 \/\/ \u0438 boxShadow                 \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0440\u0430\u0434\u0438\u0443\u0441 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u043b\u0435\u0432\u043e\u0433\u043e \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e                 \/\/ \u0432\u0435\u0440\u0445\u043d\u0438\u0445 \u0443\u0433\u043b\u043e\u0432                 decoration: BoxDecoration(                   borderRadius: BorderRadius.only(                       topLeft: Radius.circular(15),                       topRight: Radius.circular(15)                   ),          \t\t\t\t\t\/\/ \u0446\u0432\u0435\u0442 Container'\u0430 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 BoxDecoration                   color: Colors.pinkAccent,                 ),                 child: Text(                     \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043c\u044f pony                     pony.name,                     style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white),                 )             ),             Container(                 padding: EdgeInsets.all(10),                 child: Text(                     \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 pony                     pony.desc,                     style: Theme.of(context).textTheme.bodyText1                 )             )           ],         ),       )     );   } }<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e.<\/p>\n<p> \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 PonyListPage:<\/p>\n<pre><code class=\"dart\">\/\/ \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 onTap: () {   \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443:   \/\/ Navigator.of(context).push(route)   \/\/ PonyDetailPage \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 pony id,   \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \tNavigator.push(context, MaterialPageRoute(   \tbuilder: (context) =&gt; PonyDetailPage(pony.id)   )); },<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u043e\u043c\u0430\u0448\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n<pre><code class=\"dart\">@override   Widget build(BuildContext context) {     \/\/ \u0432\u0438\u0434\u0436\u0435\u0442 MaterialApp - \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439     \/\/ \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0435\u043c\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c     \/\/ Material Design \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.     return MaterialApp(       \/\/ \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f       \/\/ \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u0438\u0434\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435       title: 'Json Placeholder App',       \/\/ \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0431\u0430\u043d\u043d\u0435\u0440       debugShowCheckedModeBanner: false,       \/\/ \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0442\u0435\u043c\u044b, \u043c\u044b \u0435\u0449\u0451 \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443       theme: ThemeData(         primarySwatch: Colors.blue,       ),       \/\/ \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0434\u043e\u043c\u0430\u0448\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 - PonyListPage       home: PonyListPage(),     );   }<\/code><\/pre>\n<h2>\u0417\u0430\u043f\u0443\u0441\u043a<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d06\/7e8\/276\/d067e82763695438817def37086aada3.png\" width=\"1080\" height=\"2400\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e07\/1aa\/5f3\/e071aa5f3e2b5b63b83b0e87482746ba.png\" width=\"1080\" height=\"2400\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430 \u0434\u0430\u043c! \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f  \u043e\u0431\u0440\u0430\u0442\u043d\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Back \u0438\u043b\u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u0443 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430:<\/p>\n<pre><code class=\"dart\">\/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c NavigatorState \u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442  \/\/ \u0438\u0437 \u0441\u0442\u044d\u043a\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 (PonyDetailPage) \/\/ \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 Navigator.pop(context, result)<\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u041e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0446\u0435\u043b\u044b\u0439 \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p>\u0415\u0449\u0451 \u043f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 \u043e \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f\u0445: \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u043d\u043e\u0432\u044b\u0439 Navigator API 2.0, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0435\u0441\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e <a href=\"https:\/\/medium.com\/flutter\/learning-flutters-new-navigation-and-routing-system-7c9068155ade\" rel=\"noopener noreferrer nofollow\">\u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/a>.<\/p>\n<p>\u041c\u044b \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a BottomNavigationBar.<\/p>\n<h2>BottomNavigationBar \u0438 \u0441\u0432\u043e\u0438 Navigator&#8217;\u044b<\/h2>\n<p>\u042f 100% \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0432\u044b \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438 \u043d\u0438\u0436\u043d\u0435\u0435 \u043c\u0435\u043d\u044e, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d21\/558\/88e\/d2155888e6ff09570fafa8cba87456ac.png\" width=\"1080\" height=\"2400\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044e (\u0434\u043e\u043c\u0430\u0448\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u043e\u0438\u0441\u043a, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f).<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0445\u043e\u0436\u0435\u0435. <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 models, \u0430 \u0432 \u043d\u0435\u0439 \u0444\u0430\u0439\u043b <code>tab.dart<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ff3\/55e\/101\/ff355e101254466a73b70163fb03bf87.png\" width=\"1396\" height=\"746\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>Tab<\/code> \u0438 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 <code>TabItem<\/code>:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart';  \/\/ \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e  \/\/ \u043e\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u0435\u043d\u044e class MyTab {   final String name;   final MaterialColor color;   final IconData icon;    const MyTab({this.name, this.color, this.icon}); }  \/\/ \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f  \/\/ \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044e \/\/ \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0438 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e \u0438 \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: \/\/ \u043f\u043e\u0441\u0442\u044b, \u0430\u043b\u044c\u0431\u043e\u043c\u044b \u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u044f enum TabItem { POSTS, ALBUMS, TODOS }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart'; import \"..\/models\/tab.dart\";  \/\/ \u041d\u0430\u0448\u0430 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 class HomePage extends StatefulWidget {   @override   _HomePageState createState() =&gt; _HomePageState(); }  class _HomePageState extends State&lt;HomePage&gt; {    \/\/ GlobalKey \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447,   \/\/ \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f   \/\/ \u043a \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u044c\u0441\u044f \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438   \/\/ NavigatorState - \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Navigator \u0432\u0438\u0434\u0436\u0435\u0442\u0430   final _navigatorKeys = {     TabItem.POSTS: GlobalKey&lt;NavigatorState&gt;(),     TabItem.ALBUMS: GlobalKey&lt;NavigatorState&gt;(),     TabItem.TODOS: GlobalKey&lt;NavigatorState&gt;(),   };    \/\/ \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442   var _currentTab = TabItem.POSTS;    \/\/ \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044e   void _selectTab(TabItem tabItem) {     setState(() =&gt; _currentTab = tabItem);   }    @override   Widget build(BuildContext context) {     \/\/ WillPopScope \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f     \/\/ \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 Back     return WillPopScope(       \/\/ \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 back \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0439       \/\/ \u0437\u0434\u0435\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430:       \/\/ \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u043c\u0435\u043d\u044e (\u043f\u043e\u0441\u0442\u044b)       \/\/ \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Back, \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f       \/\/ \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0435\u043d\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f       \/\/ \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439: c \u0437\u0430\u0434\u0430\u043d\u0438\u0439 \u043d\u0430 \u0430\u043b\u044c\u0431\u043e\u043c\u044b, \u0441 \u0430\u043b\u044c\u0431\u043e\u043c\u043e\u0432 \u043d\u0430 \u043f\u043e\u0441\u0442\u044b,       \/\/ \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f       onWillPop: () async {           if (_currentTab != TabItem.POSTS) {             if (_currentTab == TabItem.TODOS) {               _selectTab(TabItem.ALBUMS);             } else {               _selectTab(TabItem.POSTS);             }             return false;           } else {             return true;           }        },       child: Scaffold(         \/\/ Stack \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c         \/\/ \u041f\u0440\u043e\u0449\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f         \/\/ \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0440\u0443\u0433\u043e\u0433\u043e, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438         body: Stack(children: &lt;Widget&gt;[           _buildOffstageNavigator(TabItem.POSTS),           _buildOffstageNavigator(TabItem.ALBUMS),           _buildOffstageNavigator(TabItem.TODOS),         ]),         \/\/ MyBottomNavigation \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0437\u0436\u0435         bottomNavigationBar: MyBottomNavigation(           currentTab: _currentTab,           onSelectTab: _selectTab,         ),       ),);   }    \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 - \u043f\u043e\u0441\u0442\u044b, \u0430\u043b\u044c\u0431\u043e\u043c\u044b \u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u044f   Widget _buildOffstageNavigator(TabItem tabItem) {     return Offstage(       \/\/ Offstage \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:       \/\/ \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442       \/\/ \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u043c\u0435\u043d\u044e, \u0442\u043e \u043c\u044b \u0435\u0433\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c       offstage: _currentTab != tabItem,       \/\/ TabNavigator \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u0437\u0436\u0435       child: TabNavigator(         navigatorKey: _navigatorKeys[tabItem],         tabItem: tabItem,       ),     );   }  }<\/code><\/pre>\n<p>\u0414\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Navigator \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u043e\u0432, \u0430\u043b\u044c\u0431\u043e\u043c\u043e\u0432 \u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u0439, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0442\u044d\u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 <code>Offstage<\/code> \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0442 \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d. <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 back &#8212; <code>WillPopScope<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0438\u0436\u043d\u0435\u0435 \u043c\u0435\u043d\u044e \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 <code>bottom_navigation.dart<\/code>:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart'; import '..\/models\/tab.dart';  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0440\u0438 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e \/\/ const \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e tabs \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f  \/\/ \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0438 \u043c\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \/\/ \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0435\u0439 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c, \/\/ \u0438\u043d\u0430\u0447\u0435 \u0433\u043e\u0432\u043e\u0440\u044f, \u043e\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 const Map&lt;TabItem, MyTab&gt; tabs = {   TabItem.POSTS : const MyTab(name: \"Posts\", color: Colors.red, icon: Icons.layers),   TabItem.ALBUMS : const MyTab(name: \"Albums\", color: Colors.blue, icon: Icons.image),   TabItem.TODOS : const MyTab(name: \"Todos\", color: Colors.green, icon: Icons.edit) };  class MyBottomNavigation extends StatelessWidget {   \/\/ MyBottomNavigation \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e onSelectTab   \/\/ \u0438 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443   MyBottomNavigation({this.currentTab, this.onSelectTab});    final TabItem currentTab;   \/\/ ValueChanged&lt;TabItem&gt; - \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f,   \/\/ \u0442\u043e \u0435\u0441\u0442\u044c onSelectTab \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e,   \/\/ \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 TabItem \u043e\u0431\u044a\u0435\u043a\u0442   final ValueChanged&lt;TabItem&gt; onSelectTab;    @override   Widget build(BuildContext context) {     \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 BottomNavigationBar \u0434\u043b\u044f     \/\/ \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043c\u0435\u043d\u044e     return BottomNavigationBar(         selectedItemColor: _colorTabMatching(currentTab),         selectedFontSize: 13,         unselectedItemColor: Colors.grey,         type: BottomNavigationBarType.fixed,         currentIndex: currentTab.index,         \/\/ \u043f\u0443\u043d\u043a\u0442\u044b \u043c\u0435\u043d\u044e         items: [           _buildItem(TabItem.POSTS),           _buildItem(TabItem.ALBUMS),           _buildItem(TabItem.TODOS),         ],         \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e         \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 onSelectTab,         \/\/ \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440         onTap: (index) =&gt; onSelectTab(             TabItem.values[index]         )     );   }    \/\/ \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e   BottomNavigationBarItem _buildItem(TabItem item) {     return BottomNavigationBarItem(         \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443         icon: Icon(           _iconTabMatching(item),           color: _colorTabMatching(item),         ),         \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043a\u0443 \u0438\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435         label: tabs[item].name,     );   }    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   IconData _iconTabMatching(TabItem item) =&gt; tabs[item].icon;    \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430   Color _colorTabMatching(TabItem item) {     return currentTab == item ? tabs[item].color : Colors.grey;   }  }  <\/code><\/pre>\n<p>\u0418 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c <code>TabNavigator (tab_navigator.dart)<\/code>:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart'; import '..\/models\/tab.dart';  import 'pony_list_page.dart';  class TabNavigator extends StatelessWidget {   \/\/ TabNavigator \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442:   \/\/ navigatorKey - \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f NavigatorState   \/\/ tabItem - \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0443\u043d\u043a\u0442 \u043c\u0435\u043d\u044e   TabNavigator({this.navigatorKey, this.tabItem});    final GlobalKey&lt;NavigatorState&gt; navigatorKey;   final TabItem tabItem;    @override   Widget build(BuildContext context) {     \/\/ \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u043c\u044b \u0434\u043e\u0448\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430     \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c navigatorKey      \/\/ \u0442\u043e\u043b\u044c\u043a\u043e, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u043c\u0443 Navigator'\u0443     \/\/ navigatorKey, \u043a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u043e\u043c,     \/\/ \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e     \/\/ Navigator'a, \u0432\u043e\u0442 \u0438 \u0432\u0441\u0435!     return Navigator(       key: navigatorKey,       \/\/ Navigator \u0438\u043c\u0435\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 initialRoute,       \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f       \/\/ \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0439.       \/\/ \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u043c,       \/\/ \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e initialRoute \u0440\u0430\u0432\u0435\u043d \/       \/\/ initialRoute: \"\/\",              \/\/ Navigator \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438       \/\/ \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 onGenerateRoute       onGenerateRoute: (routeSettings) {         \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443         Widget currentPage;         if (tabItem == TabItem.POSTS) {           \/\/ \u043f\u043e\u043a\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c PonyListPage           currentPage = PonyListPage();         } else if (tabItem == TabItem.POSTS) {           currentPage = PonyListPage();         } else {           currentPage = PonyListPage();         }         \/\/ \u0441\u0442\u0440\u043e\u0438\u043c Route (\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 \u044d\u043a\u0440\u0430\u043d)         return MaterialPageRoute(builder: (context) =&gt; currentPage,);       },     );   }  }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u043e\u043c\u0430\u0448\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 <code>main.dart<\/code> \u0444\u0430\u0439\u043b\u0435:<\/p>\n<pre><code class=\"dart\">return MaterialApp(    \/\/...    \/\/ \u041d\u0430\u0448\u0430 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043d\u0438\u0436\u043d\u0435\u043c \u043c\u0435\u043d\u044e    home: HomePage(), );<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0432 <code>home_page.dart<\/code> \u0438 \u0432\u0443\u0430\u043b\u044f:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/df6\/ad9\/c93\/df6ad9c9369f4d525c57f3d9bc386a4c.png\" width=\"1080\" height=\"2400\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0430\u043f\u043a\u0435 pages \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 home \u0438 \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u043c \u0442\u0443\u0434\u0430 \u0434\u0432\u0430 \u043d\u0430\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u0438\u043a\u0430:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5dc\/915\/008\/5dc915008fe657cfe86933ddaf0e762d.png\" width=\"451\" height=\"205\"><figcaption><\/figcaption><\/figure>\n<p>\u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438: PostListPage, AlbumListPage \u0438 TodoListPage:<\/p>\n<pre><code class=\"dart\"> import 'package:flutter\/cupertino.dart'; import 'package:flutter\/material.dart';  \/\/ \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e class PostListPage extends StatefulWidget {   @override   _PostListPageState createState() =&gt; _PostListPageState(); }  class _PostListPageState extends State&lt;PostListPage&gt; {      @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(\"Post List Page\"),       ),       body: Container()     );   } }<\/code><\/pre>\n<p>\u0422\u0430 \u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0438 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u043a\u0430\u0436\u0438\u043c \u0438\u0445 \u0432 <code>TabNavigator'e<\/code>:<\/p>\n<pre><code class=\"dart\">onGenerateRoute: (routeSettings) {   \/\/ \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443   Widget currentPage;   if (tabItem == TabItem.POSTS) {   \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b     currentPage = PostListPage();   } else if (tabItem == TabItem.ALBUMS) {     currentPage = AlbumListPage();   } else {     currentPage = TodoListPage();   }    \/\/ \u0441\u0442\u0440\u043e\u0438\u043c Route (\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043b\u0438 \u044d\u043a\u0440\u0430\u043d)    return MaterialPageRoute(builder: (context) =&gt; currentPage); },<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0441!<\/p>\n<p>\u0418\u0441\u043a\u0440\u0435\u043d\u043d\u0435 \u0440\u0430\u0434 \u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u0435\u043d \u0432\u0430\u043c \u0437\u0430 \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u043e\u0442\u0437\u044b\u0432\u044b \u0438 \u0437\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443!<\/p>\n<p>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/KiberneticWorm\/json_placeholder_app\/tree\/lesson_3\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 Github<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/medium.com\/flutter\/learning-flutters-new-navigation-and-routing-system-7c9068155ade\" rel=\"noopener noreferrer nofollow\">Navigator 2.0 API<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/flutter.dev\/docs\/cookbook\/navigation\" rel=\"noopener noreferrer nofollow\">Navigation Cookbook <\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e \u0441\u043a\u043e\u0440\u043e\u0439 \u0432\u0441\u0442\u0440\u0435\u0447\u0438!<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/560646\/\"> https:\/\/habr.com\/ru\/post\/560646\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0432\u0441\u0435\u0445 \u0436\u0438\u0432\u0443\u0449\u0438\u0445 \u0432 \u0421\u0438\u0431\u0438\u0440\u0438 \u0441 \u043d\u0430\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435\u043c \u043b\u0435\u0442\u0430!)))<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u043c\u0430 &#8212; \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f.<\/p>\n<p>\u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 Flutter, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u044b \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. <\/p>\n<p>\u0418 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0432\u0435\u0441\u044c\u043c\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 use case: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 BottomNavigationBar.<\/p>\n<p>&#8216;\u041d\u0443 \u0447\u0442\u043e \u0436 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0442\u0435\u0440\u044f\u0442\u044c \u043d\u0438 \u043c\u0438\u043d\u0443\u0442\u044b, \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c!<\/p>\n<details class=\"spoiler\">\n<summary>\u041d\u0430\u0448 \u043f\u043b\u0430\u043d<\/summary>\n<div class=\"spoiler__content\">\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/en\/post\/560008\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 1<\/a>&nbsp;&#8212; \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/en\/post\/560282\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 2<\/a> &#8212; \u0444\u0430\u0439\u043b pubspec.yaml \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 flutter \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 3 (\u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f) &#8212; BottomNavigationBar \u0438 Navigator;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 4 &#8212; MVC. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 5 &#8212; http \u043f\u0430\u043a\u0435\u0442. \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Repository \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u0435\u0440\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0432\u044b\u0432\u043e\u0434 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 6 &#8212; \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0432\u044b\u0432\u043e\u0434 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u0432\u0438\u0434\u0435 \u0441\u0435\u0442\u043a\u0438, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438\u0437 \u0441\u0435\u0442\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 7 &#8212; \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0439 \u0442\u0435\u043c\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0427\u0430\u0441\u0442\u044c 8 &#8212; \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438;<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/details>\n<h2>Navigator \u0438 \u0441\u0442\u044d\u043a \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h2>\n<p>Flutter \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 Activity.<\/p>\n<p>\u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u044d\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Route.<\/p>\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u044a\u0435\u043a\u0442 Navigator:<\/p>\n<pre><code class=\"dart\">\/\/ Navigator.of(context) \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Navigator \/\/ \u0432\u0438\u0434\u0436\u0435\u0442\u0430: NavigatorState, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u043c\u0435\u0435\u0442 push \u0438 pop \u043c\u0435\u0442\u043e\u0434\u044b \/\/ push \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0443 \u0441\u0442\u0435\u043a\u0430 Navigator \/\/ pop \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0441\u0442\u044d\u043a\u0430 \/\/ MaterialPageRoute \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \/\/ \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 Navigator.of(context).push( \tMaterialPageRoute(builder: (context) =&gt; OurPage()) );<\/code><\/pre>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0442\u044d\u043a Navigator&#8217;a \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u044d\u043a\u0440\u0430\u043d\u0430: \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043d\u0438\u0433 \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u043d\u0438\u0433\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f &#8212; \u044d\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043d\u0438\u0433:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c  \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043a\u043d\u0438\u0433:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0430 \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u0435 \u0441\u0442\u044d\u043a\u0430 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u043f\u0438\u0441\u043a\u0443 \u043a\u043d\u0438\u0433.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Back \u0438\u043b\u0438 Up (\u0441\u0442\u0440\u0435\u043b\u043a\u0430 \u0432 \u043b\u0435\u0432\u043e\u043c \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0433\u043b\u0443) \u0438 \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>push(route)<\/code>, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c <code>pop()<\/code> \u043c\u0435\u0442\u043e\u0434.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435!<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438<\/h2>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0435\u0439 \u0438\u0437 \u0441\u0435\u0440\u0438\u0430\u043b\u0430 My Little Pony \u0441 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0436\u0430.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0430\u043f\u043a\u0435 pages:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<pre><code class=\"dart\">import 'package:flutter\/material.dart';  \/\/ \u043a\u043b\u0430\u0441\u0441 \u043f\u043e\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0438\u043c\u044f \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 id class Pony {   final int id;   final String name;   final String desc;    Pony(this.id, this.name, this.desc); }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043d\u0438 \/\/ final \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \/\/ \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u0438 ponies \/\/ \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043d\u044f\u0448\u0435\u043a final List&lt;Pony&gt; ponies = [   Pony(       0,       \"Twillight Sparkle\",       \"Twilight Sparkle is the central main character of My Little Pony Friendship is Magic. She is a female unicorn pony who transforms into an Alicorn and becomes a princess in Magical Mystery Cure\"   ),   Pony(       1,       \"Starlight Glimmer\",       \"Starlight Glimmer is a female unicorn pony and recurring character, initially an antagonist but later a protagonist, in the series. She first possibly appears in My Little Pony: Friends Forever Issue and first explicitly appears in the season five premiere.\"   ),   Pony(       2,       \"Applejack\",       \"Applejack is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She lives and works at Sweet Apple Acres with her grandmother Granny Smith, her older brother Big McIntosh, her younger sister Apple Bloom, and her dog Winona. She represents the element of honesty.\"   ),   Pony(       3,       \"Pinkie Pie\",       \"Pinkie Pie, full name Pinkamena Diane Pie,[note 2] is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She is an energetic and sociable baker at Sugarcube Corner, where she lives on the second floor with her toothless pet alligator Gummy, and she represents the element of laughter.\"   ),   Pony(       4,       \"Fluttershy\",       \"Fluttershy is a female Pegasus pony and one of the main characters of My Little Pony Friendship is Magic. She lives in a small cottage near the Everfree Forest and takes care of animals, the most prominent of her charges being Angel the bunny. She represents the element of kindness.\"   ), ];  \/\/ PonyListPage \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \/\/ \u0442.\u043a. \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \/\/ \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 class PonyListPage extends StatelessWidget {      \/\/ build \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043e\u0442\u043c\u0435\u0442\u0438\u043b\u0438, \u0441\u0442\u0440\u043e\u0438\u0442   \/\/ \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e \u043d\u0430\u0448\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(title: Text(\"Pony List Page\")),       \/\/ \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430       body: Padding(         \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 EdgeInsets \u0445\u0440\u0430\u043d\u0438\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 double \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:         \/\/ left, top, right, bottom - \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430, \u0441\u0432\u0435\u0440\u0445\u0443, \u0441\u043f\u0440\u0430\u0432\u0430 \u0438 \u0441\u043d\u0438\u0437\u0443         \/\/ EdgeInsets.all(10) - \u0437\u0430\u0434\u0430\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043e \u0432\u0441\u0435\u0445 \u0441\u0442\u043e\u0440\u043e\u043d         \/\/ EdgeInsets.only(left: 10, right: 15) - \u0437\u0430\u0434\u0430\u0435\u0442 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f         \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438\u043b\u0438 \u0441\u0442\u043e\u0440\u043e\u043d         \/\/ EdgeInsets.symmetric - \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435         \/\/ \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 (left \u0438 right) \u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 (top \u0438 bottom)         padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),         \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a           child: ListView(             \/\/ map \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f             \/\/ \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c             \/\/ \u0441\u043f\u0438\u0441\u043a\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u0432\u0438\u0434\u0436\u0435\u0442 Material).             \/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c map \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a             \/\/ \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435             \/\/ \u044d\u0442\u043e Material \u0432\u0438\u0434\u0436\u0435\u0442\u044b             children: ponies.map&lt;Widget&gt;((pony) {               \/\/ Material \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e,               \/\/ \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043f\u0438\u0441\u043a\u0430               \/\/ \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c ripple \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0435\u0433\u043e               return Material(                 color: Colors.pinkAccent,                 \/\/ InkWell \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c                 \/\/ \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u043d\u0430\u0436\u0430\u0442\u0438\u0435                 child: InkWell(                   \/\/ splashColor - \u0446\u0432\u0435\u0442 ripple \u044d\u0444\u0444\u0435\u043a\u0442\u0430                   splashColor: Colors.pink,                   \/\/ \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430                   onTap: () {                     \/\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0436\u0435                   },                   \/\/ \u0434\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435                   \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Container \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c Text                   \/\/ Container \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 (padding)                   \/\/ \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (margin),                   \/\/ \u0430 \u0442\u0430\u043a\u0436\u0435 \u0442\u0435\u043d\u044c, \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432,                   \/\/ \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430                   child: Container(                       padding: EdgeInsets.all(15),                       child: Text(                           pony.name,                           style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white)                       )                   ),                 ),               );               \/\/ map \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Iterable \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e               \/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e toList() \u0444\u0443\u043d\u043a\u0446\u0438\u0438             }).toList(),           )       ),     );   }  }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 Dart \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e PonyDetailPage:<\/p>\n<pre><code class=\"dart\"> import 'package:flutter\/material.dart';  import 'pony_list_page.dart';  \/\/ \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 PonyListPage \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \/\/ \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f class PonyDetailPage extends StatelessWidget {   \/\/ \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c id \u043f\u043e\u043d\u0438   final int ponyId;    \/\/ \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 PonyDetailPage \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 ponyId,   \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d \u043d\u0430\u0448\u0435\u043c\u0443 \u0440\u0430\u043d\u0435\u0435   \/\/ \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u044e   PonyDetailPage(this.ponyId);    @override   Widget build(BuildContext context) {     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u043e\u043d\u0438 \u043f\u043e \u0435\u0433\u043e id     \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c ponies      \/\/ \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 pony_list_page.dart     final pony = ponies[ponyId];     return Scaffold(       appBar: AppBar(         title: Text(\"Pony Detail Page\"),       ),       body: Padding(         \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430         padding: EdgeInsets.all(15),         \/\/ Column \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438         \/\/ crossAxisAlignment - \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 (\u043a\u043e\u043b\u043e\u043d\u043a\u0430) \u0438\u043b\u0438         \/\/ \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435 (\u0441\u0442\u0440\u043e\u043a\u0430)         \/\/ mainAxisAlignment \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442         \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b         \/\/ \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0438         child: Column(           crossAxisAlignment: CrossAxisAlignment.stretch,           children: [             Container(                 padding: EdgeInsets.all(10),                 \/\/ \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c color \u0434\u043b\u044f Container,                 \/\/ \u0442.\u043a. \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e decoration \u0431\u044b\u043b\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e                 \/\/ color: Colors.pinkAccent,                                  \/\/ BoxDecoration \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430,                 \/\/ \u043f\u043e\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 Container,                 \/\/ \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a: gradient, borderRadius, border, shape                 \/\/ \u0438 boxShadow                 \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0440\u0430\u0434\u0438\u0443\u0441 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u043b\u0435\u0432\u043e\u0433\u043e \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e                 \/\/ \u0432\u0435\u0440\u0445\u043d\u0438\u0445 \u0443\u0433\u043b\u043e\u0432                 decoration: BoxDecoration(                   borderRadius: BorderRadius.only(                       topLeft: Radius.circular(15),                       topRight: Radius.circular(15)                   ),          \t\t\t\t\t\/\/<\/code><\/pre>\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-324203","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324203","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=324203"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/324203\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=324203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=324203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=324203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}