{"id":375995,"date":"2024-05-21T06:39:11","date_gmt":"2024-05-21T06:39:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=375995"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=375995","title":{"rendered":"<span>\u041a\u043b\u044e\u0447\u0438 \u0432\u043e Flutter<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0416\u0435\u043d\u044f, Flutter-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u0446\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Surf. \u0418 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0441\u0451, \u0447\u0442\u043e \u0437\u043d\u0430\u044e, \u043f\u0440\u043e \u043a\u043b\u044e\u0447\u0438 \u0432\u043e Flutter.<\/p>\n<p>\u0412\u043e Flutter \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e key \u2014 \u043a\u043b\u044e\u0447.\u00a0 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u0438, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c. \u041d\u043e \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0430\u0441\u0442\u0430\u043d\u0435\u0442 \u0445\u0430\u043e\u0441, \u0440\u0430\u0437\u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0431\u0430\u0433\u0438, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u043d\u0435\u043f\u043e\u0434\u043e\u0431\u0430\u044e\u0449\u0435. \u041f\u0440\u0438\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043a \u043b\u044e\u0434\u044f\u043c, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442, \u043d\u043e \u044f\u0432\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442 \u0432\u0430\u043c \u0436\u0438\u0437\u043d\u044c.\u00a0<\/p>\n<p>\u0423 \u043a\u043b\u044e\u0447\u0435\u0439 \u0432\u043e Flutter \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0435\u0439. \u0412\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f \u043a\u043b\u044e\u0447\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u2014 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0434\u0451\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0438 \u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Key?<\/h2>\n<p><strong>Key<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0435\u0441\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u043e null, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 key \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041e\u043d\u043e \u0438\u0433\u0440\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u0443\u044e \u0440\u043e\u043b\u044c \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (<a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Element-class.html\">Element<\/a>).<\/p>\n<blockquote>\n<p>\u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0438 \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u0434\u0435\u0440\u0435\u0432\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0434\u0435\u0440\u0435\u0432\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 Flutter \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u00a0<a href=\"https:\/\/habr.com\/ru\/articles\/501862\/\">\u0442\u0443\u0442<\/a>.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0430 \u0435\u0433\u043e \u043a\u043b\u044e\u0447 \u0438 \u0442\u0438\u043f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0441\u0442\u0430\u0440\u044b\u043c, \u0442\u043e \u0435\u0433\u043e Element \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0436\u0435\u0442. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Element \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d, \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u2014 Stateful. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 StatefulWidget \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 State, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. State \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 Element.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 State \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a Element, \u043a\u043b\u044e\u0447\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443.\u00a0<\/p>\n<p>\u041a\u043b\u044e\u0447\u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 <strong>GlobalKey <\/strong>\u0438 <strong>LocalKey<\/strong>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438: <strong>UniqueKey<\/strong>, <strong>ValueKey<\/strong> \u0438 <strong>ObjectKey<\/strong>.<\/p>\n<p><strong>GlobalKey<\/strong> \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>LocalKey<\/strong> \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.\u00a0<\/p>\n<h2>LocalKey \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b State \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432.<\/p>\n<p><strong>UniqueKey<\/strong> \u2014 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0434\u0438\u043d \u0435\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0430\u0432\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435 \u2014 \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e Element \u0438 State.<\/p>\n<p><strong>ValueKey \u0438 ObjectKey <\/strong>\u043f\u043e\u0445\u043e\u0436\u0438. \u041e\u0431\u0430 \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043b\u044e\u0431\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a Flutter \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u0443 ValueKey:<\/p>\n<pre><code class=\"dart\">@override  bool operator ==(Object other) {    if (other.runtimeType != runtimeType) {      return false;    }    return other is ValueKey&lt;T>        &amp;&amp; other.value == value;  }<\/code><\/pre>\n<p>\u0418 \u0443 ObjectKey:<\/p>\n<pre><code class=\"dart\">@override  bool operator ==(Object other) {    if (other.runtimeType != runtimeType) {      return false;    }    return other is ObjectKey        &amp;&amp; identical(other.value, value);  }<\/code><\/pre>\n<p>\u041e\u043d\u0438 \u043f\u043e\u0447\u0442\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b (\u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430). ValueKey \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 value \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 ==, \u0430 ObjectKey \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e identical(), \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435.<\/p>\n<h2>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 TODO-\u043b\u0438\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u0430\u043b\u0438\u0442\u0440\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0446\u0432\u0435\u0442 \u0443 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0418 \u0435\u0449\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u2014 \u043a\u043e\u0434 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u0423 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"dart\">\/\/\/ \u041c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0434\u0430\u0447\u0438 class TodoItem {  final String title;  final bool done;   const TodoItem({required this.title, this.done = false});   TodoItem copyWith({    String? title,    bool? done,  }) {    return TodoItem(      title: title ?? this.title,      done: done ?? this.done,    );  }   @override  bool operator ==(Object other) {    return identical(this, other) ||        (other is TodoItem &amp;&amp; runtimeType == other.runtimeType &amp;&amp; title == other.title &amp;&amp; done == other.done);  }   @override  int get hashCode => Object.hashAll([title, done]); }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u0417\u0430\u0434\u0430\u0447\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0446\u0432\u0435\u0442, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0435\u0439 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430.<\/p>\n<pre><code class=\"dart\">\/\/\/ \u041f\u0430\u043b\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447 const todoItemColors = [  Colors.red,  Colors.yellow,  Colors.green,  Colors.blue,  Colors.purple,  Colors.orange,  Colors.pink, ];  \/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 class TodoItemWidget extends StatefulWidget {  final TodoItem item;  final VoidCallback onDelete;  final ValueChanged&lt;bool?> onChecked;   const TodoItemWidget({    super.key,    required this.item,    required this.onDelete,    required this.onChecked,  });   @override  State&lt;TodoItemWidget> createState() => _TodoItemWidgetState(); }  class _TodoItemWidgetState extends State&lt;TodoItemWidget> {  late final Color color;   @override  void initState() {    super.initState();    \/\/ \u041f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u0430\u043b\u0438\u0442\u0440\u044b    final randomIndex = Random().nextInt(todoItemColors.length);    color = todoItemColors[randomIndex];  }   @override  Widget build(BuildContext context) {    return Padding(      padding: const EdgeInsets.symmetric(vertical: 5),      child: ListTile(        tileColor: color,        leading: Checkbox(value: widget.item.done, onChanged: widget.onChecked),        trailing: IconButton(onPressed: widget.onDelete, icon: const Icon(Icons.delete)),        title: Text(widget.item.title),        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),      ),    );  } }<\/code><\/pre>\n<p>\u0410 \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 State \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f todoList).<\/p>\n<pre><code class=\"dart\">\/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 class TodoList extends StatefulWidget {  const TodoList({super.key});   @override  State&lt;TodoList> createState() => _TodoListState(); }  class _TodoListState extends State&lt;TodoList> {  final List&lt;TodoItem> todoList = [];   @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'TODO-\u043b\u0438\u0441\u0442',      home: Scaffold(        appBar: AppBar(          title: const Text('TODO \u041b\u0438\u0441\u0442'),        ),        body: Padding(          padding: const EdgeInsets.symmetric(horizontal: 20.0),          child: Column(            children: [              \/\/ \u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438              TodoInput(                onAdd: _onAdd,              ),              const SizedBox(height: 20),              \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447              Expanded(                child: ListView(                  children: todoList                      .mapIndexed(                        (index, item) => TodoItemWidget(                          item: item,                          onDelete: () => _onDelete(index),                          onChecked: (value) => _onChecked(value, index, item),                        ),                      )                      .toList(),                ),              ),            ],          ),        ),      ),    );  }   void _onAdd(String value) {    setState(() {      todoList.add(TodoItem(title: value));    });  }   void _onDelete(int index) {    setState(() {      todoList.removeAt(index);    });  }   void _onChecked(bool? value, int index, TodoItem item) {    setState(() {      if (value != null) todoList[index] = item.copyWith(done: value);    });  } }   \/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 class TodoInput extends StatefulWidget {  final ValueChanged&lt;String> onAdd;  const TodoInput({super.key, required this.onAdd});   @override  State&lt;TodoInput> createState() => _TodoInputState(); }  class _TodoInputState extends State&lt;TodoInput> {  final TextEditingController _controller = TextEditingController();   @override  Widget build(BuildContext context) {    return TextField(      controller: _controller,      decoration: InputDecoration(        hintText: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0443',        suffix: IconButton(          onPressed: () => widget.onAdd(_controller.text),          icon: const Icon(Icons.add),        ),      ),    );  } }<\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aea\/fe5\/c03\/aeafe5c03154eebccb30b8ede21e86bd.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aea\/fe5\/c03\/aeafe5c03154eebccb30b8ede21e86bd.gif\"\/><\/figure>\n<p>\u0426\u0432\u0435\u0442 \u0443 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447, \u0430 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u044b\u043b \u0441\u0432\u043e\u0439 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.\u00a0<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/54a\/c8b\/cf3\/54ac8bcf387c0f6a6160968ec32c140c.png\" alt=\"\u0414\u0435\u0440\u0435\u0432\u044c\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043f\u0440\u0430\u0432\u0430 3 \u043d\u0430\u0448\u0438\u0445 TodoItemWidget, \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430. \u0421\u043b\u0435\u0432\u0430 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0441\u0442\u0435\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c.\" title=\"\u0414\u0435\u0440\u0435\u0432\u044c\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043f\u0440\u0430\u0432\u0430 3 \u043d\u0430\u0448\u0438\u0445 TodoItemWidget, \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430. \u0421\u043b\u0435\u0432\u0430 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0441\u0442\u0435\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c.\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/54a\/c8b\/cf3\/54ac8bcf387c0f6a6160968ec32c140c.png\"\/><\/p>\n<div><figcaption>\u0414\u0435\u0440\u0435\u0432\u044c\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043f\u0440\u0430\u0432\u0430 3 \u043d\u0430\u0448\u0438\u0445 TodoItemWidget, \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430. \u0421\u043b\u0435\u0432\u0430 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0441\u0442\u0435\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c.<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 key \u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u0442\u043e \u0435\u0441\u0442\u044c null.\u00a0<\/p>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 setState, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0421\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447.\u041d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0442\u0440\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u00ab\u0436\u0438\u0432\u0443\u0442\u00bb \u0434\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u041f\u043e\u0441\u043b\u0435 Flutter \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0ca\/79b\/b07\/0ca79bb0788fbaa6a398bd924a320d12.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0ca\/79b\/b07\/0ca79bb0788fbaa6a398bd924a320d12.png\"\/><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f (\u0435\u0441\u043b\u0438 \u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430), \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e. \u041e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441\u0442\u0430\u0440\u044b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442 \u0438\u0445 \u0442\u0438\u043f\u044b \u0438 \u043a\u043b\u044e\u0447\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u044e\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0432\u0438\u0434\u0436\u0435\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/37e\/ce1\/bfd\/37ece1bfd57bbba885f4ce03afdf34b5.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/37e\/ce1\/bfd\/37ece1bfd57bbba885f4ce03afdf34b5.png\"\/><\/figure>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0442\u0435\u0445 \u0436\u0435 \u043c\u0435\u0441\u0442\u0430\u0445 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0442\u043e \u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0447\u0442\u043e \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b Flutter \u043f\u0440\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u043b \u0438\u0445 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438. \u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0438.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c <strong>UniqueKey<\/strong>:<\/p>\n<pre><code class=\"dart\">TodoItemWidget(     key: UniqueKey(),     item: item,     onDelete: () => _onDelete(index),     onChecked: (value) => _onChecked(value, index, item), ),<\/code><\/pre>\n<p>\u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4e8\/0df\/98b\/4e80df98be238fccd4e566261e467c0a.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4e8\/0df\/98b\/4e80df98be238fccd4e566261e467c0a.gif\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Flutter \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u0438 \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435. \u041d\u0430\u043f\u043e\u043c\u043d\u0438\u043c, \u043e\u0434\u0438\u043d \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 UniqueKey \u0440\u0430\u0432\u0435\u043d \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435. \u0410 \u0443 \u043d\u0430\u0441 \u043e\u043d \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 TodoItemWidget.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9fd\/8c7\/723\/9fd8c7723aa23da2912817c5326ee93d.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9fd\/8c7\/723\/9fd8c7723aa23da2912817c5326ee93d.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/af5\/5d4\/fec\/af55d4fecc5b49733dc31caa4476ea0d.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/af5\/5d4\/fec\/af55d4fecc5b49733dc31caa4476ea0d.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ae7\/83d\/4f9\/ae783d4f9b81412a6042d75cbb5e0cf2.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ae7\/83d\/4f9\/ae783d4f9b81412a6042d75cbb5e0cf2.png\"\/><\/figure>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438\u0445 \u043a\u043b\u044e\u0447\u0438 \u0443\u0436\u0435 \u043d\u0435 null. \u0410 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u044e\u0447 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043a\u0430\u043a \u0443 \u0441\u0442\u0430\u0440\u043e\u0433\u043e.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Flutter \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 (\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430) \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u043e\u043c. \u0418 \u043e\u043d \u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u0442 \u2014 \u043a\u043b\u044e\u0447\u0438 \u0443 \u0432\u0441\u0435\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0422\u0430\u043a Flutter \u0443\u0434\u0430\u043b\u0438\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0435\u0439\u0442\u0430\u043c\u0438. \u041d\u0430 \u0438\u0445 \u043c\u0435\u0441\u0442\u043e \u043e\u043d \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u0430.<\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c <strong>ValueKey<\/strong>:<\/p>\n<pre><code class=\"dart\">TodoItemWidget(    key: ValueKey(item),    item: item,    onDelete: () => _onDelete(index),    onChecked: (value) => _onChecked(value, index, item), ),<\/code><\/pre>\n<p>\u0418 \u044d\u0442\u043e \u0440\u0435\u0448\u0438\u0442 \u043d\u0430\u0448\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/70c\/d1f\/48e\/70cd1f48e03fbb51d64d19f1cbf792c8.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/70c\/d1f\/48e\/70cd1f48e03fbb51d64d19f1cbf792c8.gif\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5ff\/d91\/5a7\/5ffd915a77cd2b1eab0cbd736ccdf4e8.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ff\/d91\/5a7\/5ffd915a77cd2b1eab0cbd736ccdf4e8.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0f8\/e78\/921\/0f8e78921de7af17c632311beb869878.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0f8\/e78\/921\/0f8e78921de7af17c632311beb869878.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/aa7\/cef\/58e\/aa7cef58e9f13695b7d0774c1803e9bd.png\" width=\"2522\" height=\"1438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/aa7\/cef\/58e\/aa7cef58e9f13695b7d0774c1803e9bd.png\"\/><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Flutter \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442, \u0447\u0442\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043d\u0435 \u0440\u0430\u0432\u043d\u044b \u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441 \u0442\u0435\u043c \u0436\u0435 \u043a\u043b\u044e\u0447\u043e\u043c \u0441\u0440\u0435\u0434\u0438 \u0441\u0442\u0430\u0440\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430. \u0417\u0430\u0442\u0435\u043c \u043e\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043d\u0443\u0436\u043d\u044b\u0435 \u043c\u0435\u0441\u0442\u0430, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0443\u0436\u043d\u043e\u0435 \u043d\u0430\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u043c\u0441\u044f \u0438\u043c\u0435\u043d\u0435\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/92e\/c66\/160\/92ec6616083805cc48994d67273665ef.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/92e\/c66\/160\/92ec6616083805cc48994d67273665ef.gif\"\/><\/figure>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f, \u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2dd\/8b1\/cc1\/2dd8b1cc115f1cc6e9ac7f53a891bbf5.png\" width=\"2522\" height=\"470\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2dd\/8b1\/cc1\/2dd8b1cc115f1cc6e9ac7f53a891bbf5.png\"\/><\/figure>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u0432\u044b\u0448\u043b\u043e? <strong>ValueKey<\/strong> \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 ==. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0432\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 TodoItem \u2014 \u044d\u0442\u043e \u0434\u0432\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n<p>\u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442, \u0441\u044e\u0440\u043f\u0440\u0438\u0437-\u0441\u044e\u0440\u043f\u0440\u0438\u0437, <strong>ObjectKey<\/strong>:<\/p>\n<pre><code class=\"dart\">TodoItemWidget(     key: ObjectKey(item),     item: item,     onDelete: () => _onDelete(index),     onChecked: (value) => _onChecked(value, index, item), ),<\/code><\/pre>\n<p>\u041f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0430\u043c\u044f\u0442\u0438 \u043e\u043d \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0430 \u0441 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438, \u0435\u0441\u043b\u0438 \u044d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u2014 \u043d\u0435 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e ObjectKey \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0a9\/597\/9d7\/0a95979d744ef0df1139c5f919cec6c6.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0a9\/597\/9d7\/0a95979d744ef0df1139c5f919cec6c6.gif\"\/><\/figure>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u0412 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 copyWith(). \u0418 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0447\u0435\u043a\u0431\u043e\u043a\u0441, \u0442\u043e \u0446\u0432\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0443\u0436\u0435 \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/293\/741\/6d8\/2937416d86b861454a3aef58c05f9681.gif\" width=\"1261\" height=\"719\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/293\/741\/6d8\/2937416d86b861454a3aef58c05f9681.gif\"\/><\/figure>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 id \u043a \u043c\u043e\u0434\u0435\u043b\u0438 TodoItem \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ValueKey(<a href=\"http:\/\/item.id\">item.id<\/a>):<\/p>\n<pre><code class=\"dart\">TodoItemWidget(     key: ValueKey(item.id),     item: item,     onDelete: () => _onDelete(index),     onChecked: (value) => _onChecked(value, index, item), ),<\/code><\/pre>\n<h2>\u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u043a\u043b\u044e\u0447 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h2>\n<p><strong>UniqueKey<\/strong> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439 (\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 TODO-\u043b\u0438\u0441\u0442), \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u043e\u0439 \u043a\u043b\u044e\u0447 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<p><strong>ValueKey<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041e\u043d \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, ID \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<p><strong>ObjectKey<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041e\u043d \u0432\u0430\u0436\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u043b\u0443\u0436\u0438\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0430.\u00a0<\/p>\n<h2>\u0410 \u043d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a GlobalKey<\/h2>\n<p><strong>GlobalKey<\/strong> \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0432\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0430 <strong>LocalKey<\/strong> \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<p><strong>GlobalKey<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e GlobalKey \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u043d \u0442\u044f\u0436\u0435\u043b\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u0430 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u0442\u044f\u0436\u0435\u043b\u043e\u0439 \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u044d\u0442\u043e \u0434\u0430\u0441\u0442 \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0442\u044f\u0436\u0435\u043b\u044b\u0439 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0442\u043e \u0431\u0435\u0437 GlobalKey \u044d\u0442\u043e\u0442 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>GlobalKey \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Form, Navigator, AnimationList. \u0410 \u0435\u0449\u0435 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442-\u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0415\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a \u0444\u043e\u0440\u043c\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0438\u00a0\u0432\u044b\u0437\u043e\u0432\u0435\u043c \u043c\u0435\u0442\u043e\u0434 validate() \u0438\u0437 \u0441\u0442\u0435\u0439\u0442\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n<pre><code class=\"dart\">class App extends StatefulWidget {  const App({super.key});   @override  AppState createState() {    return AppState();  } }  class AppState extends State&lt;App> {  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0435\u0451 \u043c\u0435\u0442\u043e\u0434\u0443 validate()  final _formKey = GlobalKey&lt;FormState>();   @override  Widget build(BuildContext context) {    return Form(      key: _formKey,      child: Column(        crossAxisAlignment: CrossAxisAlignment.start,        children: [          TextFormField(            validator: (value) {              if (value == null || value.isEmpty) {                return '\u041f\u043e\u043b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c';              }              return null;            },          ),          Padding(            padding: const EdgeInsets.symmetric(vertical: 16),            child: ElevatedButton(              onPressed: () {                \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 validate() \u0438\u0437 \u0441\u0442\u0435\u0439\u0442\u0430 \u0444\u043e\u0440\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447                if (_formKey.currentState!.validate()) {                  ScaffoldMessenger.of(context).showSnackBar(                    const SnackBar(content: Text('\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430...')),                  );                }              },              child: const Text('\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c'),            ),          ),        ],      ),    );  } <\/code><\/pre>\n<h2>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u0442\u043e\u0433<\/h2>\n<p>\u041a\u043b\u044e\u0447\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.\u00a0<\/p>\n<p><strong>GlobalKey <\/strong>\u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 State \u0443 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u0430.\u00a0<\/p>\n<p><strong>LocalKey<\/strong> \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0435\u0439. \u041a\u0430\u043a\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.\u00a0<\/p>\n<p><strong>ValueKey<\/strong> \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, ID \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430).\u00a0<\/p>\n<p><strong>ObjectKey <\/strong>\u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430.\u00a0<\/p>\n<p><strong>UniqueKey<\/strong> \u043f\u043e\u043c\u043e\u0436\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n<blockquote>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u043e Flutter \u2014 \u0432 Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 Surf Flutter Team. \u041a\u0435\u0439\u0441\u044b, \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u0438 \u0432\u0430\u043a\u0430\u043d\u0441\u0438\u0438 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 Flutter Surf \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.\u00a0<a href=\"https:\/\/t.me\/+PWoCHSSUnVBjMGYy\"><strong>\u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c<\/strong><\/a>!<\/p>\n<\/blockquote>\n<p>\u2192 <a href=\"https:\/\/github.com\/Evgenia-bit\/keys-example\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043a\u043e\u0434\u043e\u043c<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/813939\/\"> https:\/\/habr.com\/ru\/articles\/813939\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0416\u0435\u043d\u044f, Flutter-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u0446\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Surf. \u0418 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0441\u0451, \u0447\u0442\u043e \u0437\u043d\u0430\u044e, \u043f\u0440\u043e \u043a\u043b\u044e\u0447\u0438 \u0432\u043e Flutter.<\/p>\n<p>\u0412\u043e Flutter \u043c\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e key \u2014 \u043a\u043b\u044e\u0447.\u00a0 \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043d\u043e \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e \u0438, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c. \u041d\u043e \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0430\u0441\u0442\u0430\u043d\u0435\u0442 \u0445\u0430\u043e\u0441, \u0440\u0430\u0437\u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0431\u0430\u0433\u0438, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u043d\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u043d\u0435\u043f\u043e\u0434\u043e\u0431\u0430\u044e\u0449\u0435. \u041f\u0440\u0438\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u043a \u043b\u044e\u0434\u044f\u043c, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442, \u043d\u043e \u044f\u0432\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442 \u0432\u0430\u043c \u0436\u0438\u0437\u043d\u044c.\u00a0<\/p>\n<p>\u0423 \u043a\u043b\u044e\u0447\u0435\u0439 \u0432\u043e Flutter \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0435\u0439. \u0412\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f \u043a\u043b\u044e\u0447\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u2014 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0434\u0451\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0438 \u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Key?<\/h2>\n<p><strong>Key<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0435\u0441\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u0435. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u043e null, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c. <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 key \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u0430. \u041e\u043d\u043e \u0438\u0433\u0440\u0430\u0435\u0442 \u0432\u0430\u0436\u043d\u0443\u044e \u0440\u043e\u043b\u044c \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (<a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Element-class.html\">Element<\/a>).<\/p>\n<blockquote>\n<p>\u041a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0438 \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u0434\u0435\u0440\u0435\u0432\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0434\u0435\u0440\u0435\u0432\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 Flutter \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c\u00a0<a href=\"https:\/\/habr.com\/ru\/articles\/501862\/\">\u0442\u0443\u0442<\/a>.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0430 \u0435\u0433\u043e \u043a\u043b\u044e\u0447 \u0438 \u0442\u0438\u043f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b \u0441\u0442\u0430\u0440\u044b\u043c, \u0442\u043e \u0435\u0433\u043e Element \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0438\u0434\u0436\u0435\u0442. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Element \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d, \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u2014 Stateful. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 StatefulWidget \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442 State, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430. State \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 Element.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 State \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a Element, \u043a\u043b\u044e\u0447\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443.\u00a0<\/p>\n<p>\u041a\u043b\u044e\u0447\u0438 \u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043d\u0430 <strong>GlobalKey <\/strong>\u0438 <strong>LocalKey<\/strong>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438: <strong>UniqueKey<\/strong>, <strong>ValueKey<\/strong> \u0438 <strong>ObjectKey<\/strong>.<\/p>\n<p><strong>GlobalKey<\/strong> \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443.<\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <strong>LocalKey<\/strong> \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.\u00a0<\/p>\n<h2>LocalKey \u2014 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438<\/h2>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u0430. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b State \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 Stateful-\u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432.<\/p>\n<p><strong>UniqueKey<\/strong> \u2014 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0434\u0438\u043d \u0435\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0430\u0432\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435 \u2014 \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e Element \u0438 State.<\/p>\n<p><strong>ValueKey \u0438 ObjectKey <\/strong>\u043f\u043e\u0445\u043e\u0436\u0438. \u041e\u0431\u0430 \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043b\u044e\u0431\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a Flutter \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u0443 ValueKey:<\/p>\n<pre><code class=\"dart\">@override  bool operator ==(Object other) {    if (other.runtimeType != runtimeType) {      return false;    }    return other is ValueKey&lt;T>        &amp;&amp; other.value == value;  }<\/code><\/pre>\n<p>\u0418 \u0443 ObjectKey:<\/p>\n<pre><code class=\"dart\">@override  bool operator ==(Object other) {    if (other.runtimeType != runtimeType) {      return false;    }    return other is ObjectKey        &amp;&amp; identical(other.value, value);  }<\/code><\/pre>\n<p>\u041e\u043d\u0438 \u043f\u043e\u0447\u0442\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b (\u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0440\u043e\u043a\u0430). ValueKey \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 value \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 ==, \u0430 ObjectKey \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e identical(), \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435.<\/p>\n<h2>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 TODO-\u043b\u0438\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u044e\u0447\u0435\u0439. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u0430\u043b\u0438\u0442\u0440\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0446\u0432\u0435\u0442 \u0443 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0418 \u0435\u0449\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u2014 \u043a\u043e\u0434 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u0423 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438\u0437\u043d\u0430\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"dart\">\/\/\/ \u041c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0434\u0430\u0447\u0438 class TodoItem {  final String title;  final bool done;   const TodoItem({required this.title, this.done = false});   TodoItem copyWith({    String? title,    bool? done,  }) {    return TodoItem(      title: title ?? this.title,      done: done ?? this.done,    );  }   @override  bool operator ==(Object other) {    return identical(this, other) ||        (other is TodoItem &amp;&amp; runtimeType == other.runtimeType &amp;&amp; title == other.title &amp;&amp; done == other.done);  }   @override  int get hashCode => Object.hashAll([title, done]); }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438. \u0417\u0430\u0434\u0430\u0447\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0446\u0432\u0435\u0442, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0435\u0439 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430.<\/p>\n<pre><code class=\"dart\">\/\/\/ \u041f\u0430\u043b\u0438\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447 const todoItemColors = [  Colors.red,  Colors.yellow,  Colors.green,  Colors.blue,  Colors.purple,  Colors.orange,  Colors.pink, ];  \/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 class TodoItemWidget extends StatefulWidget {  final TodoItem item;  final VoidCallback onDelete;  final ValueChanged&lt;bool?> onChecked;   const TodoItemWidget({    super.key,    required this.item,    required this.onDelete,    required this.onChecked,  });   @override  State&lt;TodoItemWidget> createState() => _TodoItemWidgetState(); }  class _TodoItemWidgetState extends State&lt;TodoItemWidget> {  late final Color color;   @override  void initState() {    super.initState();    \/\/ \u041f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u0430\u043b\u0438\u0442\u0440\u044b    final randomIndex = Random().nextInt(todoItemColors.length);    color = todoItemColors[randomIndex];  }   @override  Widget build(BuildContext context) {    return Padding(      padding: const EdgeInsets.symmetric(vertical: 5),      child: ListTile(        tileColor: color,        leading: Checkbox(value: widget.item.done, onChanged: widget.onChecked),        trailing: IconButton(onPressed: widget.onDelete, icon: const Icon(Icons.delete)),        title: Text(widget.item.title),        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),      ),    );  } }<\/code><\/pre>\n<p>\u0410 \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 State \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f todoList).<\/p>\n<pre><code class=\"dart\">\/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447 class TodoList extends StatefulWidget {  const TodoList({super.key});   @override  State&lt;TodoList> createState() => _TodoListState(); }  class _TodoListState extends State&lt;TodoList> {  final List&lt;TodoItem> todoList = [];   @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'TODO-\u043b\u0438\u0441\u0442',      home: Scaffold(        appBar: AppBar(          title: const Text('TODO \u041b\u0438\u0441\u0442'),        ),        body: Padding(          padding: const EdgeInsets.symmetric(horizontal: 20.0),          child: Column(            children: [              \/\/ \u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438              TodoInput(                onAdd: _onAdd,              ),              const SizedBox(height: 20),              \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447              Expanded(                child: ListView(                  children: todoList                      .mapIndexed(                        (index, item) => TodoItemWidget(                          item: item,                          onDelete: () => _onDelete(index),                          onChecked: (value) => _onChecked(value, index, item),                        ),                      )                      .toList(),                ),              ),            ],          ),        ),      ),    );  }   void _onAdd(String value) {    setState(() {      todoList.add(TodoItem(title: value));    });  }   void _onDelete(int index) {    setState(() {      todoList.removeAt(index);    });  }   void _onChecked(bool? value, int index, TodoItem item) {    setState(() {      if (value != null) todoList[index] = item.copyWith(done: value);    });  } }   \/\/\/ \u0412\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 class TodoInput extends StatefulWidget {  final ValueChanged&lt;String> onAdd;  const TodoInput({super.key, required this.onAdd});   @override  State&lt;TodoInput> createState() => _TodoInputState(); }  class _TodoInputState extends State&lt;TodoInput> {  final TextEditingController _controller = TextEditingController();   @override  Widget build(BuildContext context) {    return TextField(      controller: _controller,      decoration: InputDecoration(        hintText: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0443',        suffix: IconButton(          onPressed: () => widget.onAdd(_controller.text),          icon: const Icon(Icons.add),        ),      ),    );  } }<\/code><\/pre>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0426\u0432\u0435\u0442 \u0443 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0442\u043e\u0439 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u0447, \u0430 \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u044b\u043b \u0441\u0432\u043e\u0439 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.\u00a0<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0414\u0435\u0440\u0435\u0432\u044c\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043f\u0440\u0430\u0432\u0430 3 \u043d\u0430\u0448\u0438\u0445 TodoItemWidget, \u043f\u0440\u043e\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430. \u0421\u043b\u0435\u0432\u0430 \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c\u0438 \u0441\u0442\u0435\u0439\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c.<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 key \u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e, \u0442\u043e \u0435\u0441\u0442\u044c null.\u00a0<\/p>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 setState, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0421\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447.\u041d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0442\u0440\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u00ab\u0436\u0438\u0432\u0443\u0442\u00bb \u0434\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u041f\u043e\u0441\u043b\u0435 Flutter \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u044b.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f (\u0435\u0441\u043b\u0438 \u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0434\u0430\u043b\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430), \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e. \u041e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441\u0442\u0430\u0440\u044b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442 \u0438\u0445 \u0442\u0438\u043f\u044b \u0438 \u043a\u043b\u044e\u0447\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0440\u0430\u0432\u043d\u044b, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u044e\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0432\u0438\u0434\u0436\u0435\u0442.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0442\u0435\u0445 \u0436\u0435 \u043c\u0435\u0441\u0442\u0430\u0445 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0442\u043e \u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0447\u0442\u043e \u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b Flutter \u043f\u0440\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u043b \u0438\u0445 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438. \u0412\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0438.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c <strong>UniqueKey<\/strong>:<\/p>\n<pre><code class=\"dart\">TodoItemWidget(     key: UniqueKey(),     item: item,     onDelete: () => _onDelete(index),     onChecked: (value) => _onChecked(value, index, item), ),<\/code><\/pre>\n<p>\u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c Flutter \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u0438 \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435. \u041d\u0430\u043f\u043e\u043c\u043d\u0438\u043c, \u043e\u0434\u0438\u043d \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 UniqueKey \u0440\u0430\u0432\u0435\u043d \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0435\u0431\u0435. \u0410 \u0443 \u043d\u0430\u0441 \u043e\u043d \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 TodoItemWidget.<\/p>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0438\u0445 \u043a\u043b\u044e\u0447\u0438 \u0443\u0436\u0435 \u043d\u0435 null. \u0410 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u044e\u0447 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u0435\u043d, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043a\u0430\u043a \u0443 \u0441\u0442\u0430\u0440\u043e\u0433\u043e.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Flutter \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0438<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-375995","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/375995","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=375995"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/375995\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=375995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=375995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=375995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}