Intro to Flutter
1.0.0
Для людей, которые уже знают Android:
UI - Android нуждается в интеграции XML, тогда как все является виджетом в Flutter и может быть сделано в одном файле
Слушатели больше нет слушателей для OnClicks, звоните методам, измените состояние и наслаждайтесь представлением
FindView - больше нет findViewById () - просто сделайте все внутри Widget () {} и оставьте находку на Android
Gradle - больше нет проблем Gradle - добавить зависимости в файле pubspec.yaml и обновить приложение для использования новых библиотек
Активы - должны управляться отдельно в Flutter, вы должны объявить все, что используете, например: изображения, шрифты. В Android вы можете просто добавить его в раздел файла и использовать их.
Анимации намного проще и хорошо поддерживаются в Flutter - Основное использование - например: активность брызг, вкладки с переворотами, результаты, страница аналитики, навигация
Запуск приложения - горячая перезагрузка в Flutter - просто нажмите «R» для перезагрузки и «R» для перезапуска приложения. Android Studio может занять до 20-30 секунд для каждой перезагрузки, и даже больше, если есть проблемы с градами, которые всплывают время от времени
API - API -API -интерфейсы можно сделать с помощью различных библиотек, таких как модернизация с использованием GSON, тогда как извлечение в трепетание может быть сделано без какой -либо боли. Общая функция извлечения может использоваться в Flutter и имеет асинхронные методы для вызова API.
Взгляд Recycler/List - View Recycler используется в Android для создания различных списков на экране. Нам нужен адаптер для того, что имеет интерфейс, и нам нужно знать все виды различных функций, чтобы полностью его реализовать. У Flutter просто есть виджет для ListView, где мы можем определить разные списки или просто добавлять вещи динамически. Гораздо проще, выглядит проще.
Кривая обучения - работать в Flutter легче, как только вы знаете Dart, что похоже на JavaScript, и понять основные понятия о виджетах. Android позволяет создавать макеты с помощью дизайнера, который можно использовать для создания макетов ограничений. Сделать основные приложения, безусловно, легче выучить в Android, но, поскольку мы углубимся в фрагменты и другие вещи, это начинает усложняться
Фрагменты против компонентов (виджеты) - мы можем просто использовать компонент виджетов, где бы мы ни ходили, в отличие от фрагментов, которые мы производим в Android, которые требуют некоторых знаний перед рукой о том, как использовать комплект, адаптеры, макеты XML и различные методы, такие как OncreateView и Layoutinflator
База данных SQL - она очень похожа в обеих технологиях. Единственное отличие состоит в том, что управление государством может стать в действие, если вы пытаетесь добавить что -то последовательно, вам придется сохранить ключ в состоянии и изменить его с помощью SetState () {_ Key+= 1} -> просто вариант использования. Библиотека номеров в Android довольно широко используется и легко внедрить
Архитектурные узоры - все сводится к MVP/ MVVM/ MVC в Android, тогда как у нас есть блок и поставщики в Flutter, которые делают что -то похожее на MVC, разделяя бизнес -логику, создавая раковины и потоки
Редактор кода - Vscode/Android Studio - Flutter и Android Studio для Android
Руководство по началу работы - довольно быстро для Android, скачать студию и начать, тогда как вам нужно сделать кучу вещей для трепета - может быть раздражающим
Firebase - Ресурсы для Flutter Firebase: -
https://firebase.google.com/docs/flutter/setup
https://flutter.dev/docs/development/data-and-backend/firebase
https://www.youtube.com/watch?v=8m-fa239hy4
https://www.youtube.com/channel/ucftm1fgjzspospdzgtbp7ha/search?query=firebase
https://codelabs.developers.google.com/codelabs/flutter-firebase/#0
Подключение Firebase - определенно проще для реализации для Flutter, вы можете сделать это в 20 строках кода в зависимости от просмотра списка. Основы одинаковы, вам нужны файлы .json и должны добавить их в консоли Firebase. Кодирование в Flutter помогает вам понять это гораздо лучше. В целом это похоже.
Списки + Firebase - Android имеет сумасшедшие просмотры переработчика, которые делают все настолько сложным, а интеграция Firebase + Recycler View имеет около 200 статей, и вы просто не можете освоить его. Я никоим образом не мог реализовать что -то в Android без учебного пособия, но в Flutter вы всегда можете попробовать
Выбрать, нажимать данные - нажатие данных также проще в Flutter Firebase, есть буквально метод Ontap (), который позволяет отправлять снимок данных
Машинное обучение - Интеграция машинного обучения
UI - Flutter и RN имеют одну файловую систему, где вы определяете правила и пользовательский интерфейс. Мне лично нравится интерфейс для приложений Flutter, поскольку он гораздо более определен. Он также поддерживается Google, который владеет Android и может иметь гораздо лучшую интеграцию с Google.
Классы - Flutter использует виджеты для буквально всего, от Textviews до Tabviews - их называют «виджеты». Flutter использует DART, тогда как React Native использует TypeScript или JavaScript.
Компоненты - RN имеет компоненты, и мы должны импортировать их из «реагируемых», чтобы использовать их. Flutter имеет виджеты, которые можно использовать в аналогичном пространстве. Оба они похожи, кроме стиля и части рендеринга.
Стилирование Flutter - Внутренние виджеты - Итак, если вы хотите, чтобы padding => вы оберните виджет в виджет padding () с некоторыми заполнениями, отреагируйте Native: вы определяете стиль Const: stylesship и добавляете свои стили - похожие на веб -стиль, где у вас есть CSS. Таким образом, React Native имеет стиль CSS, тогда как у Flutter есть стиль «виджет»
Анимации - Флаттер гораздо проще в GRASB, тогда как у Native Native есть более широкий аспект для него
Кривая обучения - аналогичная по натуральной и трепетной.
Библиотеки - NPM помогает в реализации Native, тогда как для Flutter мы просто добавляем их в файл pubspec.yaml
API - оба они имеют четкое представление об использовании API. Хорошая статья для RN-https://medium.com/better-programming/handling-api-like-aboss-in-react-native-364abd92dc3d
Редактор кода - VS -код популярен для обоих
Начало работы - лично, было очень сложно работать с React Native в Windows. Гораздо лучше, если вы используете Mac, но в целом этот красный экран раздражает вас. У Flutter нет самого простых руководств по началу работы, но есть поддержка, чтобы помочь вам.
В целом - оба могут создавать кросс -нативные приложения, и я выберу Flutter Any Day - Hackathons/ Quick Projects/ Ide Android также и реагируйте Native - Web/ Learn React.js/ -> Если вы хотите подчеркнуть себя: P
fetch () async {
var url = "API-HERE" ;
var res = await http. get (url);
var body = jsonDecode (res.body);
// body is your API body
}content description к кнопке, TextView и т. Д. В Android для голосовых кадров https://steemit.com/utopian-io/@tensor/advanced-flutter-project-best-cractices-Generic-bloc-Providers-part-three
class App extends StatelessWidget {
@override
Widget build ( BuildContext context) {
// TODO: implement build
return MaterialApp (
home : Home (),
theme : ThemeData (primaryColor : PrimaryColor ), //add-your-color here || or remove this
debugShowCheckedModeBanner : false ,
);
}
}
class Home extends StatefulWidget {
@override
State < StatefulWidget > createState () {
// TODO: implement createState
return new _HomeState ();
}
}
class _HomeState extends State < Home >{
@override
Widget build ( BuildContext context) {
return Scaffold (
body : Column ()
);
}child : users.length <= 0
? Center (
child : EmptyState (
title : 'Oops' ,
message : 'Add form by tapping add button below' ,
),
)
: ListView . builder (
addAutomaticKeepAlives : true ,
itemCount : users.length,
itemBuilder : (_, i) => users[i],
),
) fetch () async {
var url = "API-HERE" ;
var res = await http. get (url);
var body = jsonDecode (res.body);
// body is your API body
} for ( int i = 0 ;i < body[ 0 ][ 'staggered_tiles' ].length;i ++ ){
_staggeredTiles. add ( new StaggeredTile . count (
body[ 0 ][ 'staggered_tiles' ][i][ 'cross_axis' ], // body is what we get from the API
body[ 0 ][ 'staggered_tiles' ][i][ 'main_axis' ] // body is what we get from the API
));
}
if (body[i][ 0 ][ 'type' ] == 'donut' ) {
List < LabelPieSales > _d = [];
for ( int j = 0 ; j < body[i][ 0 ][ 'data' ].length; j ++ ) {
_d. add ( new LabelPieSales (
body[i][ 0 ][ 'data' ][j][ 'year' ], body[i][ 0 ][ 'data' ][j][ 'sales' ])); // body is what we get from the API
}
_wid_top. add ( new Container (
height : 200 ,
width : 200 ,
child : DonutChartWidget . withSampleData (_d),
));
}
else if (body[i][ 0 ][ 'type' ] == 'label-pie' ) {
List < LabelPieSales > _d = [];
for ( int j = 0 ; j < body[i][ 0 ][ 'data' ].length; j ++ ) {
_d. add ( new LabelPieSales (
body[i][ 0 ][ 'data' ][j][ 'year' ], body[i][ 0 ][ 'data' ][j][ 'sales' ])); // body is what we get from the API
}
_wid_top. add ( new Container (
height : 200 ,
width : 200 ,
child : SimpleBarChart . withSampleData (_d),
));
} return Container (
padding : const EdgeInsets . all ( 4.0 ),
child : appState.isFetching
? CircularProgressIndicator ()
: appState. getResponseJson () != null
? ListView . builder (
primary : false ,
shrinkWrap : true ,
itemCount : appState. getResponseJson ().length,
itemBuilder : (context, index) {
return Container (
height : 100 ,
width : 100 ,
child : graph (appState. getResponseJson ()),
);
},
)
: Text ( "Press Button above to fetch data" ),
); initDB () async {
return await openDatabase (
join ( await getDatabasesPath (), 'graphs_database.db' ),
onCreate : (db, version) {
return db. execute (
"CREATE TABLE graphs(id INTEGER PRIMARY KEY, type TEXT)" ,
);
},
version : 1 ,
);
}floatingActionButton : FloatingActionButton (
child : Icon ( Icons .add),
onPressed : () async {
Dog dog = new Dog (id : _id, name : "name" ,age : 22 );
await insertDog (dog);
setState (() {
_id += 1 ;
});
},
), List < Graph > graphs_sql = await graphs ();
List < String > graphs_sql_types = [];
for ( int i = 0 ;i < graphs_sql.length;i ++ ){
graphs_sql_types. add (graphs_sql[i].type);
}
if (graphs_sql.length != _types.length) {
for ( int i = 0 ; i < _types.length; i ++ ) {
if ( ! graphs_sql_types. contains (_types[i])){ // add only if a new type
await insertGraph ( new Graph (id : i, type : _types[i]));
}
}
} launchUrl () {
setState (() {
urlString = controller.text;
flutterWebviewPlugin. reloadUrl (urlString);
});
} class News {
String dateAdded;
String title;
String body;
String level;
String category;
News ( this .dateAdded, this .title, this .body, this .level, this .category);
}
class Record {
final String name;
final int votes;
final DocumentReference reference;
Record . fromMap ( Map < String , dynamic > map, { this .reference})
: assert (map[ 'name' ] != null ),
assert (map[ 'votes' ] != null ),
name = map[ 'name' ],
votes = map[ 'votes' ];
Record . fromSnapshot ( DocumentSnapshot snapshot)
: this . fromMap (snapshot.data, reference : snapshot.reference);
@override
String toString () => "Record<$ name :$ votes >" ;
} double _height = MediaQuery . of (context).size.height;
double _width = MediaQuery . of (context).size.width; @override
void initState () {
// TODO: implement initState
super . initState ();
_image = {url};
localList1 = globalList1;
localList1 = globalList2;
} export const sendToTopic = functions.firestore
.document( 'recipes/{recipyId}' )
.onCreate(async snapshot => {
// const recipe = snapshot.data();
const payload : admin.messaging.MessagingPayload = {
notification: {
title: 'new recipe added, check it out' ,
body: 'Make it and eat it'
}
};
return fcm. sendToTopic ( 'recipes' , payload);
}); @override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (title : Text ( 'Recipes for you' )),
body : _buildBody (context),
);
}
Widget _buildBody ( BuildContext context) {
return StreamBuilder < QuerySnapshot >(
stream : Firestore .instance. collection ( 'recipes' ). snapshots (),
builder : (context, snapshot) {
if ( ! snapshot.hasData) return LinearProgressIndicator ();
return _buildList (context, snapshot.data.documents);
},
);
} List<Recipe> recipe_list = [];
// snapshot.map((data) => recipeList(context, data).toList());
for(int i=0;i<snapshot.length;i++){
Recipe recipe = Recipe.fromSnapshot(snapshot[i]);
recipe_list.add(recipe);
}
return AsymmetricView(products: recipe_list,);
