{"id":297377,"date":"2020-01-20T09:00:27","date_gmt":"2020-01-20T09:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=297377"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=297377","title":{"rendered":"[\u041f\u043e \u0434\u043e\u043a\u0430\u043c] Flutter. \u0427\u0430\u0441\u0442\u044c 3. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 React Native"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/funcorp\/blog\/484284\/\">\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u044e <a href=\"https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/react-native-devs\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Flutter<\/a> \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u00ab\u0432\u043e\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442\u00bb. \u0412\u043e\u0442 \u0443\u0436\u0435 3-\u044f \u0447\u0430\u0441\u0442\u044c, \u0438 \u043e\u043d\u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 React Native-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 \u0447\u0430\u0441\u0442\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u0438\u043b\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uz\/dq\/re\/uzdqredcg54vtjzlihwr1mi2emk.jpeg\"><br \/>  <a name=\"habracut\"><\/a><br \/>  \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u0447\u0430\u0441\u0442\u0438:<\/p>\n<p>  <a href=\"https:\/\/habr.com\/ru\/company\/funcorp\/blog\/442432\/\">Flutter. \u0427\u0430\u0441\u0442\u044c 1. \u0414\u043b\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/a><br \/>  <a href=\"https:\/\/habr.com\/ru\/company\/funcorp\/blog\/477182\/\">Flutter. \u0427\u0430\u0441\u0442\u044c 2. \u0414\u043b\u044f iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/a><br \/>  <b>Flutter. \u0427\u0430\u0441\u0442\u044c 3. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 React Native<\/b><br \/>  Flutter. \u0427\u0430\u0441\u0442\u044c 4. \u0414\u043b\u044f Web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<br \/>  Flutter. \u0427\u0430\u0441\u0442\u044c 5. \u0414\u043b\u044f Xamarin.Forms-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/p>\n<h2>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435:<\/h2>\n<p>   <\/p>\n<ol>\n<li><a href=\"#dart\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e Dart<\/a><br \/> \n<ul>\n<li><a href=\"#entry_point\">\u0413\u0434\u0435 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430?<\/a><\/li>\n<li><a href=\"#concole\">\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c?<\/a><\/li>\n<li><a href=\"#fields\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\/\u043f\u043e\u043b\u044f?<\/a><\/li>\n<li><a href=\"#default_value\">\u041a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439\/\u043f\u043e\u043b\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e?<\/a><\/li>\n<li><a href=\"#null_check\">\u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 null \u0438\u043b\u0438 \u043d\u0430 0?<\/a><\/li>\n<li><a href=\"#functions\">\u041a\u0430\u043a \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438?<\/a><\/li>\n<li><a href=\"#promise\">\u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0443 Promise?<\/a><\/li>\n<li><a href=\"#async_await\">\u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 async \u0438 await?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#basic\">\u041e\u0441\u043d\u043e\u0432\u044b<\/a><br \/> \n<ul>\n<li><a href=\"#project\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Flutter?<\/a><\/li>\n<li><a href=\"#run\">\u041a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/a><\/li>\n<li><a href=\"#import\">\u041a\u0430\u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b?<\/a><\/li>\n<li><a href=\"#widget_tree\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432?<\/a><\/li>\n<li><a href=\"#reusable\">\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#project_structure\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/a><br \/> \n<ul>\n<li><a href=\"#code_start\">\u0413\u0434\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434?<\/a><\/li>\n<li><a href=\"#files_structure\">\u041a\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Flutter?<\/a><\/li>\n<li><a href=\"#resources\">\u0413\u0434\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0430\u0441\u0441\u0435\u0442\u044b \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/a><\/li>\n<li><a href=\"#network_images\">\u041a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0441\u0435\u0442\u0438?<\/a><\/li>\n<li><a href=\"#dependencies\">\u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#views\">Views<\/a><br \/> \n<ul>\n<li><a href=\"#view_analog\">\u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0443 View \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430?<\/a><\/li>\n<li><a href=\"#flatlist_selectionlist\">\u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 FlatList \u0438\u043b\u0438 SelectionList?<\/a><\/li>\n<li><a href=\"#canvas\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#layouts\">Layouts<\/a><br \/> \n<ul>\n<li><a href=\"#widgets_layout\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0438?<\/a><\/li>\n<li><a href=\"#widgets_positions\">\u041a\u0430\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043f\u0440\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0435?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#styles\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/a><br \/> \n<ul>\n<li><a href=\"#components_style\">\u041a\u0430\u043a \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/a><\/li>\n<li><a href=\"#colors_and_icons\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0446\u0432\u0435\u0442\u0430?<\/a><\/li>\n<li><a href=\"#theme\">\u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u043a\u0443\u044e \u0442\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#state_management\">State management<\/a><br \/> \n<ul>\n<li><a href=\"#widgets_update\">\u041a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#storage\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/a><br \/> \n<ul>\n<li><a href=\"#preferences\">\u041a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c key-value \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438?<\/a><\/li>\n<li><a href=\"#db\">\u041a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#navigation\">\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/a><br \/> \n<ul>\n<li><a href=\"#screens\">\u041a\u0430\u043a \u043d\u0430\u0432\u0438\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438?<\/a><\/li>\n<li><a href=\"#tab_navigation\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c tab navigation?<\/a><\/li>\n<li><a href=\"#drawer_navigation\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c drawer navigation?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#gestures\">\u0416\u0435\u0441\u0442\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 touch event<\/a><br \/> \n<ul>\n<li><a href=\"#on_click\">\u041a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u043a?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#http\">HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/a><br \/> \n<ul>\n<li><a href=\"#api\">\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#input\">\u0424\u043e\u0440\u043c\u0430 \u0432\u0432\u043e\u0434\u0430<\/a><br \/> \n<ul>\n<li><a href=\"#input_widgets\">\u041a\u0430\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#platform_specific\">Platform-specific code<\/a><br \/> \n<ul>\n<li><a href=\"#platform\">\u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0434?<\/a><\/li>\n<li><a href=\"#native\">\u041a\u0430\u043a \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#debug\">\u041e\u0442\u043b\u0430\u0434\u043a\u0430<\/a><br \/> \n<ul>\n<li><a href=\"#instruments\">\u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/a><\/li>\n<li><a href=\"#hot_reload\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c hot reload?<\/a><\/li>\n<li><a href=\"#developer_menu\">\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u0435\u043d\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#animation\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/a><br \/> \n<ul>\n<li><a href=\"#animation_usage\">\u0427\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438?<\/a><\/li>\n<li><a href=\"#fade_in\">\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e fade-in \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e?<\/a><\/li>\n<li><a href=\"#swipe_animation\">\u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u043c\u0430\u0445\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043f\u0438\u0441\u043a\u0430?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#components\">\u042d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a><br \/> \n<ul>\n<li><a href=\"#equivalents\">\u041a\u0430\u043a\u0438\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b \u0435\u0441\u0442\u044c \u0432\u043e Flutter \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 React Native?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<li><a href=\"#plugins\">\u041f\u043b\u0430\u0433\u0438\u043d\u044b Flutter<\/a><br \/> \n<ul>\n<li><a href=\"#gps\">\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a GPS?<\/a><\/li>\n<li><a href=\"#camera\">\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u043c\u0435\u0440\u0435?<\/a><\/li>\n<li><a href=\"#facebook\">\u041a\u0430\u043a \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Facebook?<\/a><\/li>\n<li><a href=\"#firebase\">\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Firebase?<\/a><\/li>\n<\/ul>\n<p>   <\/li>\n<\/ol>\n<p>  <a name=\"dart\"><\/a><\/p>\n<h2><b>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e Dart<\/b><\/h2>\n<p>  <a name=\"entry_point\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u0413\u0434\u0435 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>main()<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u043d\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430, \u0435\u044e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c. \u0412 Dart \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e <code>main()<\/code>.<\/p>\n<p>  <a name=\"concole\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>print()<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>console.log()<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">print('Hello world!');<\/code><\/pre>\n<p>  <a name=\"fields\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\/\u043f\u043e\u043b\u044f?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  Dart \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e, \u0438 \u0441\u0442\u0440\u043e\u0433\u0443\u044e \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435\/\u043f\u043e\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0430\u043c \u0432\u0438\u0434\u0435 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438. \u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u0438\u043d\u0430\u0440\u043d\u043e\u0435 =.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u0441\u0442\u0440\u043e\u0433\u0430\u044f \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/dart.dev\/guides\/language\/sound-dart\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">String name = 'dart'; \/\/ Explicitly typed as a string. var otherName = 'Dart'; \/\/ Inferred string. \/\/ Both are acceptable in Dart.<\/code><\/pre>\n<p>  <a name=\"default_value\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439\/\u043f\u043e\u043b\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <code>null<\/code><\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>undefined<\/code>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/dart.dev\/guides\/language\/language-tour#variables\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<p>  <a name=\"null_check\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>null<\/code> \u0438\u043b\u0438 \u043d\u0430 0?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044f\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 <code>==<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 <code>if<\/code> \u0447\u0438\u0441\u043b\u043e 1 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 <code>non-null<\/code> \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d <code>true<\/code>. \u0412 Dart \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0443\u043b\u0435\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>true<\/code> \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e <code>true<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">var myNull = null; if (myNull == null) {   print('use &quot;== null&quot; to check null'); } var zero = 0; if (zero == 0) {   print('use &quot;== 0&quot; to check zero'); }<\/code><\/pre>\n<p>  <a name=\"functions\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412 Dart \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u0430\u043a \u0438 \u043f\u043e\u043b\u044f, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438\u043b\u0438 \u0441\u0442\u0440\u043e\u0433\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043c\u0435\u043d\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u0430 \u0441\u0442\u0440\u043e\u0433\u043e \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0435\u0449\u0451 \u0438\u043c\u0435\u044e\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0442\u0438\u043f.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c <code>function<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0438\u043c\u044f \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u2014 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/dart.dev\/guides\/language\/language-tour#functions\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fn() {   return true; } \/\/ can also be written as bool fn() {   return true; }<\/code><\/pre>\n<p>  <a name=\"promise\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0443 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">Promise<\/a>?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <a href=\"https:\/\/api.dart.dev\/stable\/2.7.0\/dart-async\/Future-class.html\">Future<\/a><\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  Dart, \u043a\u0430\u043a \u0438 JavaScript, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. <a href=\"https:\/\/api.dart.dev\/stable\/2.7.0\/dart-async\/Future-class.html\">Future<\/a> \u0432 Dart \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0442\u043e \u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">Promise<\/a> \u0432 React Native.<br \/>  <a href=\"https:\/\/dart.dev\/codelabs\/async-await\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import 'dart:convert'; import 'package:http\/http.dart' as http;  class Example {   Future&lt;String&gt; _getIPAddress() {     final url = 'https:\/\/httpbin.org\/ip';     return http.get(url).then((response) {       String ip = jsonDecode(response.body)['origin'];       return ip;     });   } }  main() {   final example = new Example();   example       ._getIPAddress()       .then((ip) =&gt; print(ip))       .catchError((error) =&gt; print(error)); }<\/code><\/pre>\n<p>  <a name=\"async_await\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 <code>async<\/code> \u0438 <code>await<\/code>?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <code>async<\/code> \u0438 <code>await<\/code><\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 JavaScript async-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">Promise<\/a>, \u0432 Dart \u2014 <a href=\"https:\/\/api.dart.dev\/stable\/2.7.0\/dart-async\/Future-class.html\">Future<\/a>. await \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u0437\u043e\u0432\u0430 async-\u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/dart.dev\/guides\/language\/language-tour#asynchrony-support\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import 'dart:convert'; import 'package:http\/http.dart' as http;  class Example {   Future&lt;String&gt; _getIPAddress() async {     final url = 'https:\/\/httpbin.org\/ip';     final response = await http.get(url);     String ip = jsonDecode(response.body)['origin'];     return ip;   } }  main() async {   final example = new Example();   try {     final ip = await example._getIPAddress();     print(ip);   } catch (error) {     print(error);   } }<\/code><\/pre>\n<p>  <a name=\"basic\"><\/a><\/p>\n<h2><b>\u041e\u0441\u043d\u043e\u0432\u044b<\/b><\/h2>\n<p>  <a name=\"project\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Flutter?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442: <\/h4>\n<p>  <\/p>\n<ol>\n<li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e IDE \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 Flutter \u0438 Dart.<\/li>\n<li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>flutter create {projectname}<\/code>.<\/li>\n<\/ol>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <code>create-react-native-app {projectname}<\/code>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/get-started\/install\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<p>  <a name=\"run\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <\/p>\n<ol>\n<li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 run \u0432 IDE \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438 Flutter \u0438 Dart.<\/li>\n<li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>flutter run<\/code>.<\/li>\n<\/ol>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>npm run<\/code> \u0438\u043b\u0438 <code>yarn run<\/code>.<\/p>\n<p>  <a name=\"import\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412\u043e Flutter \u0432\u0441\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0440\u0430\u0437\u0431\u0438\u0442\u044b \u043f\u043e \u043f\u0430\u043a\u0435\u0442\u0430\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u044b.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import 'package:flutter\/material.dart'; import 'package:flutter\/cupertino.dart'; import 'package:flutter\/widgets.dart'; import 'package:flutter\/my_widgets.dart';<\/code><\/pre>\n<p>  <a name=\"widget_tree\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412\u043e Flutter \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 \u2014 \u0432\u0438\u0434\u0436\u0435\u0442\u044b. \u0414\u0430\u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0432\u0438\u0434\u0436\u0435\u0442. \u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u0438\u0434\u0436\u0435\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439. \u041a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0432\u044b \u0441\u0442\u0440\u043e\u0438\u0442\u0435 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u0434\u0435\u0440\u0435\u0432\u043e\u043c \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432\u00bb. \u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0430 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import 'package:flutter\/material.dart';  void main() =&gt; runApp(MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Welcome to Flutter',       home: Scaffold(         appBar: AppBar(           title: Text('Welcome to Flutter'),         ),         body: Center(           child: Text('Hello world'),         ),       ),     );   } }<\/code><\/pre>\n<p>  <a name=\"reusable\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412\u043e Flutter \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u044f\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430. <\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0445 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u0430\u043a props.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u043c\u043e\u0433\u0443\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435\u043c \u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a <code>{}<\/code>. \u041e\u0442\u043b\u0438\u0447\u0438\u044f \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430.<br \/>  \u041f\u0440\u0438 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u0438 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f, \u0442.\u043a. \u043e\u043d\u0438 \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u044b \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f.<br \/>  \u041f\u0440\u0438 \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0438\u043b\u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043e\u0432\u0441\u0435. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u0430\u043a \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044e <code>@required<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">class CustomCard extends StatelessWidget {   CustomCard({@required this.index, @required       this.onPress});    final index;   final Function onPress;    @override   Widget build(BuildContext context) {     return Card(       child: Column(         children: &lt;Widget&gt;[           Text('Card $index'),           FlatButton(             child: const Text('Press'),             onPressed: this.onPress,           ),         ],       )     );   } } ... \/\/ Usage CustomCard(   index: index,   onPress: () {      print('Card $index');   }, ) ...<\/code><\/pre>\n<p>  <a name=\"project_structure\"><\/a><\/p>\n<h2><b>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/b><\/h2>\n<p>  <a name=\"code_start\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u0413\u0434\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412 <code>{projectname}\/lib\/main.dart<\/code>.<\/p>\n<p>  <a name=\"files_structure\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Flutter?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <\/p>\n<pre><code class=\"xml\">\u252c \u2514 projectname   \u252c   \u251c android      - \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f Android \u0441\u0431\u043e\u0440\u043a\u0438.   \u251c build        -  iOS \u0438 Android \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0431\u043e\u0440\u043a\u0438.   \u251c ios          - \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f iOS \u0441\u0431\u043e\u0440\u043a\u0438.   \u251c lib          - Dart \u0444\u0430\u0439\u043b\u044b.     \u252c     \u2514 src        - Contains additional source files.     \u2514 main.dart  - \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.   \u251c test         - \u0424\u0430\u0439\u043b\u044b \u0442\u0435\u0441\u0442\u043e\u0432.   \u2514 pubspec.yaml - \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.                             \u0410\u043d\u0430\u043b\u043e\u0433 package.json \u0444\u0430\u0439\u043b\u0430 \u0432 React Native.<\/code><\/pre>\n<p>  <a name=\"resources\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u0413\u0434\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0430\u0441\u0441\u0435\u0442\u044b \u0438 \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>pubspec.yaml<\/code>. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 <code>lib<\/code>, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a \u043d\u0438\u043c \u043f\u0443\u0442\u044c \u0432 <code>pubspec.yaml<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u043b\u0438\u0431\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/api.flutter.dev\/flutter\/painting\/AssetImage-class.html\">AssetImage<\/a>, \u043b\u0438\u0431\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/api.flutter.dev\/flutter\/services\/AssetBundle-class.html\">AssetBundle<\/a>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/ui\/assets-and-images\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  \u0414\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0432 <code>pubspec.yaml<\/code>  <\/p>\n<pre><code class=\"xml\">flutter:   assets:     - assets\/my_icon.png     - assets\/background.png<\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435  <\/p>\n<pre><code class=\"kotlin\">image: AssetImage('assets\/background.png'),<\/code><\/pre>\n<p>  <a name=\"network_images\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0441\u0435\u0442\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Image\/Image.network.html\">Image.network<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">body: Image.network(           'https:\/\/flutter.io\/images\/owl.jpg',<\/code><\/pre>\n<p>  <a name=\"dependencies\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>dependencies<\/code> \u0432 <code>pubspec.yaml<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>yarn add {package-name}<\/code> \u0438\u043b\u0438 <code>npm install --save {package-name}<\/code>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/packages-and-plugins\/using-packages\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/a><br \/>  <a href=\"https:\/\/flutter.dev\/docs\/development\/packages-and-plugins\/developing-packages\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/a><br \/>  <a href=\"https:\/\/pub.dev\/flutter\/packages\">\u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f Flutter<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"xml\">dependencies:   flutter:     sdk: flutter   google_sign_in: ^3.0.3<\/code><\/pre>\n<p>  <a name=\"views\"><\/a><\/p>\n<h2><b>Views<\/b><\/h2>\n<p>  <a name=\"view_analog\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 \u0443 <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view\">View<\/a> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412\u0441\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043b\u044f \u0432\u0451\u0440c\u0442\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Container-class.html\">Container<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Column-class.html\">Column<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Row-class.html\">Row<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Center-class.html\">Center<\/a>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/ui\/widgets\/layout\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<p>  <a name=\"flatlist_selectionlist\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433 <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/flatlist\">FlatList<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/sectionlist\">SelectionList<\/a>?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/ListView-class.html\">ListView<\/a><\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">var data = [ ... ]; ListView.builder(   itemCount: data.length,   itemBuilder: (context, int index) {     return Text(       data[index],     );   }, )<\/code><\/pre>\n<p>  <a name=\"canvas\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/CustomPaint-class.html\">CustomPaint<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/rendering\/CustomPainter-class.html\">CustomPainter<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0415\u0441\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>react-native-canvas<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">class MyCanvasPainter extends CustomPainter {    @override   void paint(Canvas canvas, Size size) {     Paint paint = Paint();     paint.color = Colors.amber;     canvas.drawCircle(Offset(100.0, 200.0), 40.0, paint);     Paint paintRect = Paint();     paintRect.color = Colors.lightBlue;     Rect rect = Rect.fromPoints(Offset(150.0, 300.0), Offset(300.0, 400.0));     canvas.drawRect(rect, paintRect);   }    bool shouldRepaint(MyCanvasPainter oldDelegate) =&gt; false;   bool shouldRebuildSemantics(MyCanvasPainter oldDelegate) =&gt; false; } class _MyCanvasState extends State&lt;MyCanvas&gt; {    @override   Widget build(BuildContext context) {     return Scaffold(       body: CustomPaint(         painter: MyCanvasPainter(),       ),     );   } }<\/code><\/pre>\n<p>  <a name=\"layouts\"><\/a><\/p>\n<h2><b>Layouts<\/b><\/h2>\n<p>  <a name=\"widgets_layout\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0412\u043e Flutter \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<br \/>  <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Column-class.html\">Column<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Row-class.html\">Row<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Padding-class.html\">Padding<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Align-class.html\">Align<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Stack-class.html\">Stack<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>props<\/code>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/ui\/widgets\/layout\">\u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432<\/a><\/p>\n<p>  <a name=\"widgets_positions\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u043f\u0440\u0438 \u0432\u0451\u0440\u0441\u0442\u043a\u0435?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0414\u043b\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0436\u0435\u0442 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Stack-class.html\">Stack<\/a>. \u0414\u043b\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u2014 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438 \u0438\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/flutter.dev\/docs\/development\/ui\/widgets\/layout\">\u0437\u0434\u0435\u0441\u044c<\/a>. <\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">Stack(   alignment: const Alignment(0.6, 0.6),   children: &lt;Widget&gt;[     CircleAvatar(       backgroundImage: NetworkImage(         'https:\/\/avatars3.githubusercontent.com\/u\/14101776?v=4'),     ),     Container(       decoration: BoxDecoration(           color: Colors.black45,       ),       child: Text('Flutter'),     ),   ], )<\/code><\/pre>\n<p>  <a name=\"styles\"><\/a><\/p>\n<h2><b>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/b><\/h2>\n<p>  <a name=\"components_style\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0443 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>style<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>stylesheets.create<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight:    FontWeight.w600); \t... Center(   child: Column(     children: &lt;Widget&gt;[       Text(         'Sample text',         style: textStyle,       ),       Padding(         padding: EdgeInsets.all(20.0),         child: Icon(Icons.lightbulb_outline,           size: 48.0, color: Colors.redAccent)       ),     ],   ), ) <\/code><\/pre>\n<p>  <a name=\"colors_and_icons\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0446\u0432\u0435\u0442\u0430?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Icons-class.html\">Icons<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Colors-class.html.\">Colors<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  Icons  <\/p>\n<pre><code class=\"kotlin\">Icon(Icons.lightbulb_outline, color: Colors.redAccent)<\/code><\/pre>\n<p>  Colors  <\/p>\n<pre><code class=\"kotlin\">class SampleApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Sample App',       theme: ThemeData(         primarySwatch: Colors.blue,         textSelectionColor: Colors.red       ),       home: SampleAppPage(),     );   } }<\/code><\/pre>\n<p>  <a name=\"theme\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u043a\u0443\u044e \u0442\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/ThemeData-class.html\">ThemeData<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u043e\u0431\u0449\u0430\u044f \u0442\u0435\u043c\u0430 \u043d\u0430\u0441\u0442\u0440\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>stylesheets<\/code>.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"kotlin\">@override   Widget build(BuildContext context) {     return Theme(       data: ThemeData(         primaryColor: Colors.cyan,         brightness: brightness,       ),       child: Scaffold(          backgroundColor: Theme.of(context).primaryColor,               ...               ...       ),     );   }<\/code><\/pre>\n<p>  <a name=\"state_management\"><\/a><\/p>\n<h2><b>State management<\/b><\/h2>\n<p>  <a name=\"widgets_update\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/StatefulWidget-class.html\">StatefulWidget<\/a> \u0438 \u0435\u0433\u043e <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/State-class.html\">State<\/a>. \u0412\u043e Flutter \u0435\u0441\u0442\u044c 2 \u0432\u0438\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432: <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/StatelessWidget-class.html\">StatelessWidget<\/a> \u0438 <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/StatefulWidget-class.html\">StatefulWidget<\/a>. \u041e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/StatelessWidget-class.html\">StatelessWidget<\/a> \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438 \u0442.\u0434. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d \u0432\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0441 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n<p>  <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/StatefulWidget-class.html\">StatefulWidget<\/a> \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/State-class.html\">State<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f (\u043f\u0440\u0438\u0448\u0451\u043b \u043e\u0442\u0432\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0430\u043b \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u0442.\u0434.) \u2014 \u044d\u0442\u043e \u0432\u0430\u0448 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. <\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  1) StatelessWidget \u2014 Text  <\/p>\n<pre><code class=\"kotlin\">Text(   'I like Flutter!',   style: TextStyle(fontWeight: FontWeight.bold), );<\/code><\/pre>\n<p>  2) StatefulWidget \u2014 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 (FloatingActionButton) \u0442\u0435\u043a\u0441\u0442 \u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0435 Text \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441 <i>I Like Flutter<\/i> \u043d\u0430 <i>Flutter is Awesome!<\/i>  <\/p>\n<pre><code class=\"kotlin\">import 'package:flutter\/material.dart';  void main() {   runApp(SampleApp()); }  class SampleApp extends StatelessWidget {   \/\/ \u042d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Sample App',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: SampleAppPage(),     );   } }  class SampleAppPage extends StatefulWidget {   SampleAppPage({Key key}) : super(key: key);    @override   _SampleAppPageState createState() =&gt; _SampleAppPageState(); }  class _SampleAppPageState extends State&lt;SampleAppPage&gt; {   \/\/ \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442   String textToShow = &quot;\u041c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f Flutter&quot;;    void _updateText() {     setState(() {       \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430       textToShow = &quot;Flutter \u043a\u0440\u0443\u0442\u043e\u0439!&quot;;     });   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text(&quot;Sample App&quot;),       ),       body: Center(child: Text(textToShow)),       floatingActionButton: FloatingActionButton(         onPressed: _updateText,         tooltip: '\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442',         child: Icon(Icons.update),       ),     );   } }<\/code><\/pre>\n<p>  <a name=\"storage\"><\/a><\/p>\n<h2><b>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435<\/b><\/h2>\n<p>  <a name=\"preferences\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c <code>key-value<\/code> \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/pub.dev\/packages\/shared_preferences\">shared_preferences<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/asyncstorage\">AsyncStorage<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438  <\/p>\n<pre><code class=\"xml\">dependencies:   flutter:     sdk: flutter   shared_preferences: ^0.4.3<\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435  <\/p>\n<pre><code class=\"kotlin\">SharedPreferences prefs = await SharedPreferences.getInstance(); _counter = prefs.getInt('counter'); prefs.setInt('counter', ++_counter); setState(() {   _counter = _counter; });<\/code><\/pre>\n<p>  <a name=\"db\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0411\u0414, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/pub.dev\/packages\/sqflite\">sqflite<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/pub.dev\/packages\/hive\">hive<\/a>.<\/p>\n<p>  <a name=\"navigation\"><\/a><\/p>\n<h2><b>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/b><\/h2>\n<p>  <a name=\"screens\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043d\u0430\u0432\u0438\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Navigator-class.html\">Navigator<\/a> \u0438 <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Route-class.html\">Route<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/reactnavigation.org\/docs\/en\/1.x\/stack-navigator.html\">StackNavigator<\/a>, <a href=\"https:\/\/reactnavigation.org\/docs\/en\/next\/tab-based-navigation.html#docsNav\">TabNavigator<\/a> \u0438 <a href=\"https:\/\/reactnavigation.org\/docs\/en\/next\/drawer-based-navigation.html#docsNav\">DrawerNavigator<\/a>.<\/p>\n<p>  \u0412\u043e Flutter \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\u043e\u043f\u0438\u0441\u0430\u0442\u044c Map \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Route-class.html\">Route<\/a>;<\/li>\n<li>\u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0430\u0432\u0438\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Route-class.html\">Route<\/a>.<\/li>\n<\/ol>\n<p>  <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Navigator-class.html\">Navigator<\/a> \u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Navigator\/push.html\">push()<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/docs.flutter.io\/flutter\/widgets\/Navigator\/pop.html\">pop()<\/a> \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0432\u0430\u043c\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">void main() {   runApp(CupertinoApp(     home: MyAppHome(), \/\/ becomes the route named '\/'     routes: &lt;String, WidgetBuilder&gt; {       '\/a': (BuildContext context) =&gt; MyPage(title: 'page A'),       '\/b': (BuildContext context) =&gt; MyPage(title: 'page B'),       '\/c': (BuildContext context) =&gt; MyPage(title: 'page C'),     },   )); }  Navigator.of(context).pushNamed('\/b');<\/code><\/pre>\n<p>  <a name=\"tab_navigation\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c tab navigation?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432: <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabController-class.html\">TabController<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBar-class.html\">TabBar<\/a>, <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Tab-class.html\">Tab<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBarView-class.html\">TabBarView<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/reactnavigation.org\/docs\/en\/next\/tab-based-navigation.html#docsNav\">createBottomTabNavigator \u0438 TabNavigation<\/a>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabController-class.html\">TabController<\/a> \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0438\u0440\u0443\u0435\u0442 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBar-class.html\">TabBar<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBarView-class.html\">TabBarView<\/a>;<\/li>\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBar-class.html\">TabBar<\/a> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0430\u0431\u043e\u0432;<\/li>\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Tab-class.html\">Tab<\/a> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0442\u0430\u0431;<\/li>\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TabBarView-class.html\">TabBarView<\/a> \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0430\u0431\u0430.<\/li>\n<\/ul>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/cookbook\/design\/tabs\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">class _NavigationHomePageState extends State&lt;NavigationHomePage&gt; with SingleTickerProviderStateMixin {   TabController controller=TabController(length: 2, vsync: this);   @override   Widget build(BuildContext context) {     return Scaffold(       bottomNavigationBar: Material (         child: TabBar(           tabs: &lt;Tab&gt; [             Tab(icon: Icon(Icons.person),)             Tab(icon: Icon(Icons.email),),           ],           controller: controller,         ),         color: Colors.blue,       ),       body: TabBarView(         children: &lt;Widget&gt; [           home.homeScreen(),           tabScreen.tabScreen()         ],         controller: controller,       )     );   } } <\/code><\/pre>\n<p>  <a name=\"drawer_navigation\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c drawer navigation?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Drawer-class.html\">Drawer<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/reactnavigation.org\/docs\/en\/next\/drawer-based-navigation.html#docsNav\">createDrawerNavigator \u0438 DrawerNavigation<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@override Widget build(BuildContext context) {   return Scaffold(     drawer: Drawer(       child: ListTile(         leading: Icon(Icons.change_history),         title: Text('Screen2'),         onTap: () {           Navigator.of(context).pushNamed('\/b');         },       ),       elevation: 20.0,     ),     appBar: AppBar(       title: Text('Home'),     ),     body: Container(),   ); }<\/code><\/pre>\n<p>  <a name=\"gestures\"><\/a><\/p>\n<h2><b>\u0416\u0435\u0441\u0442\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 touch event<\/b><\/h2>\n<p>  <a name=\"on_click\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u043a?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u0438\u043a\u0438, \u0442\u043e \u0432 <code>onPressed()<\/code>. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/GestureDetector-class.html\">GestureDetector<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/panresponder\">PanResponder<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/handling-touches#touchables\">Touchable<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">GestureDetector(   child: Scaffold(     appBar: AppBar(       title: Text('Gestures'),     ),     body: Center(       child: Column(         mainAxisAlignment: MainAxisAlignment.center,         children: &lt;Widget&gt;[           Text('Tap, Long Press, Swipe Horizontally or Vertically '),         ],       )     ),   ),   onTap: () {     print('Tapped');   },   onLongPress: () {     print('Long Pressed');   },   onVerticalDragEnd: (DragEndDetails value) {     print('Swiped Vertically');   },   onHorizontalDragEnd: (DragEndDetails value) {     print('Swiped Horizontally');   }, );<\/code><\/pre>\n<p>  <a name=\"http\"><\/a><\/p>\n<h2><b>HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/b><\/h2>\n<p>  <a name=\"api\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/pub.dev\/packages\/http\">http-\u043f\u043b\u0430\u0433\u0438\u043d\u0430<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>fetch API<\/code>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430  <\/p>\n<pre><code class=\"xml\">dependencies:   flutter:     sdk: flutter   http: &lt;latest_version&gt;<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445  <\/p>\n<pre><code class=\"kotlin\">final url = Uri.https('httpbin.org', 'ip'); final httpClient = HttpClient(); _getIPAddress() async {   var request = await httpClient.getUrl(url);   var response = await request.close();   var responseBody = await response.transform(utf8.decoder).join();   String ip = jsonDecode(responseBody)['origin'];   setState(() {     _ipAddress = ip;   }); }<\/code><\/pre>\n<p>  <a name=\"input\"><\/a><\/p>\n<h2><b>\u0424\u043e\u0440\u043c\u0430 \u0432\u0432\u043e\u0434\u0430<\/b><\/h2>\n<p>  <a name=\"input_widgets\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TextField-class.html\">TextField<\/a> \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/TextEditingController-class.html\">TextEditingController<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TextFormField-class.html\">TextFormField<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/textinput\">TextInput<\/a>.<br \/>  <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TextFormField-class.html\">TextFormField<\/a> \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/TextField-class.html\">TextField<\/a> \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439 \u0438 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043f\u043e\u043b\u044f.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  TextField  <\/p>\n<pre><code class=\"kotlin\">final TextEditingController _controller = TextEditingController();       ... TextField(   controller: _controller,   decoration: InputDecoration(     hintText: 'Type something', labelText: 'Text Field '   ), ), RaisedButton(   child: Text('Submit'),   onPressed: () {     showDialog(       context: context,         child: AlertDialog(           title: Text('Alert'),           content: Text('You typed ${_controller.text}'),         ),      );    },  ), )<\/code><\/pre>\n<p>  TextFormField  <\/p>\n<pre><code class=\"kotlin\">final formKey = GlobalKey&lt;FormState&gt;(); ... Form(   key:formKey,   child: Column(     children: &lt;Widget&gt;[       TextFormField(         validator: (value) =&gt; !value.contains('@') ? 'Not a valid email.' : null,         onSaved: (val) =&gt; _email = val,         decoration: const InputDecoration(           hintText: 'Enter your email',           labelText: 'Email',         ),       ),       RaisedButton(         onPressed: _submit,         child: Text('Login'),       ),     ],   ), )  void _submit() {   final form = formKey.currentState;   if (form.validate()) {     form.save();     showDialog(       context: context,       child: AlertDialog(         title: Text('Alert'),         content: Text('Email: $_email, password: $_password'),       )     );   } } <\/code><\/pre>\n<p>  <a name=\"platform_specific\"><\/a><\/p>\n<h2><b>Platform-specific code<\/b><\/h2>\n<p>  <a name=\"platform\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0434?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 \u043f\u043e\u043b\u044f <code>platform<\/code> \u0432 <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Theme-class.html\">Theme<\/a> \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"https:\/\/api.flutter.dev\/flutter\/package-platform_platform\/Platform-class.html\">Platform<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  \u041f\u043e\u043b\u0435 <code>platform<\/code>  <\/p>\n<pre><code class=\"kotlin\">if (Theme.of(context).platform == TargetPlatform.iOS) {   return 'iOS'; } else if (Theme.of(context).platform == TargetPlatform.android) {   return 'android'; } else if (Theme.of(context).platform == TargetPlatform.fuchsia) {   return 'fuchsia'; } else {   return 'not recognised '; }<\/code><\/pre>\n<p>  \u041a\u043b\u0430\u0441\u0441 Platform  <\/p>\n<pre><code class=\"kotlin\">if (Platform.isIOS) {   return 'iOS'; } else if (Platform.isAndroid) {   return 'android'; } else if (Platform.isFuchsia) {   return 'fuchsia'; } else {   return 'not recognised '; }<\/code><\/pre>\n<p>  <a name=\"native\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0427\u0435\u0440\u0435\u0437 <a href=\"https:\/\/api.flutter.dev\/flutter\/services\/MethodChannel-class.html\">MethodChannel<\/a>. <\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/platform-integration\/platform-channels\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a>.<\/p>\n<p>  <a name=\"debug\"><\/a><\/p>\n<h2><b>\u041e\u0442\u043b\u0430\u0434\u043a\u0430<\/b><\/h2>\n<p>  <a name=\"instruments\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/tools\/devtools\">DevTools<\/a>.<\/p>\n<p>  <a name=\"hot_reload\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c <code>hot reload<\/code>?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u043e\u0441\u044c \u0438\u0437 IntelliJ IDE \u0438\u043b\u0438 Android Studio, \u0442\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c <code>\u2318s\/ctrl-s<\/code> \u0438\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443 <code>hot reload<\/code>. \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u043e\u0441\u044c \u0438\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430, \u0442\u043e \u0432\u0432\u043e\u0434\u043e\u043c \u0431\u0443\u043a\u0432\u044b <code>r<\/code>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0434\u043b\u044f iOS-\u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 <code>\u2318R\/Ctrl+R<\/code>, \u0434\u043b\u044f Android \u2014 \u0434\u0432\u043e\u0439\u043d\u043e\u0435 <code>R<\/code>.<\/p>\n<p>  <a name=\"developer_menu\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u0435\u043d\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u0431\u044b\u043b \u0438\u0437 IDE, \u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 IDE. \u0415\u0441\u043b\u0438 \u0438\u0437 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0432\u043e\u0434\u0430 h.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <code>\u2318D\/Ctrl+D<\/code> \u0434\u043b\u044f iOS \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u043e\u0432 \u0438 <code>\u2318M\/Ctrl+M<\/code> \u0434\u043b\u044f Android.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u043e\u043c\u0430\u043d\u0434<\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td><b>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435<\/b><\/td>\n<td><b>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435<\/b><\/td>\n<td><b>\u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043f\u043e\u043b\u044f<\/b><\/td>\n<\/tr>\n<tr>\n<td>\u0418\u0435\u0440\u0430\u0440\u0445\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432<\/td>\n<td>w<\/td>\n<td>debugDumpApp()<\/td>\n<\/tr>\n<tr>\n<td>\u0414\u0435\u0440\u0435\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/td>\n<td>t<\/td>\n<td>debugDumpRenderTree()<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u043b\u043e\u0438<\/td>\n<td>L<\/td>\n<td>debugDumpLayerTree()<\/td>\n<\/tr>\n<tr>\n<td>Accessibility<\/td>\n<td>S (traversal order) or U (inverse hit test order)<\/td>\n<td>debugDumpSemantics()<\/td>\n<\/tr>\n<tr>\n<td>\u0418\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432<\/td>\n<td>i<\/td>\n<td>WidgetsApp.showWidgetInspectorOverride<\/td>\n<\/tr>\n<tr>\n<td>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f<\/td>\n<td>p<\/td>\n<td>debugPaintSizeEnabled<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u0438\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u041e\u0421<\/td>\n<td>o<\/td>\n<td>defaultTargetPlatform<\/td>\n<\/tr>\n<tr>\n<td>\u041f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441<\/td>\n<td>P<\/td>\n<td>WidgetsApp. showPerformanceOverlay<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442 flutter.png<\/td>\n<td>s<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>\u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/td>\n<td>q<\/td>\n<td><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>  <a name=\"animation\"><\/a><\/p>\n<h2><b>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/b><\/h2>\n<p>  <a name=\"animation_usage\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u0427\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <a href=\"https:\/\/api.flutter.dev\/flutter\/animation\/Animation-class.html\">Animation<\/a> \u0438 <a href=\"https:\/\/api.flutter.dev\/flutter\/animation\/AnimationController-class.html\">AnimationController<\/a>.<\/p>\n<h4>\u041e\u0442\u043b\u0438\u0447\u0438\u044f:<\/h4>\n<p>  \u0412 React Native \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>Animation API<\/code>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f:<\/h4>\n<p>  <a href=\"https:\/\/flutter.dev\/docs\/development\/ui\/animations\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442.<\/a><\/p>\n<p>  <a name=\"fade_in\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e <code>fade-in<\/code> \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/FadeTransition-class.html\">FadeTransition<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">import 'package:flutter\/material.dart';  void main() {   runApp(Center(child: LogoFade())); }  class LogoFade extends StatefulWidget {   _LogoFadeState createState() =&gt; _LogoFadeState(); }  class _LogoFadeState extends State&lt;LogoFade&gt; with TickerProviderStateMixin {   Animation animation;   AnimationController controller;    initState() {     super.initState();     controller = AnimationController(         duration: const Duration(milliseconds: 3000), vsync: this);     final CurvedAnimation curve =     CurvedAnimation(parent: controller, curve: Curves.easeIn);     animation = Tween(begin: 0.0, end: 1.0).animate(curve);     controller.forward();   }    Widget build(BuildContext context) {     return FadeTransition(       opacity: animation,       child: Container(         height: 300.0,         width: 300.0,         child: FlutterLogo(),       ),     );   }    dispose() {     controller.dispose();     super.dispose();   } }<\/code><\/pre>\n<p>  <a name=\"swipe_animation\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0441\u043c\u0430\u0445\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043f\u0438\u0441\u043a\u0430?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Dismissible-class.html\">Dismissible<\/a>.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0440:<\/h4>\n<p>  <\/p>\n<pre><code class=\"kotlin\">child: Dismissible(   key: key,   onDismissed: (DismissDirection dir) {     cards.removeLast();   },   child: Container(     ...   ), ),<\/code><\/pre>\n<p>  <a name=\"components\"><\/a><\/p>\n<h2><b>\u042d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/b><\/h2>\n<p>  <a name=\"equivalents\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u044b \u0435\u0441\u0442\u044c \u0432\u043e Flutter \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 React Native?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tr>\n<td><b>React Native<\/b><\/td>\n<td><b>Flutter<\/b><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/button.html\">Button<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/RaisedButton-class.html\">RaisedButton<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/button.html\">Button<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/FlatButton-class.html\">FlatButton<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/scrollview.html\">ScrollView<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/ListView-class.html\">ListView<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/flatlist.html\">FlatList<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/ListView\/ListView.builder.html\">ListView.builder()<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/image.html\">Image<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Image-class.html\">Image<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/modal.html\">Modal<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/ModalRoute-class.html\">ModalRoute<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/activityindicator.html\">ActivityIndicator<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/CircularProgressIndicator-class.html\">CircularProgressIndicator<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/activityindicator.html\">ActivityIndicator<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/LinearProgressIndicator-class.html\">LinearProgressIndicator<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/refreshcontrol.html\">RefreshControl<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/RefreshIndicator-class.html\">RefreshIndicator<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view.html\">View<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Container-class.html\">Container<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view.html\">View<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Column-class.html\">Column<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view.html\">View<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Row-class.html\">Row<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view.html\">View<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Center-class.html\">Center<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/view.html\">View<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Padding-class.html\">Padding<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/touchableopacity.html\">TouchableOpacity<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/GestureDetector-class.html\">GestureDetector<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/services\/TextInput-class.html\">TextInput<\/a><\/td>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/textinput.html\">TextInput<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/text.html\">Text<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/Text-class.html\">Text<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/switch.html\">Switch<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Switch-class.html\">Switch<\/a><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/slider.html\">Slider<\/a><\/td>\n<td><a href=\"https:\/\/api.flutter.dev\/flutter\/material\/Slider-class.html\">Slider<\/a><\/td>\n<\/tr>\n<\/table>\n<\/div>\n<p>  <a name=\"plugins\"><\/a><\/p>\n<h2><b>\u041f\u043b\u0430\u0433\u0438\u043d\u044b Flutter<\/b><\/h2>\n<p>  <a name=\"gps\"><\/a><\/p>\n<h3>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h3>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a GPS?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/pub.dartlang.org\/packages\/geolocator\">geolocator<\/a>.<\/p>\n<p>  <a name=\"camera\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u0430\u043c\u0435\u0440\u0435?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/pub.dartlang.org\/packages\/image_picker\">image_picker<\/a>.<\/p>\n<p>  <a name=\"facebook\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Facebook?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/pub.dartlang.org\/packages\/flutter_facebook_login\">flutter_facebook_login<\/a>.<\/p>\n<p>  <a name=\"firebase\"><\/a><\/p>\n<h4>\u0412\u043e\u043f\u0440\u043e\u0441:<\/h4>\n<p>  \u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Firebase?<\/p>\n<h4>\u041e\u0442\u0432\u0435\u0442:<\/h4>\n<p>  Firebase \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/pub.dartlang.org\/flutter\/packages?q=firebase\">Flutter first party plugins<\/a>:<\/p>\n<ul>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_admob\">firebase_admob<\/a> \u0434\u043b\u044f Firebase AdMob;<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_analytics\">firebase_analytics<\/a> \u0434\u043b\u044f Firebase Analytics;<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_auth\">firebase_auth<\/a> \u0434\u043b\u044f Firebase Auth;<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_database\">firebase_database<\/a> \u0434\u043b\u044f Firebase RTDB;<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_storage\">firebase_storage<\/a> \u0434\u043b\u044f Firebase Cloud Storage;<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/firebase_messaging\">firebase_messaging<\/a> \u0434\u043b\u044f Firebase Messaging (FCM);<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/flutter_firebase_ui\">flutter_firebase_ui<\/a> \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Firebase Auth (Facebook, Google, Twitter and e-mail);<\/li>\n<li><a href=\"https:\/\/pub.dartlang.org\/packages\/cloud_firestore\">cloud_firestore<\/a> \u0434\u043b\u044f Firebase Cloud Firestore.<\/li>\n<\/ul>\n<p>  \u0412\u043e\u0442, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u043e\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u0430, \u0438 \u0435\u0441\u043b\u0438 \u0432\u044b \u0435\u0449\u0451 \u043d\u0435 \u043f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430 Flutter, \u0442\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u043e\u0431 \u044d\u0442\u043e\u043c. \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 \u043f\u043e\u043b\u043a\u0443 Flutter \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0438 \u043c\u044b \u0432\u043c\u0435\u0441\u0442\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u0440 \u043b\u0443\u0447\u0448\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u0438\u0437\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439! \u0414\u0430 \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0435\u0442 React \u0432\u0430\u0448 Native!<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/funcorp\/blog\/484284\/\"> https:\/\/habr.com\/ru\/company\/funcorp\/blog\/484284\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/company\/funcorp\/blog\/484284\/\">\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u044e <a href=\"https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/react-native-devs\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Flutter<\/a> \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u00ab\u0432\u043e\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442\u00bb. \u0412\u043e\u0442 \u0443\u0436\u0435 3-\u044f \u0447\u0430\u0441\u0442\u044c, \u0438 \u043e\u043d\u0430 \u0432 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 React Native-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0446\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043e\u0442\u0432\u0435\u0442\u044b \u043d\u0430 \u0447\u0430\u0441\u0442\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u0438\u043b\u0438\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/uz\/dq\/re\/uzdqredcg54vtjzlihwr1mi2emk.jpeg\">  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-297377","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297377","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=297377"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/297377\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=297377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=297377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=297377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}