оригинал:medium.com/free-code — от…
Переводчик: фронтенд технический брат
Несколько лет назад у меня было несколько набегов на разработку Android и iOS с использованием Java и Objective-C. Мне потребовался почти месяц, чтобы на самом деле работать, и я решил продолжать учиться и копать глубже. Но мне трудно углубляться.
Недавно я узнал о Flutter и решил снова поддержать разработку мобильных приложений. Я сразу влюбился в него, потому что он делает разработку многоплатформенных приложений такой увлекательной. Узнав об этом, я создал приложение и библиотеку, используя его. Flutter кажется очень многообещающим шагом, и я хотел бы объяснить, почему я верю в это по нескольким причинам.
Работает на дартс
Flutter использует язык Dart, разработанный Google. Если вы раньше использовали Java, вы будете хорошо знакомы с синтаксисом Dart, так как они очень похожи. Помимо синтаксиса, Dart — это совершенно другой язык. Я не буду подробно обсуждать Dart, так как это немного выходит за рамки, но я хотел бы обсудить функции, которые я считаю наиболее полезными. Эта функция поддерживает асинхронные операции. Дарт не только поддерживает его, но и очень прост. Если вы выполняете ввод-вывод или другие трудоемкие операции (например, запросы к базе данных), вы, скорее всего, используете их во всех своих приложениях Flutter. Без асинхронной операции любая длительная операция привела бы к зависанию программы до завершения. Чтобы предотвратить это, Dart предоставляет нам ключевые слова async и await, которые позволяют нашей программе продолжать выполнение, ожидая завершения этих более длительных операций. Давайте рассмотрим несколько примеров: один без асинхронных операций, а другой с.
// Without asynchronous operations
import 'dart:async';
main() {
longOperation();
printSomething();
}
longOperation() {
Duration delay = Duration(seconds: 3);
Future.delayed(delay);
print('Waited 3 seconds to print this and blocked execution.');
}
printSomething() {
print('That sure took a while!');
}
и вывод:
Waited 3 seconds to print this and blocked execution.
That sure took a while!
Это не идеально. Никто не хочет использовать приложение, которое зависает при выполнении длительной операции. Итак, давайте немного изменим его и используем ключевые слова async и await.
// With asynchronous operations
import 'dart:async';
main() {
longOperation();
printSomething();
}
Future<void> longOperation() async {
var retVal = await runLongOperation();
print(retVal);
}
const retString = 'Waited 3 seconds to return this without blocking execution.';
Duration delay = Duration(seconds: 3);
Future<String> runLongOperation() => Future.delayed(delay, () => retString);
printSomething() {
print('I printed right away!');
}
и снова вывод:
I printed right away!
Waited 3 seconds to return this without blocking execution.
Благодаря асинхронным операциям мы можем выполнять код, выполнение которого занимает некоторое время, не блокируя выполнение остального кода.
Напишите один раз, работайте на Android и iOS
Разработка мобильного приложения может занять много времени, учитывая, что вам нужно использовать разные кодовые базы для Android и iOS. Если вы не используете SDK, такой как Flutter, у вас будет кодовая база, позволяющая создавать приложения для обеих операционных систем. Мало того, вы также можете запускать их полностью изначально. Это означает, что такие вещи, как прокрутка и навигация, похожи на ОС, которую они должны использовать.
Чтобы поддерживать тему в чистоте, Flutter может создать и запустить ваше приложение для тестирования, если у вас есть устройство или эмулятор, так же просто, как нажать кнопку.
разработка пользовательского интерфейса
Разработка пользовательского интерфейса — одна из тех вещей, которых я почти никогда не жду с нетерпением. Я больше бэкэнд-разработчик, поэтому, когда дело доходит до вещей, которые сильно зависят от него, я хочу что-то простое. Именно здесь Flutter выделяется в моих глазах. Создавайте пользовательский интерфейс, комбинируя различные компоненты и изменяя их в соответствии с внешним видом вашего приложения. У вас есть почти полный контроль над тем, как отображаются эти виджеты, так что вы получите то, что ищете. Для пользовательского интерфейса макета у вас есть виджеты, такие как Row, Column и Container. Для контента у вас есть такие виджеты, как Text и RaisedButton. Это лишь некоторые из виджетов, которые предоставляет Flutter, их гораздо больше. Используя эти виджеты, мы можем создать очень простой пользовательский интерфейс:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
centerTitle: true,
elevation: 0,
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text('Some text'),
),
Container(
child: RaisedButton(
onPressed: () {
// Do something on press
},
child: Text('PRESS ME'),
),
),
],
),
],
),
);
}
theme: ThemeData(
brightness: Brightness.dark,
canvasColor: Colors.grey[900],
primarySwatch: Colors.teal,
primaryColor: Colors.teal[500],
fontFamily: 'Helvetica',
primaryTextTheme: Typography.whiteCupertino.copyWith(
display4: TextStyle(
color: Colors.white,
fontSize: 36,
),
),
),
С помощью этих ThemeData мы устанавливаем цвет приложения, семейство шрифтов и некоторые стили текста. Все, кроме стилей текста, будет автоматически применяться во всем приложении. Стили текста нужно задавать вручную для каждого текстового виджета, но это все равно просто:
child: Text(
'Some text',
style: Theme.of(context).primaryTextTheme.display4,
),
библиотека
Flutter предоставляет множество отличных функций из коробки, но иногда вам нужно немного больше, чем он предоставляет. Учитывая большое количество библиотек, доступных для Dart и Flutter, это совсем не проблема. Заинтересованы в показе рекламы в вашем приложении? Есть библиотека. Хотите новые виджеты? Есть библиотеки. Если вы предпочитаете делать это самостоятельно, создайте собственную библиотеку сегодня и поделитесь ею с остальным сообществом. Добавить библиотеку в проект очень просто, добавив строку в файл pubspec.yaml. Например, если вы хотите добавить библиотеку sqflite:
dependencies:
flutter:
sdk: flutter
sqflite: ^1.0.0
После добавления его в файл запустите команду flutter packages get, и все готово. Библиотеки упрощают разработку приложений Flutter и экономят много времени при разработке.
Бэкенд разработка
Большинство современных приложений зависят от тех или иных данных, и эти данные необходимо где-то хранить, чтобы их можно было отобразить и использовать позже. Поэтому важно помнить об этом при создании приложений с новыми SDK, такими как Flutter.
Опять же, приложения Flutter создаются с использованием Dart, который превосходен в бэкэнд-разработке. В этой статье я много говорил о простоте, и бэкенд-разработка в Dart и Flutter не исключение. Создание приложений, управляемых данными, легко как для новичков, так и для экспертов, но эта простота не означает отсутствия качества.
Чтобы использовать это в сочетании с предыдущим разделом, доступна библиотека, чтобы вы могли использовать базу данных по вашему выбору. Используя библиотеку sqflite, мы можем очень быстро запустить и запустить базу данных SQLite. Благодаря шаблону singleton мы можем обращаться к базе данных и запрашивать ее практически из любого места без необходимости каждый раз заново создавать объект.
class DBProvider {
// Singleton
DBProvider._();
// Static object to provide us access from practically anywhere
static final DBProvider db = DBProvider._();
Database _database;
Future<Database> get database async {
if (_database != null) {
return _database;
}
_database = await initDB();
return _database;
}
initDB() async {
// Retrieve your app's directory, then create a path to a database for your app.
Directory documentsDir = await getApplicationDocumentsDirectory();
String path = join(documentsDir.path, 'money_clip.db');
return await openDatabase(path, version: 1, onOpen: (db) async {
// Do something when the database is opened
}, onCreate: (Database db, int version) async {
// Do something, such as creating tables, when the database is first created.
// If the database already exists, this will not be called.
}
}
}
После извлечения данных из базы данных их можно преобразовать в объекты с помощью моделей. Или, если вы хотите сохранить объект в базе данных, вы можете использовать ту же модель для преобразования его в JSON.
class User {
int id;
String name;
User({
this.id,
this.name,
});
factory User.fromJson(Map<String, dynamic> json) => new User(
id: json['id'],
name: json['name'],
);
Map<String, dynamic> toJson() => {
'id': id,
'name': name,
};
}
Эти данные не так уж и полезны без возможности отобразить их пользователю. Именно здесь Flutter поставляется с такими виджетами, как FutureBuilder или StreamBuilder.
последние мысли
С Flutter возможности практически безграничны, поэтому можно легко создавать даже сверхширокие приложения. Если вы разрабатываете мобильные приложения и еще не пробовали Flutter, я настоятельно рекомендую это сделать, потому что я уверен, что вам это тоже понравится. После нескольких месяцев использования Flutter я думаю, что можно с уверенностью сказать, что это будущее мобильной разработки. Это определенно шаг в правильном направлении.
❤️ после просмотра
- Ставьте лайк, чтобы больше людей увидело этот контент
- Обратите внимание на публичный аккаунт «Новое фронтенд-сообщество» и наслаждайтесь первыми статьями! Сосредоточьтесь на преодолении технической трудности переднего плана каждую неделю.