Узнай, что такое Flutter и Dart, установи инструменты, создай свой первый проект и почувствуй магию hot reload.
Открыть этот урок в KodokonFlutter - это фреймворк: большой набор готового кода, созданный Google для разработки мобильных приложений, то есть программ, которые ты устанавливаешь на телефон. Его главная сила: ты пишешь код всего один раз, и он работает на iPhone, Android, в вебе и даже на компьютере. Этот код пишется на Dart - языке программирования, то есть наборе слов и правил, которые позволяют давать инструкции машине. Чтобы установить Flutter, следуй официальному руководству на docs.flutter.dev (раздел Get started): там ты скачаешь SDK (Software Development Kit, комплект со всеми инструментами) и установишь редактор кода, например Visual Studio Code с расширением Flutter. Затем всё проверяется в терминале: окне, в котором ты вводишь текстовые команды, чтобы управлять компьютером.
flutter doctorКоманда flutter doctor работает как врач: она осматривает твою машину и показывает список проверок - зелёная галочка там, где всё готово, и крестик там, где чего-то не хватает, вместе с инструкцией, как это исправить. Как только самое важное стало зелёным, можно создавать первый проект: папку, в которой будет храниться весь код твоего приложения. Имя проекта Flutter пишется строчными буквами, без пробелов и диакритики, а слова разделяются подчёркиваниями (_).
flutter create my_first_app
cd my_first_app
flutter runflutter create создаёт папку my_first_app с полноценным демонстрационным приложением. cd (change directory) переходит в эту папку, а flutter run компилирует и запускает приложение на телефоне, подключённом по USB, на эмуляторе (виртуальном телефоне прямо на твоём экране) или в браузере Chrome. Весь код, который ты пишешь, живёт в файле lib/main.dart. Замени его содержимое этой минимальной программой:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text("Hello Flutter!"),
),
),
);
}
}Прочитаем это в общих чертах, не пытаясь освоить всё сразу: import подключает графический набор инструментов Flutter, void main() - это точка входа (самая первая функция, которая выполняется), а runApp запускает приложение, показывая текст "Hello Flutter!" по центру экрана. Каждую деталь мы разберём в следующих уроках. А теперь магия hot reload: измени текст сообщения, сохрани файл... и приложение на экране обновится мгновенно, без перезапуска. Этот сверхкороткий цикл - одна из главных сильных сторон Flutter.